Mobile Header Layout

Well no as the code changes login/Register to account once logged in.

Off canvas is to be used as product category filter.

Hi there,

So are you wanting to add these elements inside the mobile menu so they display when the mobile menu is opened?

If so, try this hook: generate_after_primary_menu

And wrap your content in a div like this:

<div class="toggled-menu-content mobile-bar-items">
    Your stuff in here
</div>

Then add this CSS:

.main-navigation:not(.toggled) .toggled-menu-content {
    display: none;
}

.toggled-menu-content.mobile-bar-items {
    position: relative;
}

Let me know if that gets us closer to a solution or not :)

Thanks Tom, That works but doesnt look too good tbh.

I need the search icon to go where the theme search would be on mobile.

Ah, so you want it to display on mobile all the time (even when the menu isn't toggled)?

1. Login/Register
Your solution worked but it’s not aligned, doesn’t inherit colour and it’s lost it’s bottom padding in the menu.

2. Ajax search I would like in the same position as the theme search icon would be (next to cart)

1. Try the updated HTML/CSS: https://generatepress.com/forums/topic/mobile-header-layout/page/2/#post-1313336

2. For this, you'd need to hook it into the generate_inside_navigation hook:

<div class="mobile-bar-items ajax-search">
    Your search bar
</div>

Thanks,

Account hook all looks good now.

Mobile search is in the bar but needs moving to the correct position, left of basket like standard nav search would be.

As hide class breaks the hook for desktop, I tried hiding it with css but it just hides both versions of search

Try adding this as well:

@media (max-width: 768px) {
    .mobile-bar-items.ajax-search {
        order: 2;
    }

    #site-navigation .inside-navigation {
        display: flex;
        flex-wrap: wrap;
    }

    .mobile-bar-items:not(.ajax-search) {
        order: 3;
    }

    .main-navigation .mobile-bar-items {
        position: relative;
    }

    .mobile-bar-items .dgwt-wcas-search-wrapp {
        line-height: 50px;
        color: white;
    }

    .mobile-bar-items .dgwt-wcas-search-wrapp svg {
        fill: white;
    }

    #primary-menu {
        flex-basis: 100%;
        order: 3;
    }

    .main-navigation button.menu-toggle {
        width: auto;
        flex-grow: 1;
    }
}

Added, but it's broken the bar and dropdown menu layouts

Can you try the updated CSS?: https://generatepress.com/forums/topic/mobile-header-layout/page/2/#post-1317108

Yes that looks good thanks.

Now for just hiding the header search hook. Adding a class to the hook breaks desktop for some strange reason.

Tried hiding it with css but it hides the icon for mobile too.

Also I did notice once removed logo doesn’t exactly sit center.

Try this:

@media (max-width: 768px) {
    .inside-header .dgwt-wcas-search-wrapp {
        display: none;
    }
}

Thanks that works. Though I have noticed the previous css has moved secondary menu icon to the left.

Fixed: https://generatepress.com/forums/topic/mobile-header-layout/page/2/#post-1317108

Thanks Tom.

I'm getting a layout shift from the mobile menu bar, see here https://ibb.co/fXLFp05

Disabling them hooks my layout shift is zero, any ideas how to stop this?

Cheers