Jump to content

Navigation Menu Problems on 7.0

Recommended Posts

Posted (edited)

Hello everyone,

After searching through the forums for a solution I wasn't able to find any solutions to my problem. What I am looking for would be either to make the nav go into the hamburger as soon as the last item in my nav starts to get cut off or just to have the Hamburger menu visible the entire time. I have been trying to find solutions for either option but no css i have found online is working for me. I do not want the nav to stack either when the window size is reduced and i have also attached a picture of when the nav gets cut off.

Website: https://coloradotinting.com/

as of right now the only code in there is for the nav not to wrap which is:

nav.site-navigation {
    white-space: nowrap;
}

The codes that I have tried are below:

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

@media screen and (max-width: 5000px) {
  /* Display burger icon at all widths */  
  .header .header-burger {
    display: flex;
    order: 0 !important;
  }
  /* Make burger menu visible at all widths */  
  .header--menu-open .header-menu {
    opacity: 1;
    visibility: visible;
  }
  /* Center logo in mobile device */
  .header-title {
    text-align: center !important;
  }
  /* Hide primary navigation menu */ 
  .header .header-title-nav-wrapper .header-nav {
    display: none;
  }
}

 

Thank you for the help.

Nav Cut off — Colorado Tinting.png

Edited by ColoradoTinting
  • Replies 0
  • Views 187
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

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.