Hover box in navigation is covering menu

Support
#1

Hello,

Do you know how I can lower this box on hover, so it doesn’t cover the menu links like this?

Thanks for any help,
Justin

#2

Hey Justin,

Thanks for writing in!

To get your issue resolved, please go to X > Theme Options > Headers > Links - Alignment and adjust the “Navbar Top Link Spacing” by increasing the number to 60 pixels.

Kindly let us know if this works out for you.

#3

this seems to adjust the space between the links.
i’m looking for a way to lower the hover box so it doesn’t cover the links.

#4

Hey Justin,

Sorry for the confusion. I mean “Navbar Top Link Alignment”. This is for the alignment of the menu items vertically while “Navbar Top Link Spacing” is for the space between the menu items.

We would love to know if this has worked for you. Thank you.

#5

Sorry for the confusion, but i’m referring to this box with additional links, covering the links in the nav bar.

#6

Hey Justin,

The Navbar Top Link Alignment will move the Top Link (parent menu) items up so it won’t be covered by the submenu.

If you’re happy with your current parent menu (Top Link) setup and you wish the submenu to go down, you need to understand that the Submenu follows the height of the Navbar so if you increase Navbar Top Height in Theme Options > Header > Navbar, it will go down along with the Navbar height.

Another thing you need to take into account also is that the Submenu is positioned just above the bottom part of the Navbar. Technically, your Navbar Top Height now is set to 60. The Submenu is positioned 45. It is slightly above.

This is the menu design of the Integrity stack so there is no option to position the Submenu separately. If you wish to position the Submenu separately, read on.

Since there is no option to position the Submenu, you’d need CSS to override the theme’s setting. Please add this code in Theme Options > CSS and adjust 60px as per your design need.

.x-navbar .desktop .x-nav > li ul {
    top: 60px;
}

Please just note that we do not offer support for custom coding. I posted the code to override this part of the theme because it’s only a minor cosmetic change. If you need a menu or header design that is not possible with X, please consider upgrading to our Pro theme.

Hope that helps.

#7

Ah, I see.
I changed the NAVBAR TOP LINK ALIGNMENT to 20px, and that worked.

Thank yoU!

#8

We are delighted to assist you with this.

Cheers!

#9

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