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

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!

I see you remove burger. Do you still need help?

9 hours ago, tuanphan said:

I see you remove burger. Do you still need help?

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!

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

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

The menu item has 16vw right spacing, so its width very small, so users can't click on it

Add to Design > Custom CSS

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

Thank you, I've added that, and it definitely made the buttons more responsive. I'm still having an issue though with the top link being inaccessible. I'm illustrating it in the video attached, but it looks like the header cuts it off. Thank you for your help!