Modify Inline Navigation Element

[King]

Hi,

I have added an inline navigation element to this page on my site: https://hadleylearningcommunity.org.uk/secondary/teachers which is the menu with the grey background (menu name: teachers) and black font. I want to be able to do a few things:

1. change the colour of the font and hover over
2. when you change the page width so lets say to mobile, the menu squashes down so you only get the first colour of letters from each link. Can this wrap so that each item falls below each other?

Thanks again guys,

Chris

[basanta]

Hi There,

Thanks for writing in!

Please add this css to your customizer CSS and let us know how this goes.

#menu-meet-the-staff {
display: block !important;
text-align: center;
}

#menu-meet-the-staff li {
display: inline-block !important;
}

.
#menu-meet-the-staff li a {
color: #fff !important;
}
#menu-meet-the-staff li a:hover {
color: #999 !important;
}
@media (max-width: 600px) {
#menu-meet-the-staff li {
display: block;
width: 100%;
}
}

If that doesn’t help please send us your login details in a secure note to help you on this.
Thanks

[King]

The wrapping work now, just not the font colours. I will send the details in a secure note
thanks.

Chris

[Prasant]

Hello @King,

As you are using Pro theme, there is no need to add custom CSS to change menu link and hover color. You can change the color under Primary Text Style > Text Color. https://screencast.com/t/J08xkun5E

Thanks.

[King]

Hi @Prasant , i can’t do it like that as i think your settings are in the headers section. The menu i am trying to modify is on the page as an inline navigation element. Thanks.

[Prasant]

Hello @King,

Thanks for updating thread. Please add following CSS under Pro > Launch > Theme Options > CSS to change navigation link and hover color:

ul#menu-meet-the-staff a span {color: #ca4646;}

ul#menu-meet-the-staff a span:hover {color: #ddd;}

Thanks.

[King]

Perfect! Thanks @Prasant Now onto the next thing haha. Thanks again guys!

[Joao]

You are welcome!