Jump to content

Logo in Header is Slightly Off-Center to the Left on Desktop

Recommended Posts

Posted (edited)

Not sure why, logo is off center to the left. Here is my site wide CSS. I did recently add the mobile burger menu functionality to the desktop, but not sure when this started since it's only subtly to the left and only noticeable when something that is correctly centered is below the logo. It doesn't matter if the burger menu is hidden or not as it happens on all pages.

Password is known . Here's my CSS for the site:

//BREAK POINTS
@mobile: ~"only screen and (max-width: 949px)";
@desktop: ~"only screen and (min-width: 950px)";

.header .header-burger{display:flex}.header-nav, .header-actions {display:none}

@media only screen and (min-width: 640px){.header--menu-open .header-menu { opacity: 1; visibility: visible; width: 30%; height: 60%; margin-left: 70%; box-shadow: -5px 5px 15px #000}}

//FONT UPLOAD
@font-face { font-family: PICK-NAME; 
  src: url(FONT FILE URL)
}

.header-nav-folder-item:hover {
  a{color: #4a4fd9 !important;}
  }

body.header--menu-open .btt {
    display: none !important;
}

@media (max-width: 768px){.header-menu-cta .theme-btn--primary.btn.sqs-button-element--primary{
  padding: .1em 1em !important;
  font-size: 26px !important;
  border-radius: 100px !important;
  margin-top: .01px !important;
  margin-bottom: .01px !important; /* Reduces the space between items */
  margin-left: auto !important;
  margin-right: auto !important;
  width: 250px !important;
  align-items: center;
  justify-content: center; /* Center horizontally */
  flex-wrap: wrap; /* Allow items to wrap if needed */
  text-align: center;
}

div.container.header-menu-nav-item>a {
  color: #fff !important;
  background-color: #686beb !important;
  padding: .1em 1em !important;
  font-size: 26px !important;
  border-radius: 100px !important;
  margin-bottom: .01px !important; /* Reduces the space between items */
  margin-left: auto !important;
  margin-right: auto !important;
  width: 200px;
  align-items: center;
  display: flex;
  justify-content: center; /* Center horizontally */
  flex-wrap: wrap; /* Allow items to wrap if needed */
  text-align: center;
}
}

@media (min-width: 768px){.header-menu-cta .theme-btn--primary.btn.sqs-button-element--primary{
  padding: .1em 1em !important;
  font-size: 26px !important;
  border-radius: 100px !important;
  margin: 1px 1 !important; /* Adjust vertical margins */
  margin-left: auto !important;
  margin-right: auto !important;
  width: 250px !important;
  align-items: center;
  flex-wrap: wrap; /* Allow items to wrap if needed */
  gap: 1em; /* Adjust the gap between flex items if needed */
  text-align: center !important;
}

div.container.header-menu-nav-item>a {
  color: #fff !important;
  background-color: #686beb !important;
  padding: .1em 1em !important;
  font-size: 26px !important;
  border-radius: 100px !important;
  margin: 10px 0 !important; /*   Adjust vertical margins */
  margin-left: auto !important;
  margin-right: auto !important;
  width: 200px;
  align-items: center;
  display: flex;
  justify-content: center; /* Center horizontally */
  flex-wrap: wrap; /* Allow items to wrap if needed */
  text-align: center !important;
}
}

 

/* Ensure button is visible on mobile by default */
.expand-widget {
    display: inline-block; /* Adjust as necessary */
    background: none;
    border: none;
    cursor: pointer;
}

header#header {
    background: #FFFFFF !important; /* Sets the background to white */
}


/* Hide button on screens wider than 768px */
@media (min-width: 768px) {
    .expand-widget {
        display: none;
    }
}
}

Edited by LocalPlantSupply
Removing unnecessary CSS
  • Replies 3
  • Views 1.5k
  • Created
  • Last Reply

Top Posters In This Topic

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.