Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #597785

    Hello, I would like to change the position of the logo above about 30px, so that it overlapped the blue menu. So it was at the top of the page on the left.
    And while scrolling shrink to 50px as the entire menu without the blue menu.

    Just like in the picture below.

    Top page – height logo 80px

    Fixed menu when scrolling down – height logo 50px

    • This topic was modified 8 years, 7 months ago by osukaru.
    #599010

    Hey osukaru!

    Thanks for reaching out to us!

    I’m not understanding what you wish to achieve. When I visit your site the logo is already shrinking to 50px when scrolling and looks and behaves exactly as the screenshots you took showed. What size do you wish to change the logo to. Please let me know to clear up any confusion and provide screenshots showing the changes you want.

    Best regards,
    Jordan

    #603370

    Currently, the logo is under the header meta and has 50px.

    I would like to have a logo 80px and overlapped header meta.

    And shrank to 50px when scrolling without a meta header

    #603906

    Hi!

    The below CSS should get the logo height changed.

    .logo img {
      min-height: 80px;
      top: -30px;
    }

    To make the other changes as mentioned we need to take a closer look at the header setup in backend please create a temporary user with ‘administrator’ role and share in private content with permission to deactivate all plugins and add custom code if necessary to help you resolve this issue.

    Regards,
    Vinay

    #608489

    Here you are, I hope you find a solution

    #609442

    Hey!

    Add this in the Quick CSS field:

    .container.av-logo-container .logo {
        width: 211px !important;
        height: 88px !important;
        top: -30px;
    }

    Adjust the value as needed.

    Best regards,
    Ismael

    #609465

    Unfortunately logo when scrolling is not shrinking. It cut off about 30px from the top

    #610777

    Hey!

    Add this css code:

    .header-scrolled .container.av-logo-container .logo {
        width: 96px !important;
        height: 50px !important;
        top: 0px;
    }

    Best regards,
    Ismael

    #611153

    Hello,
    Unfortunately, after adding this code, I do not see changes.

    Regards,
    Osukaru

    #611363

    Hey!

    I added following code to bottom functions.php file in Appearance > Editor

    function avia_custom_logo_app(){
    ?>
    <script>
    jQuery(window).scroll(function(){
    if(jQuery(this).scrollTop() > 30) jQuery('.logo').addClass('logoop');
    if(jQuery(this).scrollTop() < 30) jQuery('.logo').removeClass('logoop');
    });
    </script>
    <?php
    }
    add_action('wp_footer', 'avia_custom_logo_app');

    and then changed the code Ismael posted to following one

    .container.av-logo-container .logo.logoop {
        width: 120px !important;
        height: 50px !important;
        top: 0px !important;
    }

    Changes made in functions.php file will be overwritten when you update the theme. To avoid that, please consider using a child theme

    Cheers!
    Yigit

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