Mobile responsive menu

I’m trying to set some specific rules for my header, logo and Menu when my site is accessed via mobile.

my website: piano.bike

I want to do 2 things:

  1. Have the logo a little bit bigger and centered while the screen is not scrolled and the menu on the right side of the screen. And set the header to transparent

  2. Them, once it scrolls down I want the Logo to get smaller and move to the left side.

I was able to set the following codes, but it’s not working as I want it too:

    @media only screen and (max-width: 767px){

       .site-header {
         background-color: rgba(0,0,0,0) !important;
       }

    /* *Resize Logo when Scroll Down */
        #masthead.float-header .site-logo {
          float: left !important;
          filter: invert(100%);
          max-width: 55px;
          height: auto;
          margin-top: -10% 

    /* *Muda o tamanho do Floating header (header depois de scroll)  */
        #masthead.site-header.float-header {
          padding: 10% 0;
          height: 50px;
          background-color: rgba(0,0,0,0.8) !important;
       }

        #masthead.float-header .btn-menu {
         margin-bottom: 0;
         margin-top: 0
         color: black !important;
         float: right !important;
         margin-top: -25%  
    }
     

       .site-header {
         background-color: rgba(10,10,10,0.1);
         height: 50px
    }

    /* *Adiciona espaçamento no header subtitle text*/
       .text-slider .subtitle{
         margin-top: 10%;
         margin-bottom: 25%;
    }

    /* *Adiciona espaçamento no header maintitle text*/
       .text-slider .maintitle{
         margin-top: 5%;
    }

    }

CAn you help me out with this?

PS.: If you check my desktop version of the site you will be able to see exactly what I want to accomplish

Cheers!

And thanks for your help!

Hello there,

Try removing your custom code. But before doing so, back it up first – in case you want to roll it back. Use this code instead.

@media only screen and (max-width: 1024px) {
  body:not(.siteScrolled) .header-wrap .col-md-4, 
  body:not(.siteScrolled) .header-wrap .col-md-8,
  body:not(.siteScrolled) .header-wrap .btn-menu {
    width: 100%;
    text-align: center;
  }  
  .site-header .btn-menu,
  .header-wrap .col-md-8 a {
    -webkit-transition: unset;
    -moz-transition: unset;
    -ms-transition: unset;
    -o-transition: unset;
    transition: unset;  
  }
}

@media only screen and (max-width: 1024px) {
  .siteScrolled .site-header .col-sm-8.col-xs-12 {
    width: 66.66666667%;
  }
  .siteScrolled .site-header .col-sm-4.col-xs-12 {
    width: 33.33333333%;
    padding-left: 15px;
    padding-right: 15px
  }
  .siteScrolled .header-wrap,
  .siteScrolled .site-header .header-wrap .col-md-8 {
    text-align: left !important;
  }
  .siteScrolled .site-header .btn-menu {
    float: right;
  }
  .siteScrolled #mainnav-mobi {
    margin-top: 60px;
    margin-right: 15px;
    right: 0 !important;
  }
}

Ensure inline menu style is enabled (Appearance > Customize > Header area > Menu style).

Regards,
Kharis

Thank you a lot!!

Although, i tried to use this CSS and it, but, as i change the menu style to Inline it messes up my desktop version as it also uses CSS.

Is there a way to do the same thing keeping the menu style as centered?

Cherrs!!

PS.:
The CSS I use for the desktop version is the following:

/*

  • Define mudanças somente para o modo Desktop */

@media screen and (min-width: 767px){

/*

  • Fixa menu no topo */
    .col-md-8.col-sm-4.col-xs-12 {
    position: absolute !important;
    top: 50px;
    right: 15px;
    }

/*

  • Transparent Header Background - Home Page /
    .page-id-474 header#masthead {
    position: absolute !important;
    background-color: transparent;
    }
    /
  • Muda o Size da Logo na Home PAge */
    .page-id-474 .site-logo {
    max-height: 220px;
    filter: invert(100%);
    margin-top: 7%
    }

.site-header.float-header {
padding: 5px 0;
background-color: rgba(0,0,0,0.8) !important;
}

.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%;
}

.site-header.float-header {
height: 120px;
}

.float-header .header-wrap .col-md-4 {
height: 120px;
overflow: hidden;
}

.float-header .mainnav {
margin-top: 5px;
}

/* *Resize Logo when Scroll Down */
#masthead.float-header .site-logo {
max-height: 100px;
transition: 0.5s;
margin-bottom: 0;
margin-top: 0;
}

/* Adiciona espaçamento no header text/
.text-slider .subtitle{
margin-bottom: 3%;
margin-top: 7%
}

/* Adiciona espaçamento no header text/
.text-slider .maintitle{
margin-top: 8%;
}

}

Hello there,

Do you have a link to your site to share here, so I can have a look?

Regards,
Kharis

Yeah
For Sure