Change logo size and position while scrolling down

Dear Athemes team,

I would like to have a dynamic header menu that will change the position and size of the logo while scroll down, without change the menu, you can better check this website as an example.

I will appreciate any tip that alow me to have a similar menu style, as I am testing with some basic CSS, but havent figure out how to make it better…

Please find my website link below
http://www.blueskyaction.net/

Best regards

Diego

Hello there,

Add this code into Appearance > Customize > Additional CSS in your site dashboard.


.float-header .header-wrap .col-md-4 a {
  display: inline-block;
  height: 40px;
  width: 150px;
  background-image: url('http://yoursite.com/path/to/your/new-logo.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: top left;
  border: 1px solid red;
}

.float-header .header-wrap .col-md-4 a img {
  display: none;  
}  

.float-header .container {
  width: 100%;
  padding-left: 5px;
  padding-right: 5px;
}

In the code above, replace


http://yoursite.com/path/to/your/new-logo.png

to your new image logo URL.

Regards,
Kharis

Thanks for your quick support @Kharis, but still need some changes in order to perform perfectly, please check my site

https://athemes.com/forums/user/kharisblank/

I would like the logo to move from avobe the menu to the side the menu bar, fully aligned with it.

Let me know how to adjust it

Best regards

Diego

Hi Diego,

Try adding this CSS code:


.site-header.float-header {
  padding: 5px 0;
}

.float-header .header-wrap .col-md-4 {
  width: 33.33333333% !important;
  text-align: left !important;
}

.float-header .header-wrap .col-md-8 {
  width: 66.66666667%;    
}  

Regards,
Kharis

Thanks a lot! it works perfect, well almost… just need one more adjustmen… how can I keep the menu items centered while scroll down, or reduce the bottom padding of the menu container. I would like also to eliminate the transparent effect on the bar.

Thanks again for your help

Cheers!

Diego

Hi Diego,

Please add this CSS code and do adjustment necessarily.


.site-header.float-header {
  background-color: #fff; 
  height: 55px;
} 

.float-header .header-wrap .col-md-4 {
  height: 35px;
  overflow: hidden;
}  
  
.float-header .mainnav {
  margin-top: 5px;
}

Regards,
Kharis

Transparent effect still working while scrolling down… please check the link

http://www.blueskyaction.net

Best regards

Diego

Replace these lines:


.site-header.float-header {
  background-color: #fff; 
  height: 55px;
} 

with:


.site-header.float-header {
  background-color: #fff !important; 
  height: 55px;
} 

If it fails, add this:


.site-header {
  background-color: #fff !important;
}

Regards,
Kharis

Many thanks Kharis,

It works perfectly now!

Best

Diego

You’re welcome, Diego.

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis