Desktop & Mobile Identical menu - GeneratePress

Wait. The scroll bar problem doesn't seem to be happening again. Let me observe it and I'll let you know if it happens again.

Another question: Our UX team is not 100% sure about the search navigation so, if UX team finally decides to disable navigation search, what would be the steps for us to have menu in the left corner and logo in the right corner (same for desktop/tablet/mobile)?

Thank you and sorry about the back and forward.

what would be the steps for us to have menu in the left corner and logo in the right corner (same for desktop/tablet/mobile)?

Just activate the mobile header option and we can provide the CSS to swap the position of logo and menu:
https://docs.generatepress.com/article/mobile-header/

Hi again,

This is a bit confusing since I thought we were using already the mobile header same for desktop/tablet/mobile (we have Mobile Header = ON and Mobile Menu Breakpoint = 4000 px).

Am I right to say that we would only need to deactivate search navigation and install your new CSS to swap the position of logo and menu?

Please advise.

Thanks

1. Disable the Search.
2. Remove this CSS:

.site-logo.mobile-header-logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

3. Add this CSS:

.site-logo.mobile-header-logo {
    margin-right: unset !important;
}

Hi again,

Should we also remove this CSS code if we disable search navigation?

.navigation-search.nav-search-active {
left: unset;
max-width: 300px;
}

Thanks

Oops - Yep that too can go if the Search is disabled :)

Excellent.

I think all works perfectly now. You can check our Staging area: http://95b.ce2.myftpupload.com/).

Let us review it again with the UX team and get back to you.

Thank you for the help so far

Cool may want to change this:

.site-logo.mobile-header-logo {
    margin-right: unset !important;
}

to:

.site-logo.mobile-header-logo {
    margin-right: 20px !important;
}

This will stop the logo from touching the edge of the screen. Adjust the 20px to suit.

Actually we were about to write about that.

We changed is but the alignment in mobile/tablet of the menu and the logo is not proporcional. Logo seems to be in the far right but menu is not proportionally the same.

Could you please advise?

The menu toggle is 51px from the left, so you can do this:

.site-logo.mobile-header-logo {
    margin-right: 51px;
}

Hi again,

We tried that but UX team is not really buying into it since it looks good on desktop but it looks a bit like a waste of space on tabled/mobile.

This is the CSS code currently used for the correct logo separation (25px from the right end) that we would like you to use as a reference to suggest hot to move the menu to the equivalent position:

.site-logo.mobile-header-logo {
margin-right: 25px !important;
}

Is there any way we could the logo as it was (far right) and move the menu instead (aligning the menu it proportionally to the far left)?

Thanks

We would also like to incrase proportion / size of the hamburger menu icon. Is there any way we could do that without modifying the Menu Item Width?

Thanks

Replace this CSS:

.main-navigation.has-branding .menu-toggle {
    order: -1 !important;
    margin-right: auto;
}

With this:

.main-navigation.has-branding .menu-toggle {
    order: -1 !important;
    margin-right: auto;
    padding-left: 25px;
    padding-right: 25px;
    font-size: 24px;
}

You can adjust the left/right padding for the alignment, and increase the font-size to make the toggle larger.

Hi again,

It's looking much better now with this CSS code:

.site-logo.mobile-header-logo {
margin-right: 25px !important;
}

.main-navigation.has-branding .menu-toggle {
order: -1 !important;
margin-right: auto;
padding-left: 25px;
padding-right: 25px;
font-size: 27px;
}

Changing the value of 'padding-right: 25px;' is not doing anything in the menu nor in the logo. Could you advise why?

Thank you again for the help