Jump to content

Extending navigation bar full width of header

Recommended Posts

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 comment
  • Replies 4
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

we can help if you share your site url

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

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.