Tagged: 

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • June 2, 2018 at 5:35 pm #965911
    jake5m

    I would like to implement a glassy header with a custom colour (e.g. rgba(0,0,0,0.4)) which, upon scrolling down the page, seamlessly transitions into a header of the same colour (i.e. rgba(0,0,0,0.4).

    Currently, there is an animation where the glassy header disappears and the regular header appears. Is it possible to remove this animation and make the transition seamless?

    Many thanks!

    June 3, 2018 at 1:40 am #965997
    Vinay

    Hey Jake,

    Would you mind providing a precise link to the page, showing the elements in question? We need to be able to inspect them in order to help :)

    Best regards,
    Vinay

    June 4, 2018 at 12:46 am #966262
    jake5m

    The link has been sent privately. Thank you!

    June 4, 2018 at 5:48 pm #966671
    Nikko

    Hi jake5m,

    Can you try adding this css code in Quick CSS (located in Enfold > General Styling):

    #top .av_header_glassy.av_header_transparency .header_bg {
    opacity: 1;
    background-color: rgba(0,0,0,0.4);
}

    Let us know if this helps.

    Best regards,
    Nikko

    June 4, 2018 at 10:26 pm #966857
    jake5m

    Your CSS code solved the original issue. Thank you!

    There is still one additional issue one mobile. By way of background, I am using the code below to maintain a transparent header on the mobile version of the site:

    @media only screen and (max-width: 989px) {
    #top #wrap_all .av_header_transparency {
    background: transparent!important;
    position: absolute!important;
    }}

    There is a slight problem with the result. More specifically, there is a jarring animation when the user begins to scroll down the page, as the scrolling causes the header to disappear and the image to “jump”. Is it possible to remove this animation/jump?

    June 5, 2018 at 11:32 am #967157
    Nikko

    Hi jake5m,

    Can you try to replace the code I gave:

    #top .av_header_glassy.av_header_transparency .header_bg {
    opacity: 1;
    background-color: rgba(0,0,0,0.4);
}

    to:

    #top #header .header_bg {
    opacity: 1 !important;
    background-color: rgba(0,0,0,0.4) !important;
    display: block !important;
}

    Let us know if this helps.

    Best regards,
    Nikko

    June 7, 2018 at 2:24 pm #969019
    jake5m

    The code did not solve my issue.

    Perhaps I should be more clear: the problem is only on tablet and mobile screen sizes. When the user begins to scroll down the page, as the scrolling causes the header to disappear and the image to “jump”. I would like to eliminate this “jump” either by having the header act as a sticky header or a fixed header.

    June 7, 2018 at 4:37 pm #969694
    Nikko

    Hi jake5m,

    I see, please remove the code I gave and please post us your login credentials (in the “private data” field), so we can take a look at your backend.

    1. Install and activate ” Temporary Login Without Password “.
    2. Go to ” Users > Temporary Logins ” on the left-side menu.
    3. Click ” Create New “.
    4. Add the email address for the account ( you can use (Email address hidden if logged out) ), as well as the ” Role ” making that the highest possible and the expiry about four days
      ( do be sure that we have enough time to debug ).
    5. Click ” Submit “.
    6. You’ll now have a temporary account. Please provide us here in the private section the URL, so we can login and help you out.

    When your issue is fixed, you can always remove the plugin!
    If you prefer to not use the plugin, you can manually create a admin user and post the login credentials in the “private data” field.

    Best regards,
    Nikko

    June 10, 2018 at 10:52 pm #970889
    jake5m

    Thank you for the reply. The login credentials are attached in private

    June 12, 2018 at 9:10 pm #971848
    Yigit

    Hi,

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

    CSS Snippet:

    
@media only screen and (max-width: 989px) {
.html_header_top.html_header_transparency #header {
    position: absolute!important;
}}

    Best regards,
    Yigit

    June 14, 2018 at 5:18 pm #972926
    jake5m

    My child theme already had a variation that code. I also added your new code. Unfortunately it doesn’t seem to help.

    On tablet and mobile screen sizes, when the user begins to scroll down the page, the header disappears and the image “jumps”.

    June 18, 2018 at 5:15 pm #974368
    Nikko

    Hi jake5m,

    Can you try to clear the browser cache?
    I checked it using ipad in landscape mode and it works fine and don’t experience the jump issue you mentioned.

    Best regards,
    Nikko

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