Jump to content

Trying to Make a Vertical Header on Desktop with Hamburger Menu

Recommended Posts

Good day, I'm trying to create a vertical navigation with a working hamburger menu for desktop but I'm having a hard time making the links visible when I expand the hamburger menu. I would also love the elements to appear horizontal when expanding the burger menu. Can someone please help me? Thanks In Advance!

Website Password:  12345

Here's my current code:

 

.header-nav, .header-actions {

  display: none;

}

.header-burger {

  display: flex;

}

.header--menu-open .header-menu {

visibility: visible;

  opacity: 1;

}

@media only screen and (min-width: 991px) {   
  .page-section:first-of-type {     
    padding-top: 0px !important;   
  }   
  .page-section {     
    margin-left: 100px;   
  }   
  #header {     
    width: 100px;     
    position: fixed;     
    height: 100vh;     
    z-index: 99999 !important;     
    display: table;     
    writing-mode: vertical-rl;    
    text-orientation: mixed;     
  }   
  .header .header-announcement-bar-wrapper {     
    padding: 10px 30px 10px 10px;   
  }   
  .header-inner {    
    height: 100vh;     
    display: table-cell;     
    vertical-align: middle;   
  } 

  /* Adjust the navigation text alignment */
  .header-nav-list {
    display: table;
    margin: 0 auto;
  }
  .header-nav-item {
    display: table-row;
    text-align: center;
  }
  .header-nav-item a {
    display: table-cell;
    padding: 10px 0; /* Adjust padding as needed */
  }
}

Screenshot 2024-02-24 at 11.02.10 AM.png

Screenshot 2024-02-24 at 11.02.44 AM.png

Link to comment
  • Replies 3
  • Views 1.2k
  • Created
  • Last Reply

Top Posters In This Topic

Don't remove any code in your current code. Use this CSS code

@media screen and (min-width:992px) {
div.header-menu {
    padding-top: 0px !important;
}

.header-menu-nav-wrapper {
    transform: rotate(-90deg);
}

.header-menu-nav-item a {
    margin: 0 !important;
}

.container.header-menu-nav-item.header-menu-nav-item--collection {
    padding: 0px !important;
}
}

 

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

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.