Jump to content

Remove padding from navigation

Go to solution Solved by Beyondspace,

Recommended Posts

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

The navigation on my site runs onto two lines, even when it appears there is plenty of space for it to stay on one line.

I guess there is some kind of padding at the sides – how can I remove this?

I would prefer that the navination never went to two lines, and if the screen wifth isn't wide enough it would go straight to the burger menu. Is that possible?

Screenshot 2020-06-18 at 17.27.48.png

Link to comment
  • Solution
20 minutes ago, matthewhodges said:

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

The navigation on my site runs onto two lines, even when it appears there is plenty of space for it to stay on one line.

I guess there is some kind of padding at the sides – how can I remove this?

I would prefer that the navination never went to two lines, and if the screen wifth isn't wide enough it would go straight to the burger menu. Is that possible?

Screenshot 2020-06-18 at 17.27.48.png

Can be, please paste this into Settings->Custom Css

.header-layout-branding-center-nav-center .header-title-nav-wrapper {
  width: 100%;
  display: block;
  flex: 100%;
}

image.thumb.png.e2e2f31ff85d4b9c5e4060f2b0b2fe26.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
  • 4 months later...
On 10/22/2020 at 12:28 AM, xallarap said:

Hi @bangank36 ! I just tried this code on my site and it keeps the nav from breaking, which is great, but it also caused the nav to be way off-center. Do you know why this would be? 

I removed the code for now but the site is https://www.pamelaackerman.com/

Thanks!

Try this

.header-layout-branding-center-nav-center .header-nav {
	width: 1500px;
}

image.png.fd5f90b8a3c13203b24ab21de60cd20d.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

Hi @bangank36 Is there a way to modify this code so it works with a shopping cart icon in the header section? The second code you provided for pamelaakerman.com worked but it pushes the shopping cart off the screen: trueselfcouture.com. I left code on the site for now so you can see. The shopping cart is enabled and shows when I delete the css code. I've tried resizing the margins and page widths.

Any help is much appreciated! Thanks so much!

Avery 

Link to comment
On 10/25/2020 at 4:27 AM, TrueSelfCouture said:

Hi @bangank36 Is there a way to modify this code so it works with a shopping cart icon in the header section? The second code you provided for pamelaakerman.com worked but it pushes the shopping cart off the screen: trueselfcouture.com. I left code on the site for now so you can see. The shopping cart is enabled and shows when I delete the css code. I've tried resizing the margins and page widths.

Any help is much appreciated! Thanks so much!

Avery 

Kindly check this

.header-layout-branding-center-nav-center .header-nav {
    width: 100vw;
    position: absolute;
    bottom: -50px;
}

image.thumb.png.8c638d718a96925acc69f36fe4df5bad.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
On 10/22/2020 at 12:28 AM, xallarap said:

Hi @bangank36 ! I just tried this code on my site and it keeps the nav from breaking, which is great, but it also caused the nav to be way off-center. Do you know why this would be? 

I removed the code for now but the site is https://www.pamelaackerman.com/

Thanks!

You can try this 

.header-layout-branding-center-nav-center .header-nav {
    width: 100vw;
    position: absolute;
    bottom: -50px;
}

.header-layout-branding-center-nav-center .header-nav {
    width: 100vw;
    position: absolute;
    bottom: -50px;
}

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
  • 1 year later...
On 2/23/2022 at 7:50 AM, bsholmes said:

Hi @bangank36! I have a default header on the site but the padding built in is way too much on one of the templates. How can I remove the padding using CSS?

What is your site url? We can check easier

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (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.