Viewing 17 posts - 1 through 17 (of 17 total)
  • Author
    Posts
  • December 1, 2016 at 9:28 pm #719396
    aph80

    I´m sorry I have to open this thread again but I have some new information on the issue that might help.

    Here is the old thread with a detailed description of the problem: https://kriesi.at/support/topic/banner-above-header-problem-on-tablets-only/

    1. I tried using a banner on a different website of mine that runs with Enfold. Exactly the same problem there. So the issue is definitely theme dependant.
    2. If I don´t use “.header-scrolled { top: 0; }” the problem appears on desktop as well.
    3. I made a sticky mobile header with the code from this thread https://kriesi.at/support/topic/sticky-header-for-mobile/. This leads to having the problem on mobile phones too (removed it again due to this issue).
    4. On desktop the problem doesn`t appear, even when shrinking the screen to tablet or mobile sizes.

    So it seems to me that the code “.header-scrolled { top: 0; }” somehow just isn`t working for mobile devices! Can you check this please?

    Best regards

    Arkadi

    December 2, 2016 at 4:24 am #719476
    Vinay

    Hey aph80,

    I checked the site on the android phone and on desktop windows/Chrome browser. The banner appears correctly.

    Could you please elaborate the problem and add the link to the site here so we do not have to refer to the other ticket every time to inspect the site.

    The only issue I notice is while scrolling is that what you are referring to ? If so we need to take a closer look at it Please post us your login credentials (in the “private data” field), so we can take a look at your backend.

    Login credentials include:

    • The URL to the login screen.
    • A valid username (with full administration capabilities).
    • As well as a password for that username.
    • permission to deactivate plugins if necessary.

    Best regards,
    Vinay

    December 2, 2016 at 5:13 pm #719826
    aph80

    Hey Vinay,

    when scrolling down, the header is supposed to stick to the top of the page and hide the banner. This works on desktop. On tablets however the banner goes away but leaves transparent space between the top of the page and the header. On mobile with sticky header the same problem appears (right now sticky header is off, so you won´t see a problem on the phone).

    I post the login below. Appreciate you looking into it!

    Keep in mind that this issue is not restricted to this website. On other Enfold websites the same problem occurs.

    December 6, 2016 at 8:08 am #720870
    Vinay

    Hi,

    I have deactivated the cache plugin to troubleshoot the issue so we can see the css changes.

    Added the below css to Quick CSS

    /* Mobile Header */
@media only screen and (max-width: 767px) {
.header-scrolled #header_main  {
position: fixed;
top: 0;
width:100vw;
background:#FFF;
}
}

    The sticky header works good in mobile and desktop please hardrefresh and review the site :)

    Best regards,
    Vinay

    December 6, 2016 at 3:11 pm #721046
    aph80

    Hi Vinay,

    thank you. Have you activated sticky header for mobile? The regular mobile header still seems to be in place. Also the header/scrolling problem persists on tablets.

    Best regards

    Arkadi

    December 10, 2016 at 11:54 pm #722759
    Vinay

    Hi,

    Sorry for the delay I’m working on your ticket and the result will be updated here soon.

    I have tested the below code on my installation and it works fine, however on your test site this is not working. It may be because of a custom modification or due to conflict with a 3rd party plugin.

    An example of the below code working can be seen on (link in private).

    /* Mobile Header */
