Changing header layout so links are on either side of logo?

Site URL: https://caribou-orchid-afd2.squarespace.com/

Hi,

I am hoping to make my client's website's header look like the layout below: 

How can I code it to reflect that?

**Also, is there a way to make the social links closer together, but not the navigation links? 

Thank you!

13 hours ago, dv_louise_designs said:

Site URL: https://caribou-orchid-afd2.squarespace.com/

Hi,

I am hoping to make my client's website's header look like the layout below: 

How can I code it to reflect that?

 

**Also, is there a way to make the social links closer together, but not the navigation links? 

 

Thank you!

1. Kindly try using this header layout

2. Adding to Home > Design > Custom Css

.header-nav {
  position: absolute;
  top: 5px;
  bottom: 0;
  margin-top: 0!important;
  margin-left: -50px!important;
}
.header-nav-item:nth-of-type(2) {
  margin-right: 340px!important;
}

.header-title-logo a {
  z-index: 1000;
  position: relative;
}

Let me know how it works on your site

On 7/22/2022 at 9:41 AM, bangank36 said:

2. Adding to Home > Design > Custom Css

.header-nav {
  position: absolute;
  top: 5px;
  bottom: 0;
  margin-top: 0!important;
  margin-left: -50px!important;
}
.header-nav-item:nth-of-type(2) {
  margin-right: 340px!important;
}

.header-title-logo a {
  z-index: 1000;
  position: relative;
}

Let me know how it works on your site

Hey @bangank36! It worked well, except when I shrink my window to a certain size and below it condenses too much with unwanted overlap. I also adjusted your code slightly, let me know what you think!

Updated code:

.header-nav {
  position: absolute;
  top: 10px;
  bottom: 0;
  margin-top: 0px!important;
  margin-left: 60px!important;
}

.header-nav-item:nth-of-type(2) {
  margin-right: 350px!important;
}

I still see problem on some screen sizes.

You can consider forcing mobile menu on small screen sizes. If you want this, we can check give the code

@tuanphan That would be so helpful, thank you! The breakpoint seems to be at a higher pixel size than standard mobile, so I wasn't quite sure how to do that or what those breakpoints were. Thank you!

19 hours ago, dv_louise_designs said:

@tuanphan That would be so helpful, thank you! The breakpoint seems to be at a higher pixel size than standard mobile, so I wasn't quite sure how to do that or what those breakpoints were. Thank you!

 

Add this CSS. You can adjust 1150 number

@media screen and (min-width:992px) and (max-width:1150px) {
 /* hide navigation */
    .header-nav {
    display: none;
}
/* Hide header button */
.header-actions {
    display: none;
}
/* show burger */
.header-burger {
  display: flex;
}
/* Show overlay mobile menu */
.header--menu-open .header-menu {
opacity: 1;
visibility: visible;
}
 .header-title-nav-wrapper {
    justify-content: flex-start !important;
    align-items: flex-start !important;
    margin-left: 0 !important;
    flex: 0 0 calc(~"100% - 50px") !Important;
    text-align: left !important;
}
.header-title {
    text-align: left !important;
}
}