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

Remove padding from navigation


matthewhodges

Question

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

9 answers to this question

Recommended Posts

  • 0
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

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, Delivery Date Picker, Youtube Gallery for Squarespace
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
  • 0
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

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, Delivery Date Picker, Youtube Gallery for Squarespace
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
  • 0

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
  • 0
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

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, Delivery Date Picker, Youtube Gallery for Squarespace
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
  • 0
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;
}

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, Delivery Date Picker, Youtube Gallery for Squarespace
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
  • 0
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

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

Create an account or sign in to comment

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

×
×
  • Create New...