-
Posts
-
Hi there, I used this code to enable the fixed header for mobile devices.
@media only screen and (max-width: 767px) {.responsive #top #main {/* Margin top value should be equal to header height*/ margin-top: 0px;} .responsive #top #wrap_all #header {position: fixed;}}The very strange thing is, on my phone it only works on the subsides listed below. On all other pages the header doesn’t stick when scrolling. (When using the mobile preview of WP it doesn’t work, at all. Not even on that on page.)
UPDATE: Something really odd is going on here… I removed that code for now and switched off the sticky header in the header options, but now I get a display error on my phone that only occurred when sticky header was enabled. And it only occurs on some sides, not on all. (Yes, I deleted the browser cache, of course. ;) )
Can adding some quick CSS change something permanently, even if the code is removed?
UPDATE2: I could solve both problems. It seems, it takes a while for this special code to take effect. Never had that before. Normally it’s one or two refreshes and any change becomes visible.
I still have a question, though: Why doesn’t the “sticky header” option also affect the mobile version by default? In most cases you want the mobile version of a website to behave like the desktop version does. And in the case of the current Enfold version, enabling “sticky header” only for desktop causes problems with the mobile version.
Hey ThomasN001,
UPDATE2: I could solve both problems. It seems, it takes a while for this special code to take effect. Never had that before. Normally it’s one or two refreshes and any change becomes visible.
Glad to know that you managed to fixed the issue. You may need to toggle or temporarily disable the Enfold > Performance > File Compression settings while editing the site and make sure to purge the cache before testing the page.
still have a question, though: Why doesn’t the “sticky header” option also affect the mobile version by default?
Fixed header is disabled by default because it is not necessary on mobile devices and it takes a lot of space. Users can easily navigate the page even without a sticky navigation or header.
Best regards,
IsmaelHi Ismael, thanks for your answer.
You may need to toggle or temporarily disable the Enfold > Performance > File Compression settings while editing the site and make sure to purge the cache before testing the page.
That option was already disabled. Do you recommend to enable it by default?
Fixed header is disabled by default because it is not necessary on mobile devices and it takes a lot of space. Users can easily navigate the page even without a sticky navigation or header.
Fair enough. However, there’s still the display issue, where the header background jumps, when the fixed header is enabled only for the desktop version.
Hi,
Thanks for your patience, I checked your page on desktop but I didn’t see any issues with your header, but for mobile I saw that your logo shrinks down a lot, if you don’t want that try this css to correct:@media only screen and (max-width: 767px) { .logo.avia-svg-logo a { max-height: 80px !important; } }After applying the css, please clear your browser cache and check.
Best regards,
MikeHi Mike, the issue with the jumping header is with the mobile version, but when the fixed header is enabled for desktop, only. Since I have it also enabled for mobile, there’s nothing to see at the moment.
My logo uses all the space there is on my phone. So no issue here.
However, I’d really like to know, if Enfold’s file compression is recommended by default.
Hi,
Yes, Enfold’s file compression is recommended by default.
But if you are using a caching plugin that in minifying css & js or a plugin like Autoptimize you may find that these plugins are minifying minified files and causing errors, if so try only using the plugin or the theme option.
If you are actively building your site and making a lot of changes daily, I recommend not using a caching plugin or the theme options so you can easily view your changes without needing to clear your cache. A good rule of thumb is to build your site first, then work on the optimization of it (speed & caching).
I believe your question is related to Ismael’s comment about toggling the File Compression to clear the theme cache, I believe he was suggesting this because often if this is enabled toggling will help.Best regards,
Mike
- You must be logged in to reply to this topic.