[the brink]

Hi,

I would like to highlight one element of my main menu, the “support us” element. Specifically I would like it to look like the “support us” button on the about page except that it should be the same font size etc as the rest of the menu. I’m not sure if it should be Uppercase or not, but if you show me how to make make that change I can always change it back myself.

Thanks a lot

TB

[sapana]

@the-brink: Go to=> Appearance=> Customize=> Additional CSS=> add the following CSS code

#menu-item-657 {
 background-color:#f64d2b;
}
#menu-item-657 a{
 color:#ffffff !important;
}

Let me know if this helps you out!

Kind Regards,
Sapana

[the brink]

Great that’s worked well. Only thing is I’d like the background colour to cover less area, i.e. only highlight the word rather than filling the whole menu button. How can I do that?

[sapana]

@the-brink: Go to=> Apperance=> Customize=> Additional CSS=> add the following css code

.navigation-classic .main-navigation a {
    padding: 8px 15px;
}

let me know if this helps you out!

Kind Regards,
Sapana

[the brink]

ok, that’s a bit better. only thing is now the main menu is out of sync with the social menu and search button. how can I make that change affect those two also?

Alternatively, is there another way to make the box around “support us” smaller without affecting the whole main menu?

thanks

TB

[sapana]

@the-brink: Helo brink, Please follow this steps
Go to=> Appearance=> Customize=> Additional CSS=> add the following css code

.navigation-classic .social-top .menu-social-container {
    padding: 0px;
}
.menu-toggle-wrapper {
    padding: 10px;
}

– It is quit difficult to make the support box smaller without changing other menu since they all are located in same div.
Let me know if this helps you out!

Kind Regards,
Sapana

[Author]

Posts