Off canvas panel icon invisible from 501 to 768

Hi there,

instead of setting the Off Canvas to Display on Mobile and Destkop. Set it to Mobile only.
Then in Customizer > Layout > Primary Navigation - increase the Mobile Menu Breakpoint to a really hight value - eg. enter 6000px.

David, it works, but navigation-branding is loosing left margin.... logo is sticked to left margin of screen....

Try this CSS to add back a little padding when the screen is 1200px wide or less:

@media(max-width: 1200px) {
    .main-navigation.has-branding .inside-navigation.grid-container {
        padding: 0 10px !important;
    }
}

Above code not working.

I tried below one, is this correct....

.main-navigation:not(.grid-container):not(.mobile-header-navigation) .inside-navigation.grid-container .navigation-branding {
    margin-left: 20px;
}

Weird - that CSS i provided should work.
Does yours? If so it looks fine to me

Weird – that CSS i provided should work.

No, it was not working.

I had to have couple of css for managing it...

I believe, you need to update navigation-branding-flex.css...

Try the latest 1.12.0-beta.2 version :)

Dear Tom, I removed the added css, and this beta.2 resolves the issue.

One more issue, I would like to highlight .navigation-branding margin-left which is hard-coded 10px, it is not coming nice when you apply padding of 20px in content.

I had to use following css to overwrite

.navigation-branding {
    margin-left: 20px;
}

Please check...

Have you tried changing the Container alignment to "Text" in Customize > Layout > Container?

Hi Tom

Using
GPP 1.12 rc1
GP 3 beta 2

Removed inserted css in simple css.

Please check left alignment of logo is NEITHER aligned with box NOR aligned with text in both ways as per customiser - Container alignment to “Text” OR "Box".....

I think the issue here is that you've changed the mobile navigation breakpoint to 6000px so you are actually seeing the mobile header layout on desktop.

The margin-left: 10px CSS is added to the mobile navigation branding so the logo doesn't position right against the edge of the mobile screen.

So in this case we can try some CSS like this to tweak it:

@media (min-width: 1220px) {
    .navigation-branding {
        margin-left: 0 !important;
    }
}

Let me know if this helps :)

The margin-left: 10px CSS is added to the mobile navigation branding so the logo doesn’t position right against the edge of the mobile screen.

I am saying it should not be hard-coded...

Hmm I would say that most users don't want their logos to sit right against the edge of the screen on mobile.

So if we don't add that CSS in, we would end up having to provide that CSS to all the users who want that.

Let me know if this makes sense :)

it should be based on some logic to have value from customiser - padding / user input / or something.... think of it...