Nav Bar Styling

Support
#1

Hi,

I’m looking for a way to ditch the line underneath the menu items in favour of shading the whole item into a button.
Then also choosing the colours for the font hover and active. Do I do this through CSS?
What code do I use?

#2

Hey @StickinOut,

Is this your site https://organicmotion.com.au/? Are you referring to the thin green line in the screenshot below?

That is a dropdown border. To edit it, go to the Dropdown partial.

Then, set the Dropdown Border to none.

I’m sorry but I’m not sure what you mean by “shading the whole item into a button”. Please provide more details.

Thanks.

#3

Hi,

This is my site. IM just referring to the standard coloured line that appears on hover of each top line menu item.

Cheers,
Scott

#4

Hi There,

Add the following CSS rule into your Theme Options -> Global CSS area and change the rgb values according to your preference or even you can replace this part rgb(255,100,100) with hex colour value #336699.

.x-navbar .desktop .x-nav > li > a:hover > span, .x-navbar .desktop .x-nav > li.x-active > a > span, .x-navbar .desktop .x-nav > li.current-menu-item > a > span {
    box-shadow: 0 2px 0 0 rgb(255,100,100);
}

Hope that helps.

#5

Thanks thats almost it.

Is there a way to change the line to the whole box like in the attached pic. If you hover over newsletters rather than just the line, the whole box highlights a different color and the text changes to contrast on the darker background.

#6

#7

Hi Scott,

Yes, it’s possible. Try adding the following CSS rule into your Theme Options > Global CSS area.

.x-navbar .desktop .x-nav > li > a:hover, .x-navbar .desktop .x-nav > li.x-active > a, .x-navbar .desktop .x-nav > li.current-menu-item > a {
    background-color: green;
}

Hope that helps.

#8

Cheers sir,

You’re a legend. The only thing remaining is the contact us tab at the end of the menu appears to be cut off. Can I adjust the margin to the eright of the menu or add in space to the box at all?

#9

Hello @StickinOut,

Thanks for updating the thread. :slight_smile:

When I opened your website I saw that there was something wrong upon hovering on navigation menus, it was shifting to the right side. Upon checking the source code of the website I came across the code that was causing the problem. I also scrolled previous replies by my colleague and none of them gave this code. So my guess is that you may have added the code. Here is a recorded screencast. https://cl.ly/1G140W3T0t3U

Here is the code:

.x-navbar .desktop .x-nav > li > a:hover, .x-navbar .desktop .x-nav > li.x-active > a, .x-navbar .desktop .x-nav > li.current-menu-item > a {
    background-color: #005531;
    padding-right: 5px;
}

The problem is causing because of padding-right: 5px; that’s been added.

Coming to your main question that Contact Us button is getting cut of on hover. Yes, I can confirm that. Please add following CSS under X > Theme Options > CSS:

.x-navbar-fixed-top-active .masthead-inline .desktop .x-nav>li:last-child>a {
    padding-right: 20px !important;
}

Thanks.

#10

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.