How to make header logo smaller when scrolling down?

[oswaldocerdan]

I have a fixed header in my website and I want to make the logo smaller when the user scrolls down so the header doesn't use as much space in the window. How can I do that? Also is there a way to just don't show it? Here's my website: https://www.rafaelpalacios.net/about/testimonials/ Thank you!

[Steve]

Hello user, Please put following code in, wp-admin>WPLMS>Footer>Google Analytics <script> window.onscroll = function() {scrollFunction()}; function scrollFunction() { if (document.body.scrollTop > 10 || document.documentElement.scrollTop > 10) { document.getElementById("logo").children[0].children[0].style.height = "70px"; document.getElementById("logo").children[0].children[0].style.width = "70px"; } else { document.getElementById("logo").children[0].children[0].style.height = "140px"; document.getElementById("logo").children[0].children[0].style.width = "140px"; } } </script> Thank you

[oswaldocerdan]

Sorry for taking so long to answer. Thank you so much Steve, the resizing is working properly, but is there a way to align center the whole menu? https://www.rafaelpalacios.net/about/testimonials/ Right now it's aligned to the left and it doesn't look very good. How do I change this? I want the logo and menu to be centered in the middle.   Thank you for the support!

[Diana]

@oswaldocerdan We have different header styles available and you can choose from. We have that header style as well which will center the menu items(standard center) Go to wp-admin > appearance > customize > header change from here

[oswaldocerdan]

I notice that, however when using the Standard Center configuration, the logo goes above the menu, and the top bar is also showing. Can't I align the menu I have to the middle? Or using the standard center menu, move the logo to the left of the menu, and to not display the top bar? Thank you!

[Diana]

@oswaldocerdan If you want to hide the topbar while using standard center header style. I can do that by custom CSS. After selecting the standard header style, just share the site URL here. I will share site specific CSS with you

[oswaldocerdan]

Thank you Diana, I got it to work with standard centered, and I also removed the topbar through CSS   Is there a way to move the logo to the left of the menu? Thank you so much

[Diana]

no that's not possible using custom css And we don't have any header style in which this style present So if you want this style you have to customize the header style using Blank Child Theme

[oswaldocerdan]

Thank you Diana, I appreciate the help. I got this working, so we can close the topic now.

[Diana]

@oswaldocerdan Thank you for confirming. Closing the topic :)

[Author]

Posts