Canvas Support

Responsive width of primary-menu elements

1 reply · opened Jan 26, 2020

TtrinixspbJan 26, 2020

How to set responsive width on #primary-menu <li> elements depending on the size of the menu-titles? And turn off word wrapping in menu-titles. Current it's fix width 220px.

SSemicolon WebSTAFFJan 28, 2020

Hello,

This is Possible but some Custom CSS is required. Use the following CSS Codes:


@media (min-width: 992px) {
	#primary-menu ul ul:not(.mega-menu-column),
	#primary-menu ul li .mega-menu-content {
		width: auto;
		min-width: 220px;
	}

	#primary-menu ul ul:not(.mega-menu-column) ul:not(.menu-pos-invert) {
		left: 100%;
	}

	#primary-menu ul ul:not(.mega-menu-column) ul.menu-pos-invert { right: 100%; }

	#primary-menu ul ul li > a {
		white-space: nowrap;
	}
}

This should definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard