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

Home Forums Support Using the "Navigation as a Header" makes mobile navigation inefficient

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #1111784
    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

    #1112049
    David
    Staff
    Customer Support

    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.

    #1129403
    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!

    #1129585
    David
    Staff
    Customer Support

    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

    #1131130
    Gabriele

    Hey David, thanks!
    That’s disabled now.

    G

    #1131392
    David
    Staff
    Customer Support

    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.

    #1131398
    Gabriele

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

    Thanks,
    G

    #1131620
    David
    Staff
    Customer Support

    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.

    #1132397
    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

    #1132662
    David
    Staff
    Customer Support

    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.

    #1133653
    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

    #1133884
    David
    Staff
    Customer Support

    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.

    #1134647
    Gabriele

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

    G

    #1134841
    David
    Staff
    Customer Support

    Happy to be of help 🙂

Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.