Adding Boxes/Borders to Navigation/Header Elements

Site URL: https://halibut-opossum-3b5b.squarespace.com

Hey guys,

I would love to add border like on this website to my navigation bar:

https://www.ulloadesignco.com

My site is: https://halibut-opossum-3b5b.squarespace.com
PW: Braddon1

Can anyone help please?

Thank you so much!

You mean add lines between nav items?

Hey @tuanphan

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

Thanks so much!

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;
}

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?

@tuanphan Do you have a solution to my previous 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

https://earthworm-fox-pgyk.squarespace.com/
Password: gold888

On 6/11/2022 at 10:18 AM, tuanphan said:

What is your site url? We can check easier

7 hours ago, meltmelt said:

https://earthworm-fox-pgyk.squarespace.com/
Password: gold888

 

Don't remove any code in your current code

Add this to Design > Custom CSS
 

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

4 hours ago, tuanphan 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;
}

 

Thank you ❤️ 

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

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?

yes please

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;
}

Done but still looks very odd with spaces out the side

Also problem with cart icon display on both desktop and mobile

Try adding this new 

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

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

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?

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

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?

hi @tuanphan, i've followed this thread with code until the end, and my code is almost exactly the same (overall width and line thickness adjusted, see below). the only problem is the navigation is not appearing as a dropdown option/hamburger or anywhere in the mobile, how can i resolve that, please? thanks!

/* 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: 2px solid black;
    border-bottom: 2px solid black;
}
.header-nav-item a {
    line-height: initial;
    padding-top: 10px !important;
    padding-bottom: 10px !Important;
}
.header-nav-item {
    border-left: 1px solid black;
    border-right: 1px solid black;
    margin: 0 !important;
    padding-left: 1vw;
    padding-right: 1vw;
    margin-left: -1px !important;
    margin-right: -1px !important;
}

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

Additionally, @tuanphan, how can I make the header fixed at the top? thanks!

On 7/11/2023 at 7:32 PM, naayb said:

Additionally, @tuanphan, how can I make the header fixed at the top? thanks!

What is your site url? We can check problem easier

Hi,

Thank you so much for this helpful code! I am also having an issue with the mobile menu not being visible after I install this CSS. My site isn't live yet. How can I enable you to see it?

Here is the code I used (which caused the mobile menu to disappear):

/* Fullwidth navigation border*/
.header-announcement-bar-wrapper {
    padding-left: 50px !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%;
  background-color: #6f889f;
}
.header-nav-item a {
    line-height: initial;
    padding-top: 10px !important;
    padding-bottom: 10px !Important;
}
.header-nav-item {
     border-left: none;
    border-right: 1px solid white;
  margin: 0 !important;
    padding-left: 2vw;
    padding-right: 1.5vw;
    margin-left: 1px !important;
}
body:not(.header--menu-open) [data-header-style="solid"].header .header-nav-wrapper a {
  color: #ffffff;
}
body:not(.header--menu-open) [data-header-style="solid"].header .header-nav-wrapper a:hover {
  color: #333333;
}
body:not(.header--menu-open) [data-header-style="solid"].header .header-nav-wrapper .header-nav-item--active a {
  color: #333333;
}
nav.header-nav-list {
    justify-content: space-between !important;
}
nav.header-nav-list {
    justify-content: left !important;
    flex-wrap: nowrap;
}