Are you a GenerateCustomer?

Do you have an active GP Premium or GenerateBlocks Pro license key?

Create a GenerateSupport account for GeneratePress and GenerateBlocks support in one dedicated place.

Create an account
Already have a GenerateSupport account? Login

Just browsing?

Feel free to browse the forums. Support for our free versions is provided on (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

Navigation same width like content

  • Hey together, i followed this request ( to get the navigation the same width like the content. Together with that 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

Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.