Main menu styling issues

[josephrice]

Hi, I think I’ve gotten the site tweaked like I want it. There are three outstanding things that I can’t sort out though so I was wondering if you could help me with these last bits.

The hover state on the button in the main navigation doesn’t completely cover the square outline. There’s a subtle gap on either side of it.

On the Industry Knowledge button, the blue line in the hover state doesn’t go as wide as all of the other buttons. Is this fixable?

We’d like to keep the main section highlighted as long as the user remains on that page or a sub page that is within that section. Is this possible?

Thanks!
joe

[Alaa]

Hi Joe,

Looks like there is an extra layer of security you have on your login page:

We need this password also to be able to see your website.

Thanks.

[josephrice]

sorry that password is: harris

[paul.r]

Hi Joe,

I checked your site but could not replicate the issue. This is how it looks on my end.

When I hover over the portal menu, the background fills the box and when I go to Services Page the blue highlight stays on.

Can you try clearing your browser cache and check again.

Thanks

[josephrice]

Hi Paul-

You can see on the left edge there is a white gap between the overlay and the outer frame.

Here you can see that the blue bar behind Services is much wider on the left and right than the one behind Industry Knowledge. All others match the size of Services, it’s just Industry Knowledge that is shorter.

And regarding the blue highlight staying on, it does work properly when you’re on that page. What I was asking about was whether or not there was a way for me to keep the highlight on when you’re in a sub-section within a category. For example, in any of the Industry Knowledge sub pages, I’d like Industry Knowledge to remain highlighted.

Thanks
joe

[Prasant]

Hello @josephrice,

Thanks for updating the thread.

Reason why there is a space between hover background and separator is because you have set the with as 80% under Navigation Inline > Top Links > Particles > Primary Particle Style > Width & height. Please change it to 100%.

As of now option to style current menu item when user is inside submenu is not available in header builder.

Thanks.

[josephrice]

Howdy-
Changing that to 100% makes the bar wider, but does it to all of them and still the Industry Knowledge button remains a different width than the other buttons. You can see from my previous image that the blue bar behind services extends about 30px to the left and the right, where as it only extends about 5px to the left and right of Industry Knowledge.

Thanks for the help-
joe

[paul.r]

Hi Joe,

The highlight is based on the width of the nav item and not on text padding.
As you can see the Industry Knowledge text takes up to 75% of the width and setting the particle width to 75% will make it the same width as the text.

You can try disabling particle and add the code below in Header > CSS

.e40-5.x-menu span.x-anchor-text-primary:hover {
    background: rgb(135,195,203);
}

.e40-5.x-menu span.x-anchor-text-primary {
    padding: 0 10px;
}

Hope that helps

[josephrice]

Ok I see how it works. Thanks, I’ll give this a shot.
joe

[nabeel]

Sure, do let us know how it goes!