If you’d like to make you header sticky, use following CSS code to Theme Options > Main Options > Custom CSS:
@media only screen and (max-width: 1100px) {#header-container:not(.small) {
position: fixed;
}}
@media only screen and (max-width: 799px){#header-container:not(.small) {
position: fixed;
}}
@media only screen and (max-width: 480px) {#header-container:not(.small) {
position: fixed;
}}
@media only screen and (max-width: 799px){#header-container.small {
display: block;
}}
@media only screen and (max-width: 480px) {#header-container.small {
display: block;
}}
Hello,
We tried your code on the template we’ve purchased. It works well. However, the sticky mobile header covers the upper part of each and every page.
The top part of the home page, for example, would only show ‘half’ of the revolution slider. Or, on another page, only the bottom half the header image would. If it is possible to prevent the sticky mobile header from obstructing the top part of each page, it would be very functional and beneficial. If you have an updated code to share with us it would be much appreciated.
Thank you.
Hello, TBAWAB!
Please, mail us your purchase code, WP access details and the link to this post to [email protected] and we`ll check what
can be done regarding your request.
Regards, DFD Support Team.
I have the same problem as the last person.
Hello, Mikael!
Please, try this code to add the top margin for mobiles. Also, we should mention that this will work for archive pages:
@media only screen and (max-width: 1100px){
#layout.dfd-blog-loop {
margin-top: 100px;}
}
For the rest of the pages, it is necessary to add spacers and assign them only for mobile devices to correct the issue with the sticky header.
Please, mail us to the [email protected] in case any difficulties will occur.
Regards, DFD Support Team.
Hello,
I have a few issues I’m hoping you would help with.
Issue 1: Everything on my site was working fine until the other day I noticed the mobile version was showing up on the desktop version of the website and when I checked on my phone the website was no longer mobile responsive.
Issue 2: Today I noticed our primary menu on the top of the page is stacking the page options instead of keeping them all on one line and when I scroll the sticky header shows up but the text is showing up below the sticky menu background instead of on top of it. Both of these were working fine a few days ago. How can I fix this?
Thank you.
Hello, Sarah!
Please, mail us your requests, the purchase code and WP access details to [email protected] and we will be able to check your site properly and solve your issues.
Regards, DFD Support Team.
I have the same issue with the sticky navigation. It isn’t implemented well with this CSS code, so it covers a portion of my website, and it gets particularly apparent when I use revolution slider set to cover the whole page – it still leaves a gap at the bottom about the same height as the navigation.
Please, ANY solution for this? Has any other user found a proper solution? One that does NOT obstruct the content of the pages?
Hello Knas!
Could you please get in touch with us via [email protected] email. Please email us the WP access details. We’ll check the issue and help you to solve your issue.
Regards, DFD Support Team
Hello Efenefe!
Could you please get in touch with us via [email protected] email. Please email us the WP access details. We’ll check the issue and help you to solve your issue. As for the Side area, it’s not displayed on mobiles, but the menu button in mobile header also has 3 lines. Please email us and we’ll recheck it for you.
Regards, DFD Support Team
Hello,
I believe I have the same issue with the header (header style 2). Is there a way to make it shorter?
Also, how can I turn off the “side area” on mobile site? It is disabled on desktop version, but still displays on mobile.
Thank you.
Hello Efenefe!
Could you please get in touch with us via [email protected] email. Please email us the WP access details. We’ll check the issue and help you to solve your issue. As for the Side area, it’s not displayed on mobiles, but the menu button in mobile header also has 3 lines. Please email us and we’ll recheck it for you.
Regards, DFD Support Team
Hello!
I have the same problem with my menu navigation in the mobile version. The buttons don’t close the sticky mobile header, so it covers a portion of my website. Is it possible to fix?
Best regards. Thank you.
Hello Talita!
Please get in touch with us via [email protected] email. Email us the WP access details and we’ll check the issue and help you to solve it.
Best Regards, DFD Support Team.
Hello Helen,
The email was sent.
Thank you.
Best Regards,
Talita Romão.