How to create a full width navigation with borders

Site URL: https://www.marlunacreative.com

I'm pretty new with Squarespace and CSS so this might be super easy for some but def. not me lol. I tried looking at how other sites do it by using the developer tool in Chrome but no luck getting it to look like the image above.
 

Site: www.marlunacreative.com

Password: Bear1234!!

21 hours ago, alexandraglam said:

Site URL: https://www.marlunacreative.com

I'm pretty new with Squarespace and CSS so this might be super easy for some but def. not me lol. I tried looking at how other sites do it by using the developer tool in Chrome but no luck getting it to look like the image above.
 

Site: www.marlunacreative.com

Password: Bear1234!!

Can you describe more detail about your point? Do you mean that you want to set layout the same as image you attached?

On 12/25/2021 at 10:27 AM, bangank36 said:

Can you describe more detail about your point? Do you mean that you want to set layout the same as image you attached?

Yes, I would like to recreate the navigation layout like the image I posted. Sorry about that! 

On 12/24/2021 at 6:57 PM, alexandraglam said:

Site URL: https://www.marlunacreative.com

I'm pretty new with Squarespace and CSS so this might be super easy for some but def. not me lol. I tried looking at how other sites do it by using the developer tool in Chrome but no luck getting it to look like the image above.
 

Site: www.marlunacreative.com

Password: Bear1234!!

Add to Design > Custom CSS

/* 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 black;
    border-bottom: 1px solid black;
}
.header-nav-item a {
    line-height: initial;
}
.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;
}

20 hours ago, tuanphan said:

Add to Design > Custom CSS

/* 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 black;
    border-bottom: 1px solid black;
}
.header-nav-item a {
    line-height: initial;
}
.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;
}

 

Its looking good! But when I added the code, the nav links didn't take up the full width of the page. See attached image.

Thanks!

1 hour ago, alexandraglam said:

Its looking good! But when I added the code, the nav links didn't take up the full width of the page. See attached image.

Thanks!

 

Don't remove above code. Add this code under

html, body {
    overflow-x: hidden;
}
nav.header-nav-list {
    justify-content: space-between !important;
}
.header-nav-item {
    padding-left: 6vw;
    padding-right: 6vw;
}

1 hour ago, tuanphan said:

Don't remove above code. Add this code under

html, body {
    overflow-x: hidden;
}
nav.header-nav-list {
    justify-content: space-between !important;
}
.header-nav-item {
    padding-left: 6vw;
    padding-right: 6vw;
}

 

Worked perfectly 😄 Thanks @tuanphan

On 12/29/2021 at 12:18 PM, tuanphan said:

Don't remove above code. Add this code under

html, body {
    overflow-x: hidden;
}
nav.header-nav-list {
    justify-content: space-between !important;
}
.header-nav-item {
    padding-left: 6vw;
    padding-right: 6vw;
}

 

Hi @tuanphan,

Thank you for the code, it works on my website too! I noticed that when I make my window smaller, it doesn't show in 100% width anymore but it "stacks". Do you perhaps know how to fix this? Thank you so much in advance

https://clover-saxophone-kacs.squarespace.com/

Password: test

11 hours ago, StudioSoulistic said:

Hi @tuanphan,

Thank you for the code, it works on my website too! I noticed that when I make my window smaller, it doesn't show in 100% width anymore but it "stacks". Do you perhaps know how to fix this? Thank you so much in advance

 

https://clover-saxophone-kacs.squarespace.com/

Password: test

add flex-wrap into this code

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

@tuanphan would it be possible to add a hover effect to this navigation? For instance, you'd hover over the box and it would change to a different color. 

On 12/28/2021 at 8:11 AM, tuanphan said:

Add to Design > Custom CSS

/* 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 black;
    border-bottom: 1px solid black;
}
.header-nav-item a {
    line-height: initial;
}
.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;
}

 

On 3/14/2022 at 3:14 AM, tuanphan said:

add flex-wrap into this code

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

 

Hi @tuanphan, thank you for your response. It seems the navigation gets "cut off" now when resizing the window and shows only half of the mobile navigation at some point. Would you be able to check this for me? I'd really appreciate that!

URL: studiosoulistic.nl

password: soulistic22

On 3/18/2022 at 9:44 PM, StudioSoulistic said:

Hi @tuanphan, thank you for your response. It seems the navigation gets "cut off" now when resizing the window and shows only half of the mobile navigation at some point. Would you be able to check this for me? I'd really appreciate that!

 

URL: studiosoulistic.nl

password: soulistic22

 

What should it looks like on smaller screen? Change to 2 rows or reduce text size/box spacing?

2 hours ago, tuanphan said:

What should it looks like on smaller screen? Change to 2 rows or reduce text size/box spacing?

1 row with reduced text size/box spacing 🙂

On 3/21/2022 at 10:16 AM, tuanphan said:

What should it looks like on smaller screen? Change to 2 rows or reduce text size/box spacing?

Hi @tuanphan

Have you had the chance to look at this for 1 row with reduced text size/box spacing?