edit CSS to reduce side padding of Nav Bar – Themeco Community

edit CSS to reduce side padding of Nav Bar

Erin M — Fri, 21 Nov 2014 17:24:14 +0000

I would like to reduce the side padding of my Nav Bar, so I can fit one more item.

Reply To: edit CSS to reduce side padding of Nav Bar

Zeshan — Sat, 22 Nov 2014 13:19:59 +0000

Hi Erin,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL as stated on the forum entrance page. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you.

Meanwhile, please try adding following code under Custom > CSS in the Customizer:

.x-navbar .x-container-fluid.max {
   max-width: 1500px;
}

Adjust 1500px to increase/decrease the width of the navbar container.

Hope this helps. 🙂

Thank you.

Reply To: edit CSS to reduce side padding of Nav Bar

Erin M — Sat, 22 Nov 2014 23:14:10 +0000

Thank you for your help, I am developing the site locally until it is further along so I don’t have url to show you yet. I tried the CSS code above, it doesn’t address the issue I want to target. What I am trying to do is the container for the Nav Bar is padded maybe 45 on the left and the right so the Nav Bar entries line up with the content below. I am hoping to decrease the left and right inset so I can fit one more Nav Bar item.

Again thank you for your help.

Reply To: edit CSS to reduce side padding of Nav Bar

Christopher — Sun, 23 Nov 2014 16:06:27 +0000

Hi there,

Try this CSS code:

.x-navbar .x-container-fluid.max.width {
width: 96%;
max-width: 1500px;
}

Hope it helps.

Reply To: edit CSS to reduce side padding of Nav Bar

Erin M — Sun, 23 Nov 2014 16:35:05 +0000

Thank you very much! That did exactly what I needed!

Reply To: edit CSS to reduce side padding of Nav Bar

Paul R — Mon, 24 Nov 2014 07:29:30 +0000

You’re welcome Erin. 🙂