Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Extending navigation bar full width of header


PeterWard

Question

I'm trying to extend the navigation bar the full width of the page.  I have a coloured background to the nav bar.   I tried the following code which almost worked.  As you can see from the screenshot, it didnt push all the way left and left a space before the start of the navigation bar.  Any help greatly appreciated 

/* Navigation Width Adjustment */

.header-layout-branding-center-nav-center .header-title-nav-wrapper {

  flex: 2 0 100%;

}

/* Fix width adjustment pushing cart right */

.header-layout-branding-center-nav-center .header-actions--right {

  position: relative;

  right: 4vw;

}

 

image.thumb.png.6a99499718acac827324058c6555efde.png

 

 

Link to post
  • Answers 4
  • Created
  • Last Reply

Top Posters For This Question

Popular Days

Top Posters For This Question

Popular Posts

Thanks again Bangank36.  Perfect.

Posted Images

4 answers to this question

Recommended Posts

  • 0

we can help if you share your site url

Greeting, it's BaNgan from 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, 360 Degree Photo block, Animated Heading Block
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 post
  • 0
.header-layout-branding-center-nav-center .header-title-nav-wrapper {
  flex: 0 100%;
}
.header-layout-branding-center-nav-center .header-title-nav-wrapper .header-nav {
    width: 100vw;
    display: block;
    position: absolute;
    bottom: -2.6vw;
    left: 50%;
    transform: translateX(-50%);
}

image.png.1d7478baad5e0d41c750ae214f875701.png

Greeting, it's BaNgan from 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, 360 Degree Photo block, Animated Heading Block
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 post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...