Changing header menu style from centered to inline when scrolling

Hi there

My website by default has the centered style header which I like the look of with a full background picture. However, when a user scrolls I would like for this to change to the inline version so it doesn’t take up a lot of the page. Is there a way to do this triggered by a user scrolling?

Thanks in advance

John

Dear John,

Could you please try to apply the following CSS code through the Simple Custom CSS plugin or child theme’s style.css?

@media only screen and (min-width:1025px){
  
  .float-header .header-wrap .col-md-4{
    width: 33.33333333%;
    text-align: left;
  }
  
  .float-header .header-wrap .col-md-8{
    width: 66.66666667%;
    text-align: right;
  }
  
}

If it doesn’t work, please share the link to your site.

Regards,
Kharis

Hi Kharis

This looks much better thank you. Is there a way of ensuring the logo and text is central from top to bottom? Additionally the transition is not very smooth when moving from one to the other - is there a way to improve this?

Hello there,

Please replace the code I suggested with this one:


@media only screen and (min-width:1025px){
  
  .float-header .header-wrap .col-md-4{
    width: 33.33333333%;
    text-align: left;
  }
  
  .float-header .header-wrap .col-md-8{
    width: 66.66666667%;
    text-align: right;
  }
  
  .float-header .header-wrap .col-md-4,
  .float-header .header-wrap .col-md-8{
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;    
  }  
  
  .float-header .header-wrap .container > .row {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
  }  
  
}

Regards,
Kharis