Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

How do I force a hamburger menu for tablet view?


typeandcolour
Go to solution Solved by typeandcolour,

Question

Hi there! Apologies if this question has been asked before, I couldn't seem to find the answer to my question.

I have my primary navigation position at bottom centre, so it sits on top of the banner images on the website. I have the link spacing at about 2.0em as I want them spaced out.

However, the weird little breakpoint between phone and desktop, which I believe to be tablet sizing (?), makes the navigation items stacked, and it looks awful. What I would like to do is to force it to switch to the mobile view/hamburger menu.

I know that there is a lot of CSS out there to force a hamburger menu globally, but I would just like it for mobile, tablet portrait and landscape.

I'm using Brine.

Thank you so much!

Link to post
  • Answers 2
  • Created
  • Last Reply

Top Posters For This Question

Popular Days

Top Posters For This Question

Popular Posts

I made the breakpoint at 992px, hope it help @media screen and (max-width: 992px) { [data-nc-base="mobile-bar"] { display: block !important; } .Header--top { display: n

Hi there! Apologies if this question has been asked before, I couldn't seem to find the answer to my question. I have my primary navigation position at bottom centre, so it sits on top of the ban

Posted Images

2 answers to this question

Recommended Posts

  • 0

Thank you! I ended up tweaking a bit, but it worked!

 

@media screen and (max-width: 1200px) {
    [data-nc-base="mobile-bar"] {
        display: block !important;
    }
.Header-nav--primary {
    display: none !important;
  }
  .Header--top {
    display: none !important;
  }
}

Link to post
  • 0

I made the breakpoint at 992px, hope it help

image.thumb.png.0684f606d69178e9fcf7c3b486946b7e.png

@media screen and (max-width: 992px) {
    [data-nc-base="mobile-bar"] {
        display: block !important;
    }
  .Header--top {
    display: none !important;
  }
}

Add this to Settings->Design->Custom Css

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement, Advanced Product Delivery Date Time PickerGeolocation Automatic Currency Converter, Sortable Table from GSheet
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...