- This topic has 17 replies, 2 voices, and was last updated 5 years, 4 months ago by
.
I’m trying to understand how to sit the revolution slider on the homepage and header images on subsequent pages behind the website header / nav bar like it is in the main Jevelin Homepage Demo and other demos:
- https://jevelin.shufflehound.com/
- https://jevelin.shufflehound.com/home/home-photography/
- https://jevelin.shufflehound.com/home/home-event/
- https://jevelin.shufflehound.com/home/home-creative/
At the moment I can’t move the slider revolution up to sit behind a transparent header, the main website colour occupies this space so the header looks like it sits on its own colour block, rather than floating in front of the top part of the header image – a bit like the startup demo example:
I can’t find any info for configuring this in the theme. Could you please help me understand how to do this?
Solution for this topic
Hi @NickRust,
I hope you are well today and thank you for your question.
You can create this transparent header as described in the following topic.
https://support.shufflehound.com/forums/topic/transparent-header/#post-2187
Best regards,
Shufflehound teamHi there,
Thanks for the fast response. However, that doesn’t quite solve my problem. As you can see from my screengrab there is still whitespace above the slider that I don’t want there. Can you please help to remove the whitepsace so the slider sits behind the transparent nav?
Thanks.
Could you please share me your site URL where it’s happening so that I can troubleshoot it?
You can remove it by adding the following CSS code in the Custom CSS code option of your theme on the below path.
Admin Area -> Appearance -> Theme Settings -> Custom Code -> CSS Code
#wrapper > .sh-page-layout-full .page-default-content { padding-top: 0; }Thank you,
That has helped get the slider closer to the top, however there’s still a small amount of whitespace.
Any further adjustments you can suggest?
I appreciate all your help.
Thanks
Solution for this topic
Please try changing above shared custom CSS code as following.
#wrapper > .sh-page-layout-full .page-default-content { padding-top: 0 !important; }Hi – that has worked – thank you for all your help!
You are most welcome here 🙂
Hi there,
I’ve just noticed that while this fixes sizing on large screen resolutions (i.e. desktop & laptop), the same issue appears on smaller sizes (tablet & mobile).
Is there a way to make the solution work responsively?
Thanks
Could you please share me the screenshot of mobile issue so that I can help you to resolve it?
Hi there’ I actually found a CSS fix that has resolved it. Thanks!
Awesome great to see you got that resolved.
Please advise if you have more questions by creating a new support topic.
Have a fantastic day!
Hi there,
Is there a reason why this issue still appears across the rest of the website? The page URL I shared has been fixed, however all of the other pages still have padding in the top and bottom wrappers.
https://ceternadev.wpengine.com/home-2/ (this works but any links you explore from that page do not).
Thanks,
Nick
Solution for this topic
To remove it from other pages please also use the below custom CSS code.
#wrapper > .sh-page-layout-default { padding: 0 !important; }Perfect Thanks!
You are always welcome here 🙂
