![Check out Enfold](https://kriesi.at/wp-content/themes/kriesi/images/banner-enfold.jpg)
-
AuthorPosts
-
July 11, 2019 at 9:48 am #1117727
Hello,
thanks to your support and a few lines of css I managed to leave the header sticky also on mobile devices.
Now there is a weird phenomenon:
when I simulate a small device on my desktop by shrinking the browser window, the logo shrinks when scrolling like it should and like it does on big screens. But in “real life”, i.e. in Android or Apple devices, the logo doesn’t shrink.
Any suggestions?Thanks,
DanielJuly 11, 2019 at 1:04 pm #1117788Hey danielmarsch,
Please provide a link to the site/page in question so we can look into this issue further.
Best regards,
Jordan ShannonJuly 11, 2019 at 3:46 pm #1117827Sorry, I forgot about that:
July 13, 2019 at 3:49 pm #1118347Hi,
Please provide admin info as well in the private area.
Best regards,
Jordan ShannonJuly 16, 2019 at 4:24 pm #1119186Hi,
I added a thin line under the header, when it scrolls:@media (max-width: 768px) { #header.av_header_border_disabled.header-scrolled { border-bottom: 1px solid #ccc; }
Same phenomenon:
When I narrow the browser window on my desktop, it’s fine.
On real smartphone (Android and iPhone) it doesn’t show.I guess it’s the same cause as the non-shrinking Logo?
Regards,
DanielJuly 17, 2019 at 9:36 pm #1119697Hi,
Yeap, seems so. Do you need to change it in a different way?
Best regards,
BasilisJuly 18, 2019 at 8:23 am #1119835Hi Basilis,
yes of course, I want both, the logo shrink and the thin line appear under the header, on mobile devices.
Best regards,
DanielJuly 19, 2019 at 7:58 am #1120082Hi,
That behavior is disabled on mobile devices by default. Ihe logo doesn’t have to shrink because sticky or fixed header is originally disabled on mobile devices. Unfortunately, you can’t activate it without editing the files directly.
Best regards,
IsmaelSeptember 10, 2019 at 11:08 am #1136466Hi,
so can you tell me where I have to edit what file, to make the logo shrink on mobile?
Thanks,
DanielSeptember 11, 2019 at 5:10 am #1136877Hi,
Edit the js > avia.js file, look for this code around line 695:
if(isMobile) shrink = false;
Setting the value to true should enable the script, but we’re not really sure if it’s going to work on mobile view like it does on desktop.
Thank you for the update.
Best regards,
IsmaelSeptember 17, 2019 at 3:07 pm #1139131Looks good and makes sense, but unfortunately it does not work. The logo still shrinks on mobile view on a desktop, but not on a real mobile, neither android nor i-phone.
Any other idea?
Best regards,
DanielSeptember 18, 2019 at 3:35 pm #1139531Hi,
This is why that option is disabled on mobile view in the first place. Unfortunately, this modification might require modification that is beyond the scope of support. Please hire a freelance developer or contact our partner, Codeable.
Thank you for understanding.
Best regards,
IsmaelSeptember 18, 2019 at 10:10 pm #1139722Ok, thanks for the answer anyway,
best regards,
DanielSeptember 18, 2019 at 10:14 pm #1139724Hi,
Did you need additional help on this topic or shall we close?
Best regards,
Jordan ShannonSeptember 18, 2019 at 11:09 pm #1139738you like to have a shrinking logo aswell on mobile devices?
enfold ▸ js ▸ avia-snippet-sticky-header.js
find:
if(shrinking && !isMobile)
replace with:
if(shrinking)
now the shrinking should be there on mobile devices.
To not loose this changing you can have a child-theme : avia-snippet-sticky-header.js
make a copy of that edited js file and – upload it to your child-theme/js folder – because there is on default no js folder – create one.
put this to your child-theme functions.phpadd_action( 'wp_enqueue_scripts', 'wp_change_sticky_header_script', 100 ); function wp_change_sticky_header_script() { wp_deregister_script( 'avia-sticky-header' ); wp_enqueue_script( 'avia-sticky-header-child', get_stylesheet_directory_uri().'/js/avia-snippet-sticky-header.js', array('avia-default'), $vn, true); }
September 18, 2019 at 11:11 pm #1139740by the way – in your case i find it nice to have a non shrinking logo on mobile!
September 23, 2019 at 9:39 pm #1141139Thank you, Guenni, but it doesn’t work this way:
just changing the avia-snippet-sticky-header.js in the parent theme doesn’t do anything, and changing the function.php in the child theme does exact the contrary: no shrinking on mobile, but no shrinking on desktop either…September 23, 2019 at 9:48 pm #1141140ich glaube wir können deutsch miteinander kommunizieren?
ich sehe, dass dein Enfold mit merging eingestellt ist. Also bitte die Files neu mergen lassen!
Enfold – Leistung – “Alte CSS- und JS-Dateien löschen?” speichern
Browser Cache löschen-
This reply was modified 4 years, 11 months ago by
Guenni007.
September 23, 2019 at 9:49 pm #1141141Ja, gerne!
September 23, 2019 at 9:58 pm #1141145und wp-supercache auch die Cachefiles löschen
September 24, 2019 at 10:13 am #1141311September 24, 2019 at 11:19 am #1141342Well i think i have to look if a header on fixed postion get this working too!
you can see here – that it is even working this way if you got a fixed header.
https://webers-testseite.de/cynthia/fixed-header-on-mobile/and if it weren’t for the superfluous rule in layout.css:
@media only screen and (max-width: 767px) { .responsive #header_main .container{ height: auto !important; } }
the header height will shrink too. (See the example page – with deleted rule in layout.css)
But i found no way ( unset does not work) to overwrite this rule via css – only deleting that rule would help-
This reply was modified 4 years, 11 months ago by
Guenni007.
September 24, 2019 at 12:24 pm #1141363Dear Mods : this rule seems to be obsolete. It is hard to overwrite a height rule set to auto !important.
unset , initial and inherit does not do the trick.The rule has no influence on the otherhand – so test it please if it could be deleted.
see fixed but shrinking header here: https://webers-testseite.de/cynthia/fixed-header-on-mobile/September 26, 2019 at 10:19 am #1142177Hi,
Thanks for sharing this – I talked to Kriesi but he does not want to add these changes to core as the whole header CSS and js are pretty complicated and the risk of breaking other settings is too high – so I’m afraid if you want to use this feature you will have to stay to your customizations.
Best regards,
GünterSeptember 26, 2019 at 1:28 pm #1142255Hallo Guenni007,
ich hatte jetzt ein paar Tage nicht mehr reingeguckt:
ja, Entmergen und Dekomprimieren der CSS- und JS-Files sowie Cache leeren, das hat es gebracht. Sorry, dass ich da nicht selber drauf gekommen bin. Also im Endeffekt ist es nur die kleine Textänderung in der avia-snippet-sticky-header.js.
Danke und Gruß,
DanielSeptember 26, 2019 at 4:15 pm #1142344ja – bitte – aber wie gesagt ich finde das große Logo schöner, solange die Fläche darunter sich nicht mit verkleinert.
Siehe Beispielseite: https://webers-testseite.de/cynthia/fixed-header-on-mobile/ -
This reply was modified 4 years, 11 months ago by
-
AuthorPosts
- You must be logged in to reply to this topic.