Custom navigation in foreground?
-
wrote on Feb 5, 2018, 6:44 PM last edited by patricia Feb 13, 2018, 2:26 PM
Hi there,
I have a question concerning my navigation.
http://patriciaklein.de/humor-und-sprache/I made one by myself by adding a text element on every project page and fixed the position with custom css:
.Navigation {
position: fixed;
}Now I want the navigation to be in the foreground while scrolling. I read about the z-index, but that didn't work. Any ideas how to solve it?
and another question:
Is it possible to set a random frontpage by every refresh, for example from one defined category?Many thanks!
Patricia -
Hey you need to set the row which contains your nav to position fixed.
Right click the first row and click "set html class and id".Add a html class to the row like "fixed-nav", and use this CSS:
.fixed-nav{ position:fixed; z-index: 10; }
also
body.slug-humor-und-sprache{ padding-top: 120px; }
To have space at the top!
If you are curious as to why your attempt didn't work, it has to do with z-index stacking context.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_contextYour element is not in the same stacking context as the other elements because all my .row divs that contain the elements are position relative
-
wrote on Feb 13, 2018, 7:27 PM last edited by
Thanks a lot for your answer!
Didn't think of adding a html class to the row … ;-)
I also code custom websites or custom Lay features.
💿 Email me here: 💿
info@laytheme.com
Before you post:
- When using a WordPress Cache plugin, disable it or clear your cache.
- Update Lay Theme and all Lay Theme Addons
- Disable all Plugins
- Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code", click "Save Changes"
This often solves issues you might run into
When you post:
- Post a link to where the problem is
- Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
- If the problem is difficult to explain, post screenshots / link to a video to explain it