Jump to content

Adding Boxes/Borders to Navigation/Header Elements

Recommended Posts

On 5/2/2022 at 7:51 PM, RDC said:

Hey @tuanphan

Yes please! And was hoping to create the different colour hover effect if possible?

Thanks so much!

Add to Design > Custom CSS

/* Fullwidth navigation border*/
.header-announcement-bar-wrapper {
    padding-left: 0px !important;
    padding-right: 0px !important;
}
.header-display-desktop {
    flex-direction: column;
}
.header-title-nav-wrapper {
    flex: 0 0 100% !important;
    margin-right: auto;
    width: 100% !important;
}
nav.header-nav-list {
    display: flex;
    width: 100%;
    border-top: 1px solid white;
    border-bottom: 1px solid white;
}
.header-nav-item a {
    line-height: initial;
    padding-top: 10px !important;
    padding-bottom: 10px !Important;
}
.header-nav-item {
    border-left: 1px solid white;
    border-right: 1px solid white;
    margin: 0 !important;
    padding-left: 1vw;
    padding-right: 1vw;
    margin-left: -1px !important;
}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 5 weeks later...
On 5/5/2022 at 11:03 AM, tuanphan said:

Add to Design > Custom CSS

/* Fullwidth navigation border*/
.header-announcement-bar-wrapper {
    padding-left: 0px !important;
    padding-right: 0px !important;
}
.header-display-desktop {
    flex-direction: column;
}
.header-title-nav-wrapper {
    flex: 0 0 100% !important;
    margin-right: auto;
    width: 100% !important;
}
nav.header-nav-list {
    display: flex;
    width: 100%;
    border-top: 1px solid white;
    border-bottom: 1px solid white;
}
.header-nav-item a {
    line-height: initial;
    padding-top: 10px !important;
    padding-bottom: 10px !Important;
}
.header-nav-item {
    border-left: 1px solid white;
    border-right: 1px solid white;
    margin: 0 !important;
    padding-left: 1vw;
    padding-right: 1vw;
    margin-left: -1px !important;
}

 

How do I get the menu items covering the whole row, so there is no empty columns on the side?

Link to comment
On 6/8/2022 at 5:18 PM, meltmelt said:

@tuanphan Do you have a solution to my previous comment? 🙂

What is your site url? We can check easier

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
7 hours ago, meltmelt said:

Don't remove any code in your current code

Add this to Design > Custom CSS
 

nav.header-nav-list {
    justify-content: space-between !important;
}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 1 month later...
On 8/10/2022 at 2:10 PM, annicatter16 said:

Hi is there a way to remove the spacing? I used this code but there is space between the items.

https://grouper-hypersphere-mkrw.squarespace.com/

password:12345

Remove these yellow?

image.thumb.png.401f1540b4c092ff4ba84d822fef9649.png

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
On 8/12/2022 at 2:05 PM, annicatter16 said:

yes please

First, change this code

nav.header-nav-list {
    justify-content: space-between !important;
}

to this

nav.header-nav-list {
    justify-content: center !important;
}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Try adding this new 

nav.header-nav-list {
    justify-content: center !important;
    flex-wrap: nowrap;
}
nav.header-nav-list>div {
    width: 20%;
}

image.thumb.png.5f4db5a72e4bc78fc3fef97fa12408f5.png

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
On 8/18/2022 at 2:40 PM, annicatter16 said:

Thanks I have changed url to: https://calliope-primrose-s254.squarespace.com/

password:12345

it works but there is weird line on the first box and the cart is in the middle. It also looks weird on mobile. Any fixes? Thankyou

The site is private now.

You mean underline on first item?

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
On 8/22/2022 at 4:35 AM, annicatter16 said:

Not private now. Yes the line on first item- but mainly the shopping cart and the problems with the header appears on mobile is the problem

Add to Design > Custom CSS

div.header-nav-item--active a {
    background-image: none !important;
}

Can you describe in detail problem on mobile header?

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.