After logo resized, sticky header not working.

Shapely
1

I applied the following code to resized my logo in desktop:

@media (min-width:960px) 
{ img.logo {max-height: 100%;} 
#site-navigation .module.left,#page div.nav-bar a {height: 100px;}
#menu {margin-top: 25px;}
.search-widget-handle > .search {margin-top: 25px;}
}

However, after the resize, the header doesn’t stick to the page when I scrolled down. Any solution for this?

My uploaded image size for the logo is 563px X 250px.

And much appreciated if you can share how to apply the exact effect of this forum header and logo to shapely theme. This works perfectly at various device.

Thanks and good day.

2

Hi @kais,

I hope you are well today and thank you for your question.

I tested it on my test site by using your shared code and it’s working fine for me.

Could you please share me your site URL where it is not working so that i can troubleshoot it?

Kind Regards,
Movin

3

My site is : www.sellmyproperty.my

It works fine with mobile device. But then in desktop version, the header together with the logo is not sticked when I scrolled down.

And how can I achieved the same effect of this forum header? I would like to have the effect that the logo will auto resize and stick with the header when I scroll down. Thanks and good day.

4
It works fine with mobile device. But then in desktop version, the header together with the logo is not sticked when I scrolled down.

You can try achieving this by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Customize -> Shapely Options -> Other

header#masthead {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 99999;
}
And how can I achieved the same effect of this forum header? I would like to have the effect that the logo will auto resize and stick with the header when I scroll down.

You have to develop custom code to achieve this.