Single page scroller website: How to completely remove/disable the mobile menu?

Asked on October 31, 2016 in Customization.

I’ve been trying to make this work for two days now, and have read through the forums and other sites trying to figure out a way in CSS or jQuery to hide the mobile menu.

Since I’m making a single page website, there is no need for a mobile hamburger menu, especially since it messes up the header by making it off-center.  Right now I have nothing in the menu, but you can still tap on the hamburger and it will slide over and reveal a blank menu.

I know I can set the display to none:

nav.nav-horizontal {
display: none;
}
}

But this doesn’t accomplish what I want since while the hamburger menu doesn’t display anymore, the space it would have occupied is still there, which makes the logo off center when it should be centered.  (I’ve selected “logo centered” for my header)

I saw one post that said something this menu is required?  Even if it’s empty and serves no purpose?

Is that really true?  Or is there a simple setting I’m missing, or some other way I can get the desired effect of a header with just a centered logo, no menu (or anchor menu only)?

Thanks for any help.

vlotty Layers User
Reply
  • Possible Answers to Your Question:

  • 1 Answer(s)
    Answered on November 14, 2016.

    In case anyone else is trying to do the same thing, David from the Layers team responded with CSS that did the trick:

    
    .header-site nav {
    
    display: none;
    
    }
    .header-site .logo {
    
    margin: auto;
    
    text-align: center;
    
    }
    
    

    Alternatively, this also worked, which I figured out after researching more:

    
    .header-site nav {
    
    display: none;
    
    }
    
    .header-site .logo {
    
    width :100%;
    
    max-width: 100%;
    
    text-align: center;
    
    }
    
    
    Reply