Menu Customisation

[T4m]

Hi, I was wondering if it’s possible to have just one element of my menu with a permanent block background colour that’s active all of the time? I’ve found in the theme settings the option for menu items to have a block colour background on hover which obviously effects them all, and only when they’re hovered over, but I’d like it so when the site is loaded just one menu item has a permanent block colour background that doesn’t alter and remains the same colour when the menu item is clicked or hovered. I’d also like to be able to change the colour of the menu text for just the one menu item too to make sure it stands out against the block colour.
Thanks

[Veena]

Yes,It is posssible using custom CSS.For that you have to specify the menu’s id.
Foe eg: “account” menu

li#menu-item-236 {
background-color: #f0f8ff;
}

Pls make the changes accordingly.

[T4m]

Thank you, that worked perfectly! Is there a way to have the menu text a specific colour too, so all other menu items are the active and hover colours set in the theme options but for example ‘account’ has a different text colour of its own?

Thanks,

[Veena]

Pls use the below custom CSS –

li#menu-item-236 a {
color: #48a2e7 !important;
}

[T4m]

Thank you! This question is probably quite predictable based on the above haha, but what css do I use to change the hover colour an an individual menu item? I tried a couple of different alterations based on the above css but didn’t have much luck trying to guess it.

Thanks

[Veena]

Pls add the below custom CSS

li#menu-item-236 a:hover {
color: red !important;
}

Also pls remove the “!important” from the below custom CSS that you have given earlier – it should be color: #96cebe;

#primary-menu ul.menu > li.sfHover > a, #primary-menu > ul.menu > li > a:hover {
color: #96cebe !important;
}

[T4m]

I’ve worked it out! I cleared the hover colour in the primary menu theme settings area, then put

#primary-menu ul.menu > li.sfHover > a, #primary-menu > ul.menu > li > a:hover {
color: #96cebe;
}

into the custom css to apply the hover colours which stopped the individual hover colour from being overridden.

If you look at my menu at the moment I have a full border around one menu item, and a bottom border under the ‘join’ menu item, is there a way to shorten that border or put more of a space between ‘join’ and ‘account’? as at the moment the borders are almost touching which looks a bit squashy.
Thanks,

[Veena]

Pls use the below custom CSS –

li#menu-item-236 {
margin-left: 15px;
}

[T4m]

Brilliant that worked perfectly thank you! Is is possible to change the background colour of an individual mobile menu item, so make just account #48a2e7 in the mobile menu and keep the rest the green colour I’m using?

Thanks,

[Veena]

.dropdown-menu-wrap > ul.menu > li {
background: #afceca;
}
li#menu-item-236 {
background-color: #48a2e7;
}

Pls remove the background-color:transparent for the menu “join”.
Also now your account menu’s background color and font color is same(blue), Kindly try to make changes accordingly.

[T4m]

Thanks for that css, that only seemed to change the main menu from a computer browser and I was looking to change just the menu that appears on mobile devices, making the background of account #48a2e7 on the drop down mobile menu, I’m not sure if this is possible though?
Thanks,

[Veena]

Pls use the below custom CSS –

#mobile-menu ul li:last-child {
background: #48a2e7;
}

[T4m]

This reply has been marked as private.

[Veena]

First you have to specify the corresponding mobile menu’s id/class name and then apply background property.
Please see this post
https://www.livemeshthemes.com/support/faqs/how-to-fix-a-few-styling-issues-instantly-using-chrome-developer-tools/

Inorder to remove overlapping pls apply the below custom CSS –

@media only screen and (max-width: 1200px)
{
#primary-menu {
top: 10px;
}}

[T4m]

This reply has been marked as private.

[Author]

Posts