Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • April 1, 2017 at 5:00 am #770219
    sdsitetechdotcom

    Hey there, everybody! My first time asking for help here on the Enfold forums.

    So, today I’m having trouble finding a way to show a difference logo in my header area when the page is scrolled down. I’ve attempted another option that I found on here, but it ended up being rather glitchy as I am assuming it is not compatible anymore with the new Enfold 4 update.

    I’m just trying to show a different logo of mine (a more wide logo) when the user scrolls down.

    Thanks for all the future help!

    April 1, 2017 at 6:32 am #770229
    John Torvik

    Hey sdsitetechdotcom,

    Please add following code to Child Themes Fuctions.php file in Appearance > Editor

    
add_filter('avf_logo_subtext', 'kriesi_logo_addition');
function kriesi_logo_addition($sub) {
    $sub .= '<img src="https://kriesi.at/documentation/enfold/wp-content/uploads/sites/2/2015/11/logo_enfold_docs.png"/>';
    return $sub;
}

    and then add following code to Quick CSS in Enfold theme options under General Styling tab

    
.header-scrolled .logo > a > img { 
display: none !important; 
}

    If you don`t know how to create a child theme, you can follow this tutorial: kriesi.at/documentation/enfold/using-a-child-theme/

    Best regards,
    John Torvik

    April 1, 2017 at 7:17 am #770250
    sdsitetechdotcom

    Alrighty, I’ve done just that and it is almost working, but there are some things that are off which you can see below in the following screenshots:

    In this one, the first logo when it is all the way scrolled up is pushed to the left:

    This one, the scroll down presents the perfect 2nd logo:

    This one, it shows both logos when on mobile, or the browser width is lowered:

    I appreciate all of the help. Thank you!

    April 1, 2017 at 7:49 pm #770406
    sdsitetechdotcom

    Bump, sorry to bug. Anyone been able to look into this?

    April 2, 2017 at 10:37 am #770583
    Rikard

    Hi,

    Please try the following in Quick CSS under Enfold->General Styling:

    strong.logo a {
    text-align: -webkit-center;
}

    Best regards,
    Rikard

    April 2, 2017 at 10:11 pm #770753
    sdsitetechdotcom

    Hey Rikard, thanks for the reply.

    I’ve fixed the problem by increasing the width of the logo’s padding, so now it shows up centered.

    Now, I’m just trying to figure out how to hide the second sub logo on a mobile device. Any suggestions?

    April 3, 2017 at 6:38 am #770896
    Nikko

    Hi,

    Try adding this css code in Quick CSS (located in Enfold > General Styling):

    @media only screen and (max-width:767px) {
  #header_main .subtext {
    display: none;
  }
}

    Hope this helps :)

    Best regards,
    Nikko

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