Site logo

Archived topic

I think I have too many navigation bars

5 replies · Started by Nicole on May 31, 2022

Viewing posts 1–6 of 6

1. When I look in the code it looks like I have more than one navigation bar. I see certain links repeating themselves.

I should have only one navigation bar which appears at the top on each side of the logo. Could I have enabled more than one?

2. I have added 48px spaces between the navigation to prevent getting an error that the lines are too close. However, this error is only on a mobile. Is there a way to set large spaces between items on navigation on a mobile but not on a desktop?

Hi Nicole,

One navigation is set to display on Desktop/Tablet and the other navigation is set for mobile.

This is the default structure if you have different menus designs on mobile and desktop/tablet.

In Appearance > Customize > Layout > Primary Navigation, you’ll see a Mobile menu breakpoint setting. This denotes when the Desktop/Tablet or Mobile navigation will appear.

As for number 2, may we have a sample(screenshot) of a specific element has this 48 px spacing? May we also know how you added this?

Hope to hear from you soon!

Thanks for explaining that. I now have a much better understanding of how GeneratePress works.

Regarding number 2, I am not sure how to add a screenshot but if you hover on any of the items in the primary navigation you will see huge gaps between them. I added them with the spacing add-on. The problem is that Menu Item Width and Menu Item Height have options for mobile and desktop but the Sub-Menu Item Height only has one option. I need to make the mobile more spacious than the desktop and that doesn't seem to be an option.

Hi there,

do you want to revert the changes to the menu so your happy with the desktop.
And add this CSS for your mobile:

@media(max-width: 768px) {
    .main-navigation .main-nav ul ul li a {
        padding: 20px !important;
    }
}

RE: Sharing screenshots - you would need to provide us with a URL to a shared folder location such as dropbox, onedrive or your WP Media library. Or use an image sharing site and provide us the URL to that.

Thanks!

You're welcome

This archived topic is closed to new replies.