[Resolved] Slideout navigation logo

[Bernhard]

Hello,
I want to use the slideout menu for desktop and mobile. For this, I have set the mobile breakpoint in the primary navigation to 2.000 px, is this the right way to do it?

The problem I have now is that the hamburger menu (on the left) covers the navigation logo. I would like therefore to have the navigation logo in the center. How can I do this?

Furthermore, in the sticky navigation the navigation logo is on the left and the hamburger menu on the right. This is confusing.

See the actual setup on my test page.

[Leo]

Hi there,

I want to use the slideout menu for desktop and mobile. For this, I have set the mobile breakpoint in the primary navigation to 2.000 px, is this the right way to do it?

You shouldn’t need to change the breakpoint.

Just make sure the off canvas panel is set to ON, then follow the instruction here:
https://docs.generatepress.com/article/off-canvas-panel-overview/#use-off-canvas-menu-only

[Bernhard]

Now I have the hamburger button on desktop on the right and on mobile on the left. In both cases the navigation logo is not there. In the sticky navigation is the hamburger button on the right and the navigation logo on the left.

Is it possible to have a unique layout with the hamburger button on the left, the navigation logo in the center and the search button on the right?

[Leo]

The navigation logo is a very old option and should not be used anymore.

Can you remove that and upload a logo in the site identity field?

Please also disable the caching plugin when we are helping.

Thanks

[Bernhard]

OK, done. I’ve prepared also a temporary access.

[Leo]

Can you activate this option first?
https://docs.generatepress.com/article/navigation-as-a-header/

[Bernhard]

Done.

[Leo]

Sorry one more thing.

Can you use the Flexbox version of the theme under Customizer > General?

It should make a layout like this much easier.

[Bernhard]

OK, done.

[Leo]

Thanks. Now try this CSS:

.inside-navigation .navigation-branding {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    margin-left: 0 !important;
}
@media (min-width: 769px) {
    .main-navigation .menu-bar-items {
        flex: 1;
        flex-direction: row-reverse;
    }
    .main-navigation .menu-bar-item.slideout-toggle {
        margin-right: auto;
    }
}
@media (max-width: 768px) {
    .main-navigation.has-branding .menu-toggle {
        order: -1 !important;
    }
}

[Bernhard]

OK, this works on desktop and tablet, but on mobile the toggle is still on the right.

[Leo]

Edited the CSS here:
https://generatepress.com/forums/topic/slideout-navigation-logo/#post-1532736

[Bernhard]

No change, on mobile the toggle is still on the right.

[Leo]

Edited it slightly:
https://generatepress.com/forums/topic/slideout-navigation-logo/#post-1532736

Please try again.

Let me know 🙂

[Bernhard]

Hi Leo,
yes, now it works. Great :).

Some more questions:
1. The hamburger button has the correct color, but when the navigation is slided out, the close button “X” is white. How can I configure this.

2. How can I set the navigation logo height? The actual height of the logo is 103px and I don’t want to have a very big file. The logo actually is shown big only when I set the menu item height in the primary navigation to the double.

3. In the slideout menu, how can I configure the width of the background behind the menu and how the color of the overlay on the right.

Thank you.

[Author]

Posts