Menu left in left of logo

[sigreo]

How can I put the menu in the left of the logo, and the search button in the right?
I’m using volume template.
I also would like the navbar don’t be covered in the post page and pages.

Greetings

[David]

Hi there,

do you want to remove the custom navigation?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[sigreo]

Yeah, i would like it shows first the menu(space)logo(space)search button in the navbar.
And i would like keep that form in post and page pages.
Greetings,

[David]

Just to be clear the Menu would be the standard horizontal menu ?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[sigreo]

yeah! I would like a standard horizontal menu.
I would like that menu has 3 parts:
1- The word menu (if its possible with the 3 bars simbol) which if i click that button i can acces to de different pages.
SPACE
2. The logo of the site.
SPACE
3. The search button

The problem is that i online achive to put the menu in the right place of the logo and very close of it.

Greetings.

[David]

I notice your Site keeps changing – can you choose one or set it to default so we can provide the setup you need?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[sigreo]

I want something like that website: www. pau.ninja
I want a navbar with menu, logo and search button and post with cover (keeping the navbar) page(tags), autor,…. and later the content.
Im going to stablish the website to the default. Let me know if one of yours site layers can made what i want.
Greetings. Thanks.

[David]

So from the Default site – make sure you have cleared any old settings and removed any CSS in the Customizer > Additional CSS.

1. Create a Blank Menu ie. has no menu items and assign this to the Primary Navigation.
2. Create a real Menu and assign this to the Off Canvas Panel.
3. Customizer > Site Identity –> Add Logo
4. > Layout > Header –> Enable Navigation as Header
5. > Layout > Primary Navigation –> Enable Navigation Search
6. > Layout > Off Canvas Panel –> Enable for Destktop and Mobile.

At this point you should have a Logo to the left and the Nav Button and Search to the right.

7. Now add this CSS:

.navigation-branding {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.main-nav {
    flex: 1;
}

.main-nav ul {
    display: flex;
    justify-content: space-between;
}

.main-navigation.has-branding .menu-toggle,
.mobile-bar-items {
    display: none !important;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Franck]

Thanks for the hack, David!
Works well but:
1. How could I mask the Nav Button on desktop?
2. Overlay still got the original Nav button

Thanks

[Author]

Posts