Jump to content

Struggling to center the Logo

Recommended Posts

Hi,

 

I am struggling to center my Logo on my desktop site as well as the mobile site - they're both slightly off. This is the code I am currently using. Any advice on what I can add to center the logo please without affecting any other settings?

 

@media screen and (min-width:992px) {
.header-menu-cta {
    display: none !important;
}
}
.header-burger {position: absolute;}

.header-title-logo { 
    text-align:center;
    margin-left:0%;
}
div.header-menu-nav-item a {
    margin-top: 5px;
    margin-bottom: 5px;

.header-menu-nav-item a {
    font-size: 18px;
}
.header-menu-nav-folder[data-folder="root"] {
    overflow: hidden;
}
.header .header-mobile-layout-logo-center-nav-left .header-display-mobile .header-burger {
    order: 2 !important;
}

.burger-inner.header-menu-icon-doubleLineHamburger .top-bun {
    height: 3px !important;
    transform: translateY(-10px);
}

.burger-inner.header-menu-icon-doubleLineHamburger .patty {
    background-color: #000 !important;
    height: 3px !important;
    transform: unset !important;
}

.burger-inner.header-menu-icon-doubleLineHamburger .bottom-bun {
    transform: translateY(10px);
    height: 3px !important;
}

.header .header-mobile-layout-logo-center-nav-left .header-display-mobile .header-title {
    text-align: unset;
}

.header-burger {
    display: flex;
}

.header-nav {
    display: none !important;
}

.header--menu-open .header-menu {
    opacity: 1;
    visibility: visible;
}
// menu item position
.header-menu-nav-item {
  padding-left:6vw;
}
.header-menu-nav-item a {
    margin-left: 5vw;
}
.header-menu-actions {
  margin-left:6vw;
}
// menu order
.header-menu-cta {
  order:1;
}
.header-menu-nav-folder-content {
  order:2;
}
.header-menu-actions {
  order:3;
}

 

Link to comment
  • Replies 1
  • Views 1.2k
  • Created
  • Last Reply

Top Posters In This Topic

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.