[Resolved] Fixing spacing issues in drop down navigation for tablets and phone

[jennifer]

Hi! Is there a way to fix the padding (?) and spacing for my drop down menu in tablet and phone view? The lack of padding to the left of the drop down nav is seen on any device, and the spacing between the levels of nav, particularly on an iPad is huge!

I tried playing with margins, but it moved the secondary nav (2nd level) over with the navigation item as well.

Thanks!

[Leo]

Hi there,

I assume the menu item height is set at 150px because you wanted to push the menu down to align with the logo?

If so I would recommend setting to a normal/smaller height, then use this CSS to move the menu down:

.main-navigation {
    margin-top: 100px;
}

Another option would be to use this method here to achieve your current layout:
https://docs.generatepress.com/article/navigation-logo/#navigation-as-header

Let me know if this helps.

[jennifer]

That helped…thanks a million!

[Leo]

No problem!

[Author]

Posts