[Support request] Using the "Navigation as a Header" makes mobile navigation inefficient

[Gabriele]

Hello there!

I have been following the help articles to set up Navigation as a Header on my website. Everything looks really good on desktop and tablet.
Unfortunately, when the menu is collapsed into the three-lines-icon form and the user expands it there’s no way to go back to the homepage (considering my logo was the link to the homepage and the “menu-item-separator” is now showing up as a blank spot in the drop-down menu).
This not only looks a bit funky but really screws up the navigation strategy.
How can I have a mobile header where the logo shows big on top with the menu icon below and no menu-item separator but a text-link to “/home” maybe?

Thanks in advance. (Amazing work with this theme and support is stellar!)
G

[David]

Hi there,

can you check the URL you provided as that link is not working for me.
You can edit your original topic if you need to change it.

[Gabriele]

Hi,
Sorry for the late reply.
I just double-checked and the address is correct. I think there were some issues with the DNS.
Anyway, should be solved in the next few hours. Can you please check again then?
Also, I believe it’s Google chrome related, so Edge or Mozilla should be fine (or at least they are from my end)

Many thanks David!

[David]

Nice design 🙂
Can you disable the Mobile Header in Customizer > Layout > Header then i can take a look at the CSS required for that layout

[Gabriele]

Hey David, thanks!
That’s disabled now.

G

[David]

Ok – couple of other things first.

1. In Customizer > Additional CSS – you have CSS for splitting the menu and centering the logo – can you remove this.

2. For the mobile menu – enable the Customizer > Layout > Off Canvas Panel for Mobile only and assign a new menu to this, this new menu can include your home links and no separator item.

Let me know then i can figure out the CSS changes required.

[Gabriele]

I think that should be done now!
I included in the off-canvas menu a HOME link also.

Thanks,
G

[David]

Now replace your Simple CSS with this:

@media (min-width: 769px) {

    .comment-form #author,
    .comment-form #email {
        width: 48%;
        float: left;
    }

    .comment-form #email {
        float: right;
    }

    .comment-form #url {
        width: 100%;
    }

    /* Navigation as Header */
    .inside-header {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

    .header-widget {
        order: 10;
        overflow: visible;
    }

    .nav-float-right .header-widget {
        top: auto;
    }

    .nav-float-right .header-widget .widget {
        padding-bottom: 0;
    }

    .site-branding,
    .site-logo {
        position: absolute;
        left: 50%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        z-index: 200;
    }

    #mobile-header .mobile-bar-items {
        -webkit-box-ordinal-group: 5;
        -ms-flex-order: 4;
        order: 4;
        margin-left: auto;
    }

    #site-navigation {
        float: none;
        width: 100%;
    }

    .main-navigation:not(.slideout-navigation):not(.mobile-header-navigation) .main-nav>ul {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }

    .main-navigation .menu-item-separator {
        -webkit-box-flex: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
    }

    .main-navigation .menu-item-separator a {
        font-size: 0;
        background: transparent !important;
    }

    .slideout-navigation .menu-item-separator,
    .main-navigation.toggled .menu-item-separator {
        display: none !important;
    }
}

@media (max-width: 769px) {
    .main-navigation .main-nav ul li a {
        line-height: 40px;
    }
}

/* Links Underline Effect */
.inside-article p a:link,
.inside-article p a:active,
.inside-article p a:visited {
    padding-left: 0.3em;
    padding-right: 0.3em;
    color: inherit !important;
    text-decoration: none !important;
    box-shadow: inset 0px -5px 0px 0px rgba(224, 225, 226, 0.8) !important;
}

.inside-article p a:hover {
    padding-left: 0.3em;
    padding-right: 0.3em;
    background-color: rgba(224, 225, 226, 1) !important;
    color: inherit !important;
    font-weight: bold;
    opacity: 80%;
    transition: .5s;
}

@media (max-width: 768px) {
    .inside-header>:not(:last-child):not(.main-navigation) {
        margin-bottom: 0;
    }
}

/* MailChimp form */
.mc4wp-form input[type="submit"] {
    background-color: rgba(224, 225, 226, 0.75) !important;
    color: #1F3147 !important;
    transition: .25s;
}

.mc4wp-form input[type="submit"]:hover {
    background-color: rgba(224, 225, 226, 1) !important;
    color: #ED6B6D !important;
    transition: .7s;
}

body.page-id-91 {
    background-color: #DC4A5D;
}

.page-id-91 .inside-article {
    background-color: #DC4A5D;
}

.one-container .site-content {
    padding: 0;
}

And the last thing to do is in Customizer > Layout > Primary Navigation set the Alignment to Center.

[Gabriele]

Hi David,
Thanks for your swift reply.
I have updated the Simple CSS with your changes and also the alignment.
Unfortunately, the effect I get is not idea: in portrait mode, the “hamburger-menu” is overlayed to the site tagline and in landscape mode, it’s all scramble of title, tagline and menu at the top of the screen.
Also, if and when I manage to hit the menu, the links are super tight to the top of the screen, can we introduce some padding between them and maybe even centre (horizontally and vertically) the elements to the whole screen?

Thank you so much for your help!
G

[David]

1. Customizer > Layout > Off Canvas Panel and increase the Menu Item Height to give them some more space.

2. Edit your Header Element and on the Site Header tab, increase the Offset Site Header Height for mobile. This will stop the nav and the content from overlapping.

[Gabriele]

Hi David!
That’s great, thank you!
The only thing that still persists is the clashing of site logo and content, (and therefore also menu hamburger) when I tilt to landscape on my mobile.
Is there any way to fix this too?

Thanks,
G

[David]

Soooo …. lets try this CSS to reduce the Line-height of the mobile toggle ( without effecting the menu items ):

.menu-toggle {
    line-height: 60px !important;
}

And then in the Customizer > Layout > Header – in Mobile View reduce the Header Padding to say 10px.

Between the two they should clear the menu toggle from the hero text.

[Gabriele]

Fantastic, that cleared some space.
Thank you sop much for the tips David: Absolutely great support as always!

G

[David]

Happy to be of help 🙂

[Author]

Posts