Menu navbar collapsing into 2 rows

Hi there,

my navbar menu links are collapsing into 2 rows even in full-width. I tried to use this css one of the moderators posted, but it seems not to be working.

Even when I edit the values, the spaces between the links doesn’t change…

.main-navigation li {
padding-left: 5px;
padding-right: 5px;
}

We will have to add another link in the future, so ideally we needed more space for the site-navigation

I tried to adjust the id site-navigation width but it didn’t work (I guess because of the col-8 class)…

Could someone help?

My webpage url is http://conplantferti.com.br/consultoria/ (please, do not try to access the root conplantferti.com.br because it will redirect you to our main website. conplantferti is our dev domain.

Hi,

Firstly, you need to expand the menu bar area. you can use this CSS code below:

@media (min-width: 992px){
	.site-branding.col-md-4{
		width: 15%;
	}
	.main-navigation.col-md-8{
		width: 85%;
	}
}

And this is to decrease the space between the menu items:

.main-navigation li {
    padding-left: 10px;
    padding-right: 10px;
}

You can put the CSS code in above into Customize > additional CSS

Regards,
Awan

Hi Awan,

thank you for your prompt response! It worked!

I was using Custom CSS and a plugin was overwritting the styling

1 Like