-
AuthorPosts
-
March 14, 2016 at 3:41 pm #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, 9 months ago by osukaru.
March 16, 2016 at 4:44 pm #599010Hey 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,
JordanMarch 24, 2016 at 7:52 pm #603370Currently, 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 #603906Hi!
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,
VinayApril 5, 2016 at 7:44 pm #608489Here you are, I hope you find a solution
April 7, 2016 at 9:20 am #609442Hey!
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,
IsmaelApril 7, 2016 at 10:20 am #609465Unfortunately logo when scrolling is not shrinking. It cut off about 30px from the top
April 10, 2016 at 1:36 pm #610777Hey!
Add this css code:
.header-scrolled .container.av-logo-container .logo { width: 96px !important; height: 50px !important; top: 0px; }
Best regards,
IsmaelApril 11, 2016 at 11:59 am #611153Hello,
Unfortunately, after adding this code, I do not see changes.Regards,
OsukaruApril 11, 2016 at 3:33 pm #611363Hey!
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 -
AuthorPosts
- You must be logged in to reply to this topic.