Viewing 26 posts - 1 through 26 (of 26 total)
  • Author
    Posts
  • July 11, 2019 at 9:48 am #1117727
    danielmarsch

    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,
    Daniel

    July 11, 2019 at 1:04 pm #1117788
    Jordan Shannon

    Hey danielmarsch,

    Please provide a link to the site/page in question so we can look into this issue further.

    Best regards,
    Jordan Shannon

    July 11, 2019 at 3:46 pm #1117827
    danielmarsch

    Sorry, I forgot about that:

    Home

    July 13, 2019 at 3:49 pm #1118347
    Jordan Shannon

    Hi,

    Please provide admin info as well in the private area.

    Best regards,
    Jordan Shannon

    July 16, 2019 at 4:24 pm #1119186
    danielmarsch

    Hi,
    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,
    Daniel

    July 17, 2019 at 9:36 pm #1119697
    Basilis

    Hi,

    Yeap, seems so. Do you need to change it in a different way?

    Best regards,
    Basilis

    July 18, 2019 at 8:23 am #1119835
    danielmarsch

    Hi Basilis,
    yes of course, I want both, the logo shrink and the thin line appear under the header, on mobile devices.
    Best regards,
    Daniel

    July 19, 2019 at 7:58 am #1120082
    Ismael

    Hi,

    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,
    Ismael

    September 10, 2019 at 11:08 am #1136466
    danielmarsch

    Hi,
    so can you tell me where I have to edit what file, to make the logo shrink on mobile?
    Thanks,
    Daniel

    September 11, 2019 at 5:10 am #1136877
    Ismael

    Hi,

    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,
    Ismael

    September 17, 2019 at 3:07 pm #1139131
    danielmarsch

    Looks 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,
    Daniel

    September 18, 2019 at 3:35 pm #1139531
    Ismael

    Hi,

    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,
    Ismael

    September 18, 2019 at 10:10 pm #1139722
    danielmarsch

    Ok, thanks for the answer anyway,
    best regards,
    Daniel

    September 18, 2019 at 10:14 pm #1139724
    Jordan Shannon

    Hi,

    Did you need additional help on this topic or shall we close?

    Best regards,
    Jordan Shannon

    September 18, 2019 at 11:09 pm #1139738
    Guenni007

    you 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.php

    add_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 #1139740
    Guenni007

    by the way – in your case i find it nice to have a non shrinking logo on mobile!

    September 23, 2019 at 9:39 pm #1141139
    danielmarsch

    Thank 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 #1141140
    Guenni007

    ich 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 #1141141
    danielmarsch

    Ja, gerne!

    September 23, 2019 at 9:58 pm #1141145
    Guenni007

    und wp-supercache auch die Cachefiles löschen

    September 24, 2019 at 10:13 am #1141311
    Rikard

    Hi,

    Thanks for helping out @guenni007.

    Best regards,
    Rikard

    September 24, 2019 at 11:19 am #1141342
    Guenni007

    Well 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 #1141363
    Guenni007

    Dear 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 #1142177
    Günter

    Hi,


    @guenni007

    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ünter

    September 26, 2019 at 1:28 pm #1142255
    danielmarsch

    Hallo 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ß,
    Daniel

    September 26, 2019 at 4:15 pm #1142344
    Guenni007

    ja – 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/

  • Author
    Posts
Viewing 26 posts - 1 through 26 (of 26 total)
  • You must be logged in to reply to this topic.