Jump to content

How to create a full width navigation with borders

Recommended Posts

21 hours ago, alexandraglam said:

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

image.thumb.png.6a7ec286e8901d3e6507935df064be52.png

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?

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

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

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

image.thumb.png.6a7ec286e8901d3e6507935df064be52.png

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

 

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
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!

 

Screenshot 2021-12-29 at 10.55.06.png

Edited by alexandraglam
Link to comment
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!

 

Screenshot 2021-12-29 at 10.55.06.png

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

 

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
  • 2 months later...
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

Screenshot 2022-03-13 at 15.58.13.png

Edited by StudioSoulistic
tag
Link to comment
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

Screenshot 2022-03-13 at 15.58.13.png

add flex-wrap into this code

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

 

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

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

 

 

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

 

Screenshot 2022-03-18 at 15.40.36.png

Screenshot 2022-03-18 at 15.41.59.png

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

 

Screenshot 2022-03-18 at 15.40.36.png

Screenshot 2022-03-18 at 15.41.59.png

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

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
  • 2 weeks later...

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.