Sticky Header Menu


Author Message
Thaliruth

Posted: 10/5/2018
Quote message 

Moin Moin dear community, I have a problem here which disseminates with real headache :) I have created a menu that appears only in a certain area. see the screenshot as an example here

https://www.bilder-upload.eu/bild-d44687-1538718458.jpg.html

If you now scroll down the menu will be solved and is attached above, which also works so far wonderful. see this picture

https://www.bilder-upload.eu/bild-7adf9b-1538718662.png.html

So far so good, but one bothers me even if it is only a small thing and rather for the eye, what bothers me now is that I left and right still have a lot of space in the 1 line. The menu is undone and fixed 1: 1 above. My wish is now that the 3 lower columns "episodic content", "other" and class property points automatically come in the first line, so that the Sticky Menu consists only of 1 line and no 2. This would have to be feasible? So the last 3 menu areas should then be added automatically after Mordor

MY CSS

.sticky-menu-fixed {
position: fixed;
-webkit-backface-visibility: hidden;
-webkit-transform: translateZ(0) scale(1.0, 1.0);
transform: translateZ(0);
}
.sticky-menu-sticky {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: auto;
}


Does anyone have a plan how to realize this? I have already tried a lot, but unfortunately I can not handle it

It should look like dan on this photomontage
https://www.bilder-upload.eu/bild-e68abb-1538719314.jpg.html

I suppose that <nav> has to be outside of the DIV art-sheet, so it comes out of the limit. But how do I do that?