- This topic has 4 replies, 2 voices, and was last updated 5 years, 7 months ago by
.
Hi there,
On mobile the header covers a lot of the slider revolution and was just wondering was it possible for mobile to move the slider below the header instead of having it overlapping? Thank you.
Currently for mobile I have the following to make it black on mobile for clarity:
#page-container .primary-mobile {
background-color: black;
}Hi @supporttester,
I hope you are well today and thank you for your question.
You can achieve 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
@media (max-width: 800px){ .sh-revslider { margin-top: 98px; } }Best regards,
Shufflehound teamAmazing thank you!
Just ran into a little issue however, the jevelin notice in the settings pushs down the header now.
Is there a way to get the notice to float on top of the header instead of pushing it down into the slider?
The issue is when you go to the site the notice displays and on mobile it looks nice with black and right size. However if you click ok to notice and refresh the page the black area is now twice the height.
So I am trying to have the size 98px before the notice is clicked, and half after that. The funny thing is when you click the notice button it auto goes down to half the height. But when refresh page and the notice don’t show the height of the black area is twice (filling where the notice used to be etc)
UPDATE:
Now the only issue is that the notice takes up a little too much space on mobile. Is it possible to have the notice move down both the header and slider conditionally?
I have wrote some code to try and get this to work, but might be too complicated? I put it in the js custom code area:
var elementExists = document.getElementById(“sh-page-notice”);
var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
if(elementExists && width <= 800) {
document.getElementsByTagName(“sh-revslider”)[0].setAttribute(“style”, “margin-top: 147px;”);
}Glad you got it to work developing custom javascript code which seems good.
