Jump to content

Burger Navigation Menu: logo not centered &

Recommended Posts

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

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

 1975522606_ScreenShot2020-11-01at7_59_09PM.thumb.png.fcd8132231b140ab6757b9038682bcf0.png@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;
  }
}

Link to comment

Let's consider adding this  line of code

image.png.25983c763a0cd45061450e6d76365966.pngimage.thumb.png.23f08807db8c482ebce6ceebc62e75a5.png

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

 

Edited by bangank36

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 8 months later...

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

 

 

Screen Shot 2021-07-05 at 13.52.17.png

Link to comment
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%;
  }

 

 

Screen Shot 2021-07-05 at 13.52.17.png

try

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

image.thumb.png.8829dcbd73c8bcc9cc1e9dd5b796acbd.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. 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.