[Support request] Mobile Header Layout

[Tom]

Hmm, that’s likely due to the search plugin initializing. It might be worth checking with their developers if there’s a way to hide it until it’s fully loaded.

[Ash]

Emailed them 2 weeks ago about something else they never responded.

Looking at the screenshot it looks like it’s the cart icon that moves about, search icon doesn’t show straight away as it is same on desktop.

Top menu also creates shift but not always.

[Tom]

Does the issue go away if you temporarily deactivate the cart icon? What about the search feature?

[Ash]

Cart disabled https://ibb.co/Cbj1ZzM

Activated again
Mobile – https://ibb.co/rsHRr0z
Desktop – https://ibb.co/NSk4zry

Menu shifting even doing it on desktop which doesnt have the search icon.

But tbf disabling either stops shift on mobile.

[Tom]

Yea, I’m 99% sure it’s the search box that would conflict with any kind of content next to it.

You could try hiding it until it’s loaded:

.dgwt-wcas-search-wrapp {
    display: none;
}

.dgwt-wcas-layout-icon-flexible-loaded {
    display: block;
}

[Ash]

Unfortunately not, will come back to this one when it’s on our live server.

Going to be a pain, I’ve decided I want the Login/Register hook in the top bar menu on mobile, how can I accomplish this?

[Tom]

You would need to hook them into the generate_inside_secondary_navigation hook, and then you’d need to give it custom CSS so it matched the other links in the navigation.

It may be easier to find a plugin that provides a login/logout link as a menu item, then add the menu item to the Secondary Nav.

[Ash]

Thanks Tom,

I have changed the hook, any help with the css.

Apologies, I know there is a plugin for this but I have had to add quite a few extra plugins moving over to gp

[Tom]

I’m still seeing it inside the header – not in the secondary nav. Are you still working on staging?

[Ash]

Yes staging. Its hidden on desktop it should show in secondary menu on mobile/desktop

[Tom]

Ah I see it, sorry about that.

So instead of this:

<div class="hide-on-desktop">
    ...
</div>

Do this:

<div class="hide-on-desktop mobile-account-links">
    ...
</div>

Then add this CSS:

@media (max-width: 768px) {
    .secondary-navigation .inside-navigation {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
    }

    .secondary-navigation .main-nav {
        flex-basis: 100%;
        order: 3;
    }

    .secondary-navigation .mobile-account-links {
        order: 2;
        padding-right: 10px;
        font-size: 14px;
    }

    .secondary-navigation .mobile-account-links a {
        color: #fff;
    }

    .secondary-navigation .menu-toggle {
        text-align: left;
        flex-grow: 1;
        width: auto;
    }
}

[Ash]

Perfect thank you. Does it have to show when secondary is toggled? Also secondary menu items are being pushed to the right

Sorry I’m being a pain, good news I have nearly finished the site lol

[Tom]

To hide it when toggled, add this:

.secondary-navigation.toggled .mobile-account-links {
    display: none;
}

I’ve adjusted the CSS above to fix the pushing issue: https://generatepress.com/forums/topic/mobile-header-layout/page/3/#post-1339485

[Ash]

Thanks Tom, how come menu items are floated to the right?

[Tom]

Adding the updated CSS above should fix that: https://generatepress.com/forums/topic/mobile-header-layout/page/3/#post-1339485

[Author]

Posts