Menu hides page content

[christine_i]

Hello,
my menu has lots of menu points, so it has two lines. This is okay for me.
The problem is, that the second line hides the content of the page. It hides the revolution slider and every other page, too.
You can see the problem on this screenshot: https://fluegelschwinger.com/wp-content/uploads/2019/09/Screen.jpg

How can I fix this problem?

Thanks a lot in advance.

Best regards,
Christine

[Prasant]

Hello Christine,

Thanks for writing in!

In your case either you need to remove few menu items from navbar idea (which is I would also recommend) or you have the option of changing the font size to accommodate all the menu items.

Under X > Theme Options > Header > Links - Text > Navbar Font Size (Px) change the value from 20px to 10px.

Thanks.

[christine_i]

Hello Prasant,
But I really want to keep the menu with two lines. Isn´t it possible to adjust the menu in a way that it doesn´t overlap the page content?

Thanks a lot in advance.

Best regards,
Christine

[jade]

Hello Christine.

A workaround would be to increase the width of the navigation area. You can do this by adding this CSS to X > Theme Options > CSS:

.x-navbar-inner .x-container.max {
    max-width: 100%;
    width: 100%;
}

However, in some screen width, some of the navigation items might still fall in the second line so you may also decrease the navigation item font size by adjusting the font size as per @Prasant’s advice.

If you do not want to do that workaround, you can set the minimum height of the navigation area in X > Theme Options > Header > Navbar Top Height (px) then set it to around 150px.

Hope this helps.