Adjusting The Padding on Site Header

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

Hi there,

I have watched a few vids about adding CSS to my site in order to have small tweeks. I am currently trying to reduce the padding around the "Home" button and the "Let's Work Together Button" so that the center navigation bar does not switch to two lines in the smaller window size (photos included). It seems like there is a lot of wasted space this way and I think it looks better all on one line rather than converting to the two line version in the smaller window. I was wondering if there is a way to adjust the code so that the navigation bar on the desktop website allows more "space" for the middle navigation area to stay on one line. Don't know if I need to adjust the padding somehow or change the layout or something.

Thank you for the help!

-Rparsons

10 hours ago, Rparsons said:

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

Hi there,

I have watched a few vids about adding CSS to my site in order to have small tweeks. I am currently trying to reduce the padding around the "Home" button and the "Let's Work Together Button" so that the center navigation bar does not switch to two lines in the smaller window size (photos included). It seems like there is a lot of wasted space this way and I think it looks better all on one line rather than converting to the two line version in the smaller window. I was wondering if there is a way to adjust the code so that the navigation bar on the desktop website allows more "space" for the middle navigation area to stay on one line. Don't know if I need to adjust the padding somehow or change the layout or something.

Thank you for the help!

-Rparsons

Try

.header-layout-nav-center .header-title {
  width: 20%;
  flex: 1 1 20%;
}

Let me know how it works on your site

Support me by pressing 👍 if this useful for you

Thank you! That was a great fix! I used your code but changed the percentage to 0%. That did exactly what I wanted.

Cheers!

.header-layout-nav-center .header-title {
  width: 0%;
  flex: 1 1 0%;
}