Menu Bar has mysteriously three break points - nowrap. center. one line

Shapely
1

Using the wonderful Shapely theme I am trying to achieve that my menu bar on top should always be in center and one line except when the browser width is too small (like on mobile devices) then the menu items should be underneath each other (as Shapely also handles this issue).

This almost works. However there seems to be three mysterious different break points (in width) which I also haven’t defined in my Custom CSS (but they seem to be somewhere in bootstrap and/or Shapely), these are from 0 to 993. from 994 to 1200. and from 1200 on.

The sole correct display range is when its bigger then 1200. inbetween 994 and 1200 there is a weird line padding, not all menu items are underneath and a line break of the collapse symbol. if its smaller then 993 there is also a line break of the collapse symbol

How do I achieve a continous behaviour for all browser width and devices? can you give me a hint?

I will post the example page within the next post. I can also add some custom CSS code if needed.

2

example page (look at the top menu bar and change the browser width to see the three different behaviour)

cheers

3

Hello there,

I hope you are doing well today.

In this case, you would have to add new media query for these screen widths. Using !important works for this because it ensures the changes won’t be overridden by something else. Here is an example:


@media only screen and (max-width: 1200px) {
    body {
        background-color: blue !important;
    }
}

Best Regards,
Support