Change Menu Fonts/colors/size For Menus That Appear In Position Left Or Right On The Template
Derek Koopowitz
I have menus that appear in position left (or right) on the template (I'm not talking about the main menu at the top of the page) and they are very generic in look. I'd like to change the color of menu items (perhaps bold some items too) and even change the font/size of the menu item.
How do I do this?
I've tried using custom.css in the template with the following (as an example):
li.item-413 a { color: red; font-weight: bold; }
The menu item # is 413 - nothing happens. If I change it inline when viewing the source code it works... obviously this disappears when I change screens and come back in again. Thus the attempt to use custom.css.
Mehtaz Afsana Borsha
Accepted AnswerUse this CSS in your custom.css file
#sp-left .sp-module .sp-module-title, #sp-right .sp-module .sp-module-title{
color:red !important;
}
#sp-left .sp-module ul>li>a, #sp-right .sp-module ul>li>a{
color:red !important;
}Mehtaz Afsana Borsha
Accepted AnswerHi
Thanks for contacting us and sorry for your issue. Please use this CSS in your custom.css file
.sp-megamenu-parent>li.active>a, .sp-megamenu-parent>li.active:hover>a{
color: #c31f1f !important;
}
.sp-megamenu-parent>li>a, .sp-megamenu-parent>li>span{
color: #b25c5c !important;
font-size:18px !important;
font-weight:bold !important;
}-Regards.
Derek Koopowitz
Accepted AnswerHi Mehtaz,
Unfortunately this has nothing to do with the mega menu... my message was about the Joomla menus that appear in the left or right positions of the template. See the example below...
[https://www.nsrca.us/index.php/districts]
Best, -Derek
Derek Koopowitz
Accepted AnswerI thought I had put a link to the screen in my message... the URL is https://www.nsrca.us/index.php/eventsnewmenu
I have no idea how to attach a screenshot using this editor.
Derek Koopowitz
Accepted AnswerMehtaz,
Thank you so much! That worked perfectly.
Another question for you... can I change the border color so that it is more visible, and also can I change the line spacing for that menu so there is less space between each entry?
Best, -Derek
Mehtaz Afsana Borsha
Accepted AnswerYou are always welcome, Yes you can do it also CSS. Please use this CSS
#sp-left .sp-module, #sp-right .sp-module{
border: 1px solid #bd2121 !important;
}
#sp-left .sp-module .sp-module-title, #sp-right .sp-module .sp-module-title{
border-bottom: 1px solid #bd2121 !important;
}
#sp-left .sp-module ul>li, #sp-right .sp-module ul>li{
border-bottom: 1px solid #bd2121 !important;
}
#sp-left .sp-module ul>li>a, #sp-right .sp-module ul>li>a{
line-height:30px !important;
}
#sp-left .sp-module .sp-module-title, #sp-right .sp-module .sp-module-title{
margin: 0 0 5px !important;
}Derek Koopowitz
Accepted AnswerHi Mehtaz,
I tried the changes you gave me and I did not notice any difference to the menu at all. I tried changing some of the values/colours with no difference as well.
BTW, I changed the color of the menu title to "green" and it didn't work either. The individual menu items under the menu title were changed to blue and that worked well initially, but now that I've played around with the colors some more, I've changed them to red and that didn't work either.
Best, -Derek
Mehtaz Afsana Borsha
Accepted AnswerDon't you want to change these borders?
Give me your super admin access please.