Menu navbar collapsing into 2 rows


#1

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.


#2

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


#3

Hi Awan,

thank you for your prompt response! It worked!

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