[Resolved] Navigation background width

[Suganthan]

How do I fix the navigation background width?

https://cl.ly/2x1f0V3O1J2C

Thanks.

GeneratePress 2.1.3

[Leo]

Hi there,

Try this: https://docs.generatepress.com/article/menu-item-height-width/#sub-menu-item-width

Let me know if this helps 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Suganthan]

Thanks. Nothing works.

.main-navigation ul ul {
	display: block;
	box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
	float: left;
	position: absolute;
	left: -99999px;
	opacity: 0;
	z-index: 99999;
	width:250px;
	text-align:left;
	top: auto;
	transition: opacity 80ms linear;
	transition-delay: 0s;
	pointer-events: none;
	height: 0;
	overflow: hidden;
}

I tried to add width as 250px

Tried this as well. No joy.

width: auto;
white-space: nowrap;

[Leo]

The second block of the CSS in the article above should work:

.main-navigation ul ul {
    width: auto;
    white-space: nowrap;
}

I tested it using browser inspect:
https://www.screencast.com/t/7RROqwydWHY

However I’m not seeing the CSS being added. Please re-add it again and clear your caching plugin.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Suganthan]

Thanks Leo.

I have added the code to style.css

Cleared WP rocket

Purged CDN

Not working 🙁

What is the CSS file you added this code to?

[Leo]

I just used browser inspect.

Are you adding it to the theme’s style.css or child theme’s style.css?

Make sure you are not modifying the theme’s style.css as it will be erased during update.

Try one of these methods here: https://docs.generatepress.com/article/adding-css/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Suganthan]

I dont have a child theme. Just the GP theme. I edited the style.css

https://cl.ly/0O2h2S0k3E1V

[Suganthan]

I put the class into Additional CSS in customize and it worked.

Thanks for your help.

[Leo]

No problem 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts