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!