Burger Navigation Menu: logo not centered &

Site URL: https://www.thecreativelab.nz/

Hi there, I applied the following code to my website but the logo is not in the centre:

 @media screen and (max-width: 3000px) {
  /* Display burger icon at all widths and align right */  
  .header .header-burger {
    display: flex;
    order: 2 !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;
  }
}

Let's consider adding this  line of code

@media screen and (max-width: 3000px) {
    /* Display burger icon at all widths and align right */  
    .header .header-burger {
      display: flex;
      order: 2 !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;
    }
    .header-title-nav-wrapper {
      flex: 1 0 100%;
  }
}

Thank you. All solved.

Hi there,

Site URL: https://www.unemodemeilleure.com

Adding this code worked perfectly with centering my logo, but as a result the burger menu (top right) looks like its falling off the page. I really hope you can help!

Thanks 🙂

This is the current code:

/* 768 for tablet - desktop - 992 for desktop */
@media screen and (min-width:768px) {
 /* hide navigation */
    .header-nav {
    display: none;
}
  
/* Hide header button */
.header-actions {
    display: none;
 }
  
/* show burger */
.header-burger {
  display: inline-block  
  }
  .burger-inner .top-bun, .burger-inner .bottom-bun  {
    height: 4px;
     
}
  
/* Show overlay mobile menu */
.header--menu-open .header-menu {
opacity: 1;
visibility: visible;
}
    }
    .header-title-nav-wrapper {
      flex: 1 0 100%;
  }

32 minutes ago, purpose said:

Hi there,

Site URL: https://www.unemodemeilleure.com

Adding this code worked perfectly with centering my logo, but as a result the burger menu (top right) looks like its falling off the page. I really hope you can help!

Thanks 🙂

 

This is the current code:

/* 768 for tablet - desktop - 992 for desktop */
@media screen and (min-width:768px) {
 /* hide navigation */
    .header-nav {
    display: none;
}
  
/* Hide header button */
.header-actions {
    display: none;
 }
  
/* show burger */
.header-burger {
  display: inline-block  
  }
  .burger-inner .top-bun, .burger-inner .bottom-bun  {
    height: 4px;
     
}
  
/* Show overlay mobile menu */
.header--menu-open .header-menu {
opacity: 1;
visibility: visible;
}
    }
    .header-title-nav-wrapper {
      flex: 1 0 100%;
  }

 

 

try

.header-display-desktop .header-burger {
    position: absolute;
    right: -10px;
}

7 minutes ago, bangank36 said:

try

.header-display-desktop .header-burger {
    position: absolute;
    right: -10px;
}

this worked perfectly, thank you! 

Tried this and worked great for desktop but now logo and menu are off to the right on mobile. Any help here? Thank you! 

39 minutes ago, MortoVivo_Lu said:

Tried this and worked great for desktop but now logo and menu are off to the right on mobile. Any help here? Thank you! 

What is site url? We can check problem easier

Does anybody know how to change the background color in the menu (burger menu)

when fully opened?

16 hours ago, Limedrop said:

Does anybody know how to change the background color in the menu (burger menu)

when fully opened?

 

You can use this code to Website > Website Tools > Custom CSS

div.header-menu-bg.theme-bg--primary {
    background-color: #f1f !important;
}