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

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 comment

19 answers to this question

Recommended Posts

  • 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: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Portfolio hover Replace Link Style
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 comment
  • 0
5 hours ago, SouthernSunEvents said:

Hey @bangank36,

I just used this code and it works great but I now seem to have an index bar logo plus a logo under. Any ideas?

http://www.southernsunevents.com

PW: sse2020

1057680507_ScreenShot2021-02-25at1_31_24PM.png.2040130a92473fb389f8f35e4f3ab70e.png

Try

@media screen and (max-width: 996px) {
  [data-nc-base="header"] [data-nc-group="bottom"] {
    display: none !important;
}  
}

 

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: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Portfolio hover Replace Link Style
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 comment
  • 0
17 minutes ago, SouthernSunEvents said:

Hey @bangank36,

Thanks for sending this. The code completely removed my nav bar from all views. Still playing around with it over here but no luck

try

@media screen and (max-width: 996px) {
  [data-nc-base="header"] [data-nc-group="bottom"] {
    display: none !important;
  }  
  [data-nc-base="mobile-bar"] {
    display: flex;
  }
}

 

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: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Portfolio hover Replace Link Style
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 comment
  • 0

@SouthernSunEvents Do you still need help?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0

@SouthernSunEvents

Add the following to Design > Custom CSS.

/* begin adjust breakpoint for mobile menu */

  @media screen and ( min-width : 640px ) {
  
    .ancillary-header-branding-position-bottom-left .Header--bottom,
    .ancillary-header-primary-nav-position-bottom-right.has-primary-nav .Header--bottom
    
      {
      
        display : none;
        
        }
        
    [data-nc-base="mobile-bar"] {
    
      display : unset;
      
      }
    }
    
  @media screen and ( min-width : 1024px ) {
  
    .ancillary-header-branding-position-bottom-left .Header--bottom,
    .ancillary-header-primary-nav-position-bottom-right.has-primary-nav .Header--bottom
    
      {
      
        display : block;
        
        }
        
    [data-nc-base="mobile-bar"] {
    
      display : none;
      
      }
    }
    
  /* end adjust breakpoint for mobile menu */

This is for v7.0 using the Brine template family.

Let us know how it goes.

Edited by creedon
version 2

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 0
13 hours ago, creedon said:

@SouthernSunEvents

Add the following to Design > Custom CSS.


/* begin adjust breakpoint for mobile menu */

  @media screen and ( min-width : 640px ) {
  
    [data-nc-base="mobile-bar"] {
    
      display : unset;
      
      }
    }
    
  @media screen and ( min-width : 1024px ) {
  
    [data-nc-base="mobile-bar"] {
    
      display : none;
      
      }
    }
    
  /* end adjust breakpoint for mobile menu */

This is for v7.0 using the Brine template family.

Let us know how it goes.

Still hamburgers desktop view and now I have a sort of double logo overlap in tablet. Thanks for your help on this one. 

1871787810_ScreenShot2021-03-19at12_23_31PM.png.6241381406c4b7581159a96f00ed02e7.png

Link to comment
  • 0
19 hours ago, creedon said:

I'm not seeing the burger on Desktop.

161434217_ScreenShot2021-03-19at2_09_28PM.thumb.png.05ceaa495bf089b5166b1e069633577b.png

I have updated my change breakpoint code post.

Let us know how it goes.

Thanks! For some reason when I view desktop in preview mode it still hamburgers but when I expand the view it goes away so seems like it's fine. Everything looks great and the double logo is gone. I so so so appreciate your help! I'm tagging you on one more item I've been battling for months just in case time allows!

 

Link to comment
  • 0
2 hours ago, SouthernSunEvents said:

For some reason when I view desktop in preview mode it still hamburgers but when I expand the view it goes away so seems like it's fine.

Yeah that happens a lot with custom code. It is the nature of the beast. The view the user will see from the outside world should always be the final word on weather an effect is working or not.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 0

Hi there! I've been going through everything I can find on the forum about forcing the hamburger menu on tablet, but haven't been able to find a solve for what I'm trying to do. I would like to force the hamburger menu onto my current header design once it hits the breaking point of 1090px, but I don't want the header to switch over to the mobile header. Hope that makes sense. Does anyone know if that is possible? Thanks! 

https://www.scoopstationnj.com/home

 

 

Link to comment
  • 0
On 9/10/2021 at 6:49 PM, Verosie said:

Hi there! I've been going through everything I can find on the forum about forcing the hamburger menu on tablet, but haven't been able to find a solve for what I'm trying to do. I would like to force the hamburger menu onto my current header design once it hits the breaking point of 1090px, but I don't want the header to switch over to the mobile header. Hope that makes sense. Does anyone know if that is possible? Thanks! 

https://www.scoopstationnj.com/home

 

 

From 0px to 1090px, you want header layout will be: Burger (Left) - Logo (Center). Is this right?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment

Create an account or sign in to comment

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

×
×
  • Create New...