Jump to content

Is it possible to have my desktop navigation menu to revert to burger instead of them stacking?

Recommended Posts

Site URL: https://ladybug-chicken-2tp4.squarespace.com/

Hello,

I'd like my navigation items to revert to a burger instead of 'stacking' on top of one another when the window is made smaller. They convert to a burger when it gets to mobile width, which is great. But id like it to turn to a burger as soon as they start stacking because it is ugly.

Thanks in advance,

Jack.

Site pass:

*3iRgpCKJ-8@bBZ7

Link to comment
  • Replies 5
  • Views 450
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Add to Design > Custom CSS

/* Force burger from 1200px */
@media screen and (min-width:768px) and (max-width:1200px) {
 /* 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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Hi @Tuanphan,

 

Thanks so much for your help and time, it is much appreciated.

When I use this code, it works partially. When it breaks to burger, the burger moves to the far left instead of right and the cart word and value disappears. 😞

if you view the website in mobile view (attached), this is how I would like the burger to be when it replaces the menu if possible. 

Thanks so much again,
Jack

Screenshot 2022-03-14 at 20.07.37.png

Link to comment
13 hours ago, tuanphan said:

It looks like you solved this?

Hi Tuanphan,

 

Unfortunately not, we have the widescreen state which is the standard desktop which is fine, and shown on the post above is the mobile state, which is also fine

However, in between these widths, so when desktop view is in too small of a width to fit the navigation items in, it reverts to the burger (which is correct) but the burger is on the left of the screen.

If you squidge the window down slowly you will see what i mean, ive shown in pictures here.

Thanks so much for your help and expertise!Untitled-4.thumb.png.c842be293511292dda286e22ecb1aba5.png

Screenshot 2022-03-14 at 20.07.37.png

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

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.