@media only screen and (max-width: 480px)
#header {
    position: fixed !important;
}}

    If the above do not work for you remove the custom modifications and install a child theme. Move the css from Quick CSS to child theme styles.css along with the modifications made to header.php

    Best regards,
    Vinay

    December 12, 2016 at 1:33 pm #723094
    aph80

    Hi,

    have you tried adding a banner above the header on your site and are there no issues when scrolling? And how does this code affect tablets?

    The issue I am talking about affects ALL Enfold installations, not only the website I am referring to. If you have a solution that´s working on your site, that would be great.

    Best regards

    Arkadi

    December 20, 2016 at 5:28 am #726398
    aph80

    Come on guys this is an Enfold-specific bug. Please help me fix it!

    December 20, 2016 at 6:57 am #726426
    Vinay

    Hi,

    Sorry for the delay, i’m unable to reproduce the issue you are trying to mention. is it possible to post of video of the same please?

    Best regards,
    Vinay

    December 22, 2016 at 11:50 pm #727709
    aph80

    Hi,

    I made a video. You can find it here http://www.eiweisspulver-test.com/Tablet%20Video.mp4. I recorded it on a Samsung Galaxy tablet. You find the same bug on all tablet models I tested so far including several Ipads and Amazon products.

    Cheers!

    Arkadi

    • This reply was modified 8 years ago by aph80.
    December 28, 2016 at 3:46 pm #728361
    Vinay

    Hi,

    Thank you for sharing the video. I have tested the below code on my installation and it works fine. It appears there is a glitch in the way the banner is placed at the moment. Please remove the previous code related to adding a top banner and copy the below code to Quick CSS and functions.php.

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

    .banner-top{
min-height:90px;
width:100%;
background:url('http://www.eiweisspulver-test.com/Bodylab728x90.gif') no-repeat center center ;
background-size: contain;
}

    Please try adding this at the very end of your themes / child themes functions.php file:

    function bannerTop(){
?>
<script>
    jQuery(document).ready(function() {              
      jQuery('#header_main').prepend( "<a href='https://www.bodylab24.de/'><div class='banner-top'> </div></a>" );
    });
</script>
<?php
}
add_action('wp_footer', 'bannerTop');

    Best regards,
    Vinay

    • This reply was modified 7 years, 12 months ago by Vinay.
    January 7, 2017 at 12:20 pm #730675
    aph80

    Hi Vinay,

    thank you! With the code you provided the banner is placed below the small bar above main menu. How can we place it above this bar?

    Cheers!

    Arkadi

    January 8, 2017 at 6:22 pm #730888
    Vinay

    Hi,

    I checked your site and the banner appears on top of the menu bar please see attached screenshot. You may not see the changes until the cached files are cleared in your browser.

    Please try to hard refresh by pressing Ctrl + Shift + F5 on your browser or press the F12 key to open chrome dev tools and right click on the refresh button and select “Empty Cache and Hard Reload” and review the site again.

    Best regards,
    Vinay

    January 8, 2017 at 10:39 pm #730916
    aph80

    The banner is on top of the menu bar since I removed your code. Can´t use the banner below the bar. Can you help please?

    January 11, 2017 at 7:10 am #731898
    Vinay

    Hi,

    Please update the code in functions.php to

    function bannerTop(){
?>
<script>
    jQuery(document).ready(function() {              
      jQuery('#header').prepend( "<a href='https://www.bodylab24.de/'><div class='banner-top'> </div></a>" );
    });
</script>
<?php
}
add_action('wp_footer', 'bannerTop');

    And the css code in Quick CSS to

    
.banner-top{
min-height:90px;
width:100%;
background:url('https://www.eiweisspulver-test.com/Bodylab728x90.gif') no-repeat center center ;
background-size: contain;
}

.header-scrolled .banner-top{
display:none;
}

    Best regards,
    Vinay

    January 19, 2017 at 2:52 pm #735879
    aph80

    Hi Vinay,

    thank you again. This code leads to the following results:

    – banner is on top of the menu bar
    – banner doesn´t have vivid colors, has like a white/grey opaque effect on it
    – on tablets the banner doesn´t go away when scrolling
    – in landscape mode the banner looks like on desktop (but doesn´t go away)
    – in portrait mode the banner ist completely white

    Any solutions?

    January 27, 2017 at 8:40 pm #739561
    Andy

    Hi,

    Unfortunately it would require quite some time and customization of the theme to achieve this, so I am sorry to tell you that this is not covered by our support. However if its really important for you to get this done, you can always hire a freelancer to do the job for you :)

    Best regards,
    Andy

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