Hi there, thanks for trying my plugin! 🙂
It’s not an issue of Z-index. The idea is that the titles are at the top of the page (as intended), but are simply obscured by the sticky menu.
The easiest way to fix this is to add a bit more top padding to the titles, by adding this to your CSS:
.et_pb_text_1 h1,
.et_pb_text_3 h1,
.et_pb_text_5 h1,
.et_pb_text_9 h1,
.et_pb_text_14 h1,
.et_pb_text_19 h1,
.et_pb_text_22 h1 {
padding-top:50px;
}
You may have to adjust it a bit for smaller screen sizes, where the purple menu is shown on two lines.
Hope this helps!
Thanks! Seemed to do the trick. Will this affect other pages on the site though? (PASIC.org) I only want this applied to the one page with the sticky menu.
-Dan
To only have the change on that particular page, the code would be this:
.page-id-27128 .et_pb_text_1 h1,
.page-id-27128 .et_pb_text_3 h1,
.page-id-27128 .et_pb_text_5 h1,
.page-id-27128 .et_pb_text_9 h1,
.page-id-27128 .et_pb_text_14 h1,
.page-id-27128 .et_pb_text_19 h1,
.page-id-27128 .et_pb_text_22 h1 {
padding-top:50px;
}
Hi Mark,
First of all, what an awesome support you offer!
I may have a very similar issue on my site where my titles are covered by the sticky menu. I set a different container (Avada theme) which I ID’ed with the correct title, but obviously this creates an unnecessary space when not using the menu but simply scrolling through the site, see http://prntscr.com/elglo8 or the following happens, see http://prntscr.com/elgmbn. How would I go about having the menu direct me to the right container without needing an extra white (black) space for the ID?
Website: webdesingposse.com/bambuddha/
Thanks so much and have a great weekend!
Patrick
@patthai I’m not seeing the issue on your site directly. Can you tell me on which page this happens and how to reproduce it?
Thanks!
Sorry about that.
Please go to http://webdesignposse.com/bambuddha/menu/, you’ll see your sticky menu below the header. Now click ie. ‘cocktails’, see http://prntscr.com/em66r8. The click will bring you to the section called ‘Cocktails’ but because your sticky menu is a container on top of the page, it covers the title “COCKTAILS”, see http://prntscr.com/em670m
Hope this explains it better.
Have a great day!
Patrick
Hi Mark,
I am sure you’re super loaded with work but just wanted to innocently check if you got my reply above 😉
Cheers.
Sorry for the delay @patthai
This is not directly an issue with the Sticky plugin. The link makes the page jump to the section, but since the menu covers it (now that it’s sticky), you’ll need to change the titles a little bit.
This CSS might help:
.fusion-title-size-two {
padding-top: 30px;
}
Cheers for getting back, Mark.
Yes was thinking the same however two issues arise:
1. the photo is still partly covered when doing this.
2. Also, there’s already a 100px top margin which with an extra 50px padding (which is needed) will become massive. I reduced the top margin with 50px to compensate for this, but then the result was the same again. Am therefore ‘obliged’ to put 100px top margin PLUS 50px padding top which makes the black gap huge. Any other brilliant ideas how to keep same layout but not have the title covered by your sticky menu?
Cheers, have a great Sunday.
-
This reply was modified 7 years, 1 month ago by
patthai. Reason: Added information
This goes beyond the functionality of my sticky plugin so I can’t fully fix this for you, but the idea is that you’re going to have to play around with top padding a little bit for the block involved, to push it all down a little bit.
It’s probably better to remove the top padding on the H2, and place it on the div that has ID “cocktails”:
#cocktails {
padding-top:100px;
}
I understand. Your solution sounded great until I realised it would move all connecting boxes down, see http://prntscr.com/eonjyi. Hm…*thinking*
