Header links reflow; When minimized from scrolling links fit

Hello,

Thanks for reporting this!

This happens because the Menu Links use a larger Horizontal Padding when the Header is in its Expanded State, which can cause the Links to overflow & reflow on a second line at certain widths, whereas the Sticky/Minimized Header fits fine. You can fix this by reducing the Horizontal Padding of the Menu Links by adding the following code in your Custom CSS File:

.is-expanded-menu .menu-link {
	--cnvs-primary-menu-padding-x: 8px;
}

You can adjust the 8px value as per your requirement. Alternatively, you can also slightly reduce the font-size of the Menu Links using the --cnvs-primary-menu-font-size variable so that all the Links fit on a single line at all widths until the Mobile Menu is triggered.

If the issue still persists, please provide us with a Live URL so that we can check out the exact issue.

Hope this Helps!

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

Hello,

Thanks for the Update and Apologies for the Inconveniences caused!

We have just checked your Live URL. The reflow happens because your Logo height defaults to 100px at all Desktop widths, which leaves less room for the Menu Links at the lg breakpoint (992px–1199px) before the xl breakpoint kicks in.

To reduce the Logo height to 60px only between the lg and xl breakpoints, please add the following to your css/custom.css File:

@media (min-width: 992px) and (max-width: 1199px) {
	.is-expanded-menu #logo img {
		height: 60px;
	}
}

This will give the Menu Links significantly more horizontal space at the lg breakpoint without affecting the Logo size on larger screens.

Hope this Helps!

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

Hello,

Consider trying this code:
[ch_pre type="css"]@media (min-width: 992px) and (max-width: 1199px) {
.is-expanded-menu #header-wrap #logo img {
height: 60px;
}
}[/ch_pre]

Hope this helps!