Archived topic
Two questions: Sticky Element and Off Canvas Shadow
8 replies · Started by Sebastian on May 22, 2021
Hello,
I have two questions about my website gesundepfunde.com.
1. I would like to have the bar above the menu as a sticky item. On all devices. Unfortunately, I can't make it work. I want the bar to be shown at the very front when scrolling. Can you tell me what code is needed for this?
2. I am using a shadow for the submenu. Unfortunately, this is also adopted in the off-canvas menu. This does not look good. How can I turn off the shadow only in the off-canvas menu?
Many thanks for your help!
Hi there,
1. Edit the Block Element - select the Container Block and in Advanced > Additional CSS Class(es) add: sticky-top-bar
Then add this CSS to your site:
.sticky-top-bar {
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 100;
}2. Replace this CSS:
.main-navigation ul ul {
-webkit-box-shadow: 4px 3px 9px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 4px 3px 9px 0px rgba(50, 50, 50, 0.75);
box-shadow: 4px 3px 9px 0px rgba(50, 50, 50, 0.75);
}with:
@media(min-width: 769px) {
.main-navigation ul ul {
-webkit-box-shadow: 4px 3px 9px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 4px 3px 9px 0px rgba(50, 50, 50, 0.75);
box-shadow: 4px 3px 9px 0px rgba(50, 50, 50, 0.75);
}
}Then the shadows only get applied to the larger screen sizes
Thank you very much!
One little problem: when I scroll, the menu is in front oft the bar?
Change z-index: 100; to z-index: 999;.
Let me know if this helps :)
Great!!! Thanks a lot.
Now I know, how to use the z-index :)
Have a nice day!
By the way: I have one more question - sorry.
On my Blog Page (https://www.gesundepfunde.com/blog/) is it possible, to show more then 5 entries?
Thanky you
This should help:
https://wordpress.org/support/article/settings-reading-screen/
Oh, that simple! Thank you :)
No problem :)
