Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • March 14, 2016 at 3:41 pm #597785
    osukaru

    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, 8 months ago by osukaru.
    March 16, 2016 at 4:44 pm #599010
    Jordan

    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

    March 24, 2016 at 7:52 pm #603370
    osukaru

    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

    March 28, 2016 at 3:19 pm #603906
    Vinay

    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

    April 5, 2016 at 7:44 pm #608489
    osukaru

    Here you are, I hope you find a solution

    April 7, 2016 at 9:20 am #609442
    Ismael

    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

    April 7, 2016 at 10:20 am #609465
    osukaru

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

    April 10, 2016 at 1:36 pm #610777
    Ismael

    Hey!

    Add this css code:

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

    Best regards,
    Ismael

    April 11, 2016 at 11:59 am #611153
    osukaru

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

    Regards,
    Osukaru

    April 11, 2016 at 3:33 pm #611363
    Yigit

    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

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