Menu bar customizations

[loop7mediaParticipant]

Hello, I am trying to customize the menu bar on my site, I’m wondering what is possible with custom CSS.

– Can I make it so a particular tab in the menu is always highlighted/selected?
– Is it possible to make the menu bar thinner?
– Is it possible to display the menu bar in another location, like above the header image?
– Is it possible to align the items in the menu bar to the right, instead of the left?
– Can the menu bar be displayed as a drop-down on desktop browsers like it is on mobile browsers?
– Instead of “Menu” displayed as the default in the mobile drop-down, can other text be used?
– Can the drop-down on mobile browsers be adjusted so that it is not as wide?

Thank you for your help!

[Themonic-SupportKeymaster]

Hi,

1) Yes, but it will require menu item id, which you can find from Right click -> “inspect element” in chrome, then use like this

#menu-item-152 > a {
background: #0099ff;
}

2)

.themonic-nav li a {
    line-height: 3.2;
}

3) Will require a bit of custom work

4)

.themonic-nav ul.nav-menu, .themonic-nav div.nav-menu > ul {
    text-align: right;
}

5) Will require a bit of custom work

6) Line 159 selectnav.js inside js folder

7) Adjust percentage

.js .selectnav {
    width: 96%;
}

All the above CSS code can be used in Custom CSS in the live customizer or in Simple Custom CSS plugin. If you require custom work kindly email [email protected]

[loop7mediaParticipant]

Thank you very much for your help!

[ambistudentParticipant]

In addition to the width, is there a way to customize the height? The mobile menu bar on the themonic site is much thicker than the one on my website, and I would like to adjust this. Thanks!

[Author]

Posts