How do I force a hamburger menu for tablet view?

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!

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: none !important;
  }
}

Add this to Settings->Design->Custom Css

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

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

Try

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

2 hours ago, bangank36 said:

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

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

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;
  }
}

3 minutes ago, bangank36 said:

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

@bangank36Works great but I want to keep my normal nav bar on the desktop version.

@SouthernSunEvents Do you still need help?

4 hours ago, tuanphan said:

@SouthernSunEvents Do you still need help?

Hi @tuanphan, this one has been solved but I'm looking for some assistance on this thread if you have time available to help. I so appreciate it!!

On 3/1/2021 at 8:43 AM, tuanphan said:

@SouthernSunEvents Do you still need help?

@bangank36

@tuanphan

Just kidding, not solved! I confused a few threads I was keeping an eye on. I'm still getting hamburger navigation on desktop with this code. Thanks!

On 3/15/2021 at 5:36 PM, SouthernSunEvents said:

I'm still getting hamburger navigation on desktop with this code.

So you want the mobile menu to display at all screen widths?

1 hour ago, creedon said:

So you want the mobile menu to display at all screen widths?

Just mobile and tablet. 

@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.

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. 

5 hours ago, SouthernSunEvents said:

Still hamburgers desktop view

I'm not seeing the burger on Desktop.

Quote

now I have a sort of double logo overlap in tablet.

I have updated my change breakpoint code post.

Let us know how it goes.

19 hours ago, creedon said:

I'm not seeing the burger on Desktop.

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!

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.

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

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?

On 9/12/2021 at 8:51 AM, tuanphan said:

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

Hi there, I need help with this, I need to force mobile hamburger navigation to show on tablet as well as mobile, using 7.1

thanks! 

On 3/10/2022 at 8:02 PM, moonlitdesign said:

Hi there, I need help with this, I need to force mobile hamburger navigation to show on tablet as well as mobile, using 7.1

 

thanks! 

Add to Design > Custom CSS

@media screen and (max-width:991px) {
 /* hide navigation */
    .header-nav {
    display: none;
}
/* Hide header button */
.header-actions {
    display: none;
}
/* show burger */
.header-burger {
  display: flex;
}
/* Show overlay mobile menu */
.header--menu-open .header-menu {
opacity: 1;
visibility: visible;
}
}