Avoid overlay site tagline in Minimum Pro Theme

[squid74]

Hi all,

I have a problem with the Minimum Pro Theme. My navigation is a bit longer than in the demo. When the width is going under 1180px it breaks into two lines and then the SITE TAGLINE gets cut.

How can I avoid this?

Thanks in advance!

http://www.nbii.de/suchprofil/

[Victor Font]

The reason this is happening is because you have a fixed position header with a z-index of 999. The z-index is the layer dimension. Besides the 2 dimensions of length and width, web pages also have this layer dimension that allows for elements to be placed above (in front of) or below (behind) other elements. In your case, the header, with a z-index of 999, will always be in front of anything else on the page unless there is another element with a z-index of 1000 or higher, which would then place it in front of the header.

CSS media queries are used to change CSS on mobile devices by setting break points. A break point is a fixed width at which a site's CSS changes. When a page is loaded on a mobile device, the mobile browser determines the width of the device's viewport and uses the CSS for that screen width. When you test mobile by just changing the browser width of the desktop browser, you encounter many, many dimensions that aren't considered in break point calculations. That's why you perceive the display to be messed up. To fix it, you have to change the CSS for that screen width.

You could, move the mobile menu display to a higher breakpoint or create a new breakpoint for the mobile menu to appear when the menu begins to old in on itself.

If you don't want to do that, then because of the fixed position header, you have to move the rest of the page down by changing the margin-top for the site-tagline to 122px at the point that the menu folds in on itself.

Last, you could delete position: fixed from the header CSS so it just flows and scrolls with the rest of the page.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[squid74]

Wow, Victor!

I am really impressed!!! Thank you very much for the time you've put in to that in-depth answer. It not only helped me but I actually learned something!

Thank you!

[Author]

Posts