Header Behavior in Firefox & IE different than Chrome & Safari

Support
#1

When aligning my header by having the Flex layout row, horizontal end, and margin sides 35px it lines up perfectly and behaves exactly as I want in both Safari and Chrome.

In Firefox it wraps the words of each menu item and looks bad. In IE it doesn’t word-wrap but the breakpoints seem to have broken as the menu will extend outside of the browser window.

If I reduce the font size significantly it will stop occurring but unfortunately the reduction required is too much and ruins the design as well as makes it difficult to read.

#2

Hey there,

Every browser has its quirks so it may display elements and behave differently. The solution to reduce the number of items in your menu or reduce the Base Font Size of your Navigation Inline. Otherwise, this would need custom CSS which is outside the scope of our support.

Thanks.

#3

How about a different approach.

The menu is not filling the width of the browser, as shown in the screenshots I attached above. What settings should I use to both have it aligned to the right as I want (a fixed px distance from the right edge of the browser) as well as fill the rest of the available browser to the left, or at least more of it? I would have expected it to simply fill the available area, or stretch, or something similar via manipulating the various settings but nothing seems to work in conjunction with defining where the right edge of the menu must align.

#4

Hi there,

It’s because of 180px margin, and it’s being ignored in chrome because of flex layout, but recognized in other browsers. You should remove that 180px margin.

You should remove that margin.

Thanks!

#5

Awesome catch, my client put that in there - must have been a first attempt to line things up towards the right margin.

#6

Glad we could help.

Cheers!