Jump to content

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

Recommended Posts

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: 

628670793_ScreenShot2022-07-21at7_38_41PM.png.630ee852b5f63c967a31a344fe80b095.png

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

image.thumb.png.796b915102b780b8bd3cdc18b3453237.png

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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

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

image.thumb.png.2f7bca3bda62f5bbb4faadbea2296528.png

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (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.