Shrink header on scroll - Acme Themes

Shrink header on scroll

Best Premium and Free WordPress Themes › Forums › Medical Circle Pro › Shrink header on scroll

Tagged: ,

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • February 1, 2019 at 12:50 pm #44780
    fattyma
    Participant

    Hello,
    I’ve noticed that when navigating the website, the sticky header covers more page space than necessary. I’d like to find a way to shrink it once I scroll down.
    Currently I’ve set the image to:

    #navbar > div > div.navbar-header > a > img{
    max-width: 40%;
    }

    But when scrolling down the page, it should get to be 20% max in width. What is the right CSS and JS code to do this?
    Thank you

    February 2, 2019 at 3:09 pm #44850
    acmesupports
    Moderator

    Dear Fattyma,
    Our developer team shall observe your issue and reply you back.

    Best Regards!

    February 4, 2019 at 5:03 am #44964
    acmesupports
    Moderator

    Dear Fattyma,
    Could you please provide us with the URL of your site so that we can observe your issue?
    Best Regards!

    February 4, 2019 at 1:27 pm #45003
    fattyma
    Participant

    Hi,
    sure: http://www.ferrettinutrizionistacomo.it/

    Thank you

    February 5, 2019 at 5:16 am #45043
    acmesupports
    Moderator

    Dear Fattyma,
    Please add the given CSS code in Additional CSS
    Appearance->Customize->Additional CSS

                  
#navbar > div > div.navbar-header > a > img {
    width: 290px;
}

    Best Regards!

    February 5, 2019 at 7:18 am #45054
    fattyma
    Participant

    Hello,
    this is the code I had already added, as you can see in my first post. 🙂
    The problem with it is that it shrinks it permanently. I want it to get smaller when i scroll down the page and back to normal size when I get back to the top of the page.
    Just to give you an idea:https://www.w3schools.com/howto/howto_js_shrink_header_scroll.asp but applied to the image and, if possible, the menu font too.
    Thank you

    February 6, 2019 at 4:51 am #45145
    acmesupports
    Moderator

    Dear Fattyma,
    Please add the given CSS code in Additional CSS
    Appearance->Customize->Additional CSS

    .at-sticky#navbar > div > div.navbar-header > a > img {
    width: 140px;
}
.at-sticky .main-navigation a {
    font-size: 14px;
}
.at-sticky .site-description{
font-size:12px;
}

    Best Regards!

    February 6, 2019 at 8:54 am #45164
    fattyma
    Participant

    Works like a charm! Thank you

    February 7, 2019 at 5:01 am #45270
    acmesupports
    Moderator

    Dear Fattyma,
    You are Most Welcome 🙂
    Best Regards!

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