Jump to content

How do I change the padding/spacing of my hamburger menu

Recommended Posts

Site URL: https://derricksaenz.com

Hello!

I am working on getting my website to look nice and clean, and one of the things on my mind is getting the header to be concise. So, I wanted to use a hamburger menu to collapse all my navigation and put it on the side of my website. 

However, the problem is that when I open it, there is some padding issue with the flex box or something, and it pushes all my links to the side. I would want everything left or center justified to the square I have set.

Pasting my code below for reference. All found free while scouring the internet.

/* 768 for tablet - desktop - 992 for desktop */
@media screen and (min-width:768px) {
 /* hide navigation */
    .header-nav {
    display: none !important;
}
/* Hide header button */
.header-actions {
    display: none !important;
}
/* show burger */
.header-burger {
  display: flex !important;
}
/* Show overlay mobile menu */
.header--menu-open .header-menu {
  opacity: 1 !important;
  visibility: visible !important;
  }
}

@media screen and (min-width:992px) {
  .container.header-menu-nav-item, .header-menu-nav-item a, .header-menu-actions.language-picker-content, .header-menu-actions.language-picker {
    font-size: 28px !important;
    margin-top: 0px !important;
    margin-bottom: 5px !important;
    min-width: unset !important;
  }
  .header--menu-open .header-menu {
    opacity: 1 !important; 
    visibility: visible !important;
    margin-left: 66% !important;
    margin-right: 10% !important;
    margin-top: 1.75% !important;
    height: 33% !important;
    box-shadow: 0px 30px 100px rgba(12,112,232,.5) !important;
    transition: opacity .5s cubic-bezier(0.32, 0.08, 0.24, 1);
    -webkit-transition: opacity .5s cubic-bezier(0.32, 0.08, 0.24, 1);
  }
  .header-display-mobile .header-title-text {
    width: 20vw !important; 
    font-size: 1.5rem !important; 
  }
  .header-menu-nav-folder-content {
    justify-content: flex-start !important; /* vertical alignment of navigation */
    text-align: center !important; /* navigation text alignment */
  }
  .header-menu-nav-folder:not(.header-menu-nav-folder--active) {
    display: none !important; /* hides non-active folder */
  }
  .header-menu-cta {
    width: 33vw !important; /* width of button */
  }
  .header-menu-cta a {
    min-width: unset !important;
  }
}

The away that my code is set up, it doesn't allow for folders or the language switch option, which sucks since I'd appreciate those features. They just get pushed off the blue background. If that issue can be addressed too, that would be AWESOME, but I'm mainly holding out for the spacing since that more pertinent.

I am somewhat trying to emulate clay.global's header, given that I have a clean aesthetic and a similarly simple logo going. I think that looks awesome and super intuitive despite it being hidden in a hamburger.

I would appreciate any help or insight. Feel free to criticize the code too if you want 😅. Thank you!

Screen Shot 2022-09-21 at 3.44.32 PM.png

Edited by DerrickSaenz
Adding a comment about folder compatibility.
Link to comment
  • Replies 6
  • Views 1.1k
  • Created
  • Last Reply

Top Posters In This Topic

On 9/24/2022 at 10:24 PM, DerrickSaenz said:

I’ve removed it since it is a live site and I wanted to use something that works. But I found that the hamburger menu wouldn’t scale and behave how I wanted. I would love to still have it, if you can help!

If the site is live, you can duplicate the site & add burger, then share link to duplicated site, we can check easier

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

I've been working on the code again and I think I've got it to a good place where I like how it looks, but there are still a few issues.

Biggest issue is when I try to click the top link in the hamburger nav, it won't register. In this case, it's the home link. It doesn't register the hover or let me click that link. I think because it is "trapped behind" the header, but I have no idea how to fix that beside moving everything down, which is really aesthetically unpleasing. 

The second issue is the white bar that shows up to the right of everything. No idea how to get rid of it, and I can't right click it to inspect element. It looks like it's just blank space. It disappears when it needs to be scrolled through.

Thank you again for looking at this.

Current code pasted below.

/* 768 for tablet - desktop - 992 for desktop */
@media screen and (min-width:768px) {
 /* hide navigation */
    .header-nav {
    display: none !important;
}
/* Hide header button */
.header-actions {
    display: none !important;
}
/* show burger */
.header-burger {
  display: flex !important;
}
/* Show overlay mobile menu */
.header--menu-open .header-menu {
  opacity: 1 !important;
  visibility: visible !important;
  }
}

@media screen and (min-width:992px) {
  /*header padding for my site, not part of the hamburger
  .header-announcement-bar-wrapper{
    padding-left: 16vw-6px !important;
    padding-right: 16vw-4px !important;
  }*/
  .header-menu-nav{
    overflow-y:hidden;
    margin-top:-204px !important;
    padding-top: 62px !important;
  }
  .container.header-menu-nav-item, .header-menu-nav-item a, .header-menu-actions.language-picker-content, .header-menu-actions.language-picker {
    font-size: 36px !important;
    margin-bottom: 0px !important;
    margin-top: 15px !important;
    min-width: unset !important;
    padding-left:0px;
  }
  .header--menu-open .header-menu {
    opacity: 1 !important; 
    visibility: visible !important;
    margin-left: 66vw !important;
    margin-right: 16vw-6px !important;
    margin-top: 40px !important;
    height: 400px !important;
    box-shadow: 0px 30px 100px rgba(12,112,232,.25) !important;
    transition: opacity .5s ease-in-out;
    -webkit-transition: opacity .5s ease-in-out;
  }
  .header-menu-actions{
    margin: 0px;
  }
  .header-display-mobile .header-title-text {
    width: 20vw !important; 
    font-size: 1.5rem !important; 
    padding-bottom:10px;
  }
  .header-menu-nav-folder-content {
    justify-content: flex-start !important; /* vertical alignment of navigation */
    flex-grow:0;
    text-align: left !important; /* navigation text alignment */
  }
  .header-menu-nav-folder:not(.header-menu-nav-folder--active) {
    display: none !important; /* hides non-active folder */
  }
  .header-menu-actions-action {
    margin: 50px 10px;
  }
  .header-menu-cta {
    min-width: unset !important;
    height: 61px !important;
  }
  .header-menu-cta a {
    display: inline-block;
    text-align: center;
    box-sizing: border-box;
    margin: 0px;
    min-width: 210px;
  }
}

Screen Shot 2022-09-26 at 9.44.54 AM.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.