[Resolved] Search & Basket Menu Items Alignment/Positioning Mobile

[Paul]

Hello all,

Whilst doing some mobile testing I’ve noticed a few issues with the Search & Basket Menu Items menu item positioning on the mobile site. They don’t seem to be aligned with the burger menu.

Also, I was thinking it might also be nice to have an option to put the Search Icon/Functionality and the Basket inside the burger menu on mobile devices. This would tidy up the header on mobile devices.

My Website

Password to access my site for testing: magic

Thanks,
Paul

GeneratePress 2.2.2

GP Premium 1.7.8

[David]

Hi there,

thats peculiar as the icons should be aligned – can you clear your Cache and Disable it to see if the issue persists. If the alignment is still a problem add this:

#mobile-header .inside-navigation {
    align-items: center;
}

For the very small device screens what would be the better option? To have the nav icons fall below the logo? Let me know

We are adding a Hook to the Menu itself, so it may be possible to do something like you suggest in the future.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Paul]

Hi David,

The css you provided solved the alignment issues. Many thanks, be good if this could be added to future releases?

For the very small device screens what would be the better option? To have the nav icons fall below the logo? Let me know

Ideally, on mobile devices, removing the search icon and basket icons and instead including them within the menu itself would be the best solution in my eyes. Having them span over twice the height of the header really shouldn’t happen as A) it takes up valuable real estate, and B) looks buggy/amateurish.

If the above cannot be implemented, then minimum you should have logo centered, then menu and icons centered beneath that with top and bottom margins reduced. This would at minimum clean up the design, even if it’s not an ideal solution.

Is this something that can be implemented for the next release or should I hack together something myself in the meantime?

Thanks,
Paul

[David]

The misalignment is not normal, there is some other CSS at play, could be the cache messing with the CSS order, i noticed on hover the Menu toggle was shifting as well. But i can’t see what could be effecting this as because the cache being active. But glad the CSS resolved the problem.

Generally a smaller logo is advised for the Mobile Header as there isn’t a lot of space on the older smaller devices. Just to note, the browser responsive tools aren’t accurate, i tested this on a iPhone 4 and 5 and only the menu toggle falls to the next line. Some CSS like this may be the easiest fix by reducing the logo size and trimming down the toggle padding may take some tweaking:

@media (max-width: 380px) {
    .site-logo.mobile-header-logo img {
        width: 100px !important;
        height: auto !important;
    }
    .main-navigation.has-branding .menu-toggle {
        padding: 4px !important;
    }
}

You could also remove the ‘Menu’ label in the customizer to give it some more space.

Moving the menu bar items into the menu itself may cause some issues, particularly the search icon which i wouldn’t advise trying.

GP Premium 1.8 introduces a lot of new Woo features including mobile mini cart, which is why i am reluctant to advise on moving the cart icon as well. You can see its new features here:

https://generatepress.com/gp-premium-1-8/

Something you may want to consider whilst you’re building your site. Its currently in release-candidate and you can download to test if you wish from your Account > Downloads

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Paul]

Thanks for the in-depth response David, greatly appreciated.

With the help of your suggestions and the following code, I’ve tidied up the top menu.

.main-navigation .mobile-bar-items a {
    padding: 0px 7px;
}

.main-navigation.has-branding .menu-toggle {
    padding-left: 6px;
}

.main-navigation .mobile-bar-items .search-item a {
    padding-left: 0;
}

@media (max-width: 380px) {
    .site-logo.mobile-header-logo img {
        width: 140px !important;
        height: auto !important;
        padding: 1px !important;
    }
}

[David]

You’re welcome. Really worth checking out 1.8 when you get a chance 🙂 Thanks for sharing your solution.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts