-
Hey together, i followed this request (https://generatepress.com/forums/topic/how-to-make-the-primary-menu-exactly-the-same-width-as-the-content-area/) to get the navigation the same width like the content. Together with that https://generatepress.com/forums/topic/reduce-the-padding-between-menu-items/ i also had the Text exactly the same line then Logo and Content.
Now there are 2 problems:
1. The Search Icon is not inside this navigation, so it is on a separate line, how to fix that
2. With reduce of the padding the hover looks not so great, so what’s the best way to get a nice padding around these buttons but having the text in the line. -
Update: what i did now for the search icon is that
.menu-bar-items { padding-left: 70px; } .main-navigation .inside-navigation { flex-wrap: nowrap; }But i think its more an hotfix then a right solution
-
Hi there,
It does require some CSS and the method you have used is ok.
My approach starting from scratch would be like this:
1. in Customizer > Layout > Primary Navigation set:
1.1 the Navigation Alignment to Left
1.2 check the display Navigation Search
1.3 set the Menu Item Width to a reasonable value eg 20px.2. Add this CSS to make the menu fill the available space:
.main-navigation:not(.toggled) .main-nav { flex-grow: 1; } .main-navigation:not(.toggled) .main-nav>ul { justify-content: space-between; }3. Optional add this CSS to remove the let padding from the first menu item:
.main-navigation:not(.toggled) .main-nav ul li:first-child a { padding-left: 0; } -
perfect thank you David 😀
-
You’re welcome
- You must be logged in to reply to this topic.