[Support request] Get Mobile Menu on Desktop as well, with centered logo

[Tom]

This is a tough one, as it’s very much custom development, which takes time. I’m sure the developers of Hermes spent a lot of time working on their header.

Let’s see if we can clean things up on mobile.

First, let’s make the search closer to the toggle:

@media (max-width: 768px) {
    .main-navigation.has-branding button.menu-toggle {
        padding: 0 10px 0 20px;
    }

    .main-navigation.has-branding .search-item a {
        padding-left: 10px;
    }
}

Now, let’s try to make the navigation search nicer on mobile:

#mobile-header .navigation-search.nav-search-active {
    position: absolute;
    top: 5px;
    right: 5px;
    bottom: 5px;
    left: 5px;
    width: auto;
    height: auto;
}

#mobile-header .navigation-search input[type="search"] {
    height: 100%;
    padding-left: 40px;
}

#mobile-header .menu-bar-item.search-item.active {
    position: absolute;
    top: 5px;
    left: 10px;
    bottom: 5px;
}

#mobile-header .menu-bar-item.search-item.active a {
    height: auto;
    line-height: 50px;
    background: transparent;
}

That should get you much closer to the desired result 🙂

[polina]

Hi Tom,
I am an artisan. Make very simple AND very nice AND very efficient is extremely difficult.
Your proposition is an excellent compromise; also considering what an “universal” theme could deliver compared to dedicated developers for 1 site only.

Would it be possible to have “menu” written near the hamburger, only on desktops and tablets? This is not manageable via the settings, as I understand. I believe it’s required, otherwise, the visibility and thus findability is too low.

Lastly, there is still an issue on click-ability, I just opened a ticket there:
https://generatepress.com/forums/topic/non-clickable-elements-in-off-canvas/

Thank and hoping to do a site you’ll be proud of
Kind regards

[Tom]

If you give it a mobile menu label in the Customizer, we should be able to just hide it on mobile.

Let me know 🙂

[Author]

Posts