How to properly resize header on Mobile for my website?

Hello!

I was searching through this forum for some topics on how to change the mobile menu on my website.

I’ve come to the following CSS code:

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

.site-title {
font-size: 10px !important;
float: left !important;
}

.btn-menu {
float: right !important;
margin: 0 auto 0 !important;
}

.header-wrap .col-xs-12 {
width: 49% !important;
}

}

Which is pretty much what I want, although I’ve some things I would like to improve:

  1. Header Background is too big, I would like it to be about the same size as my logo height.

  2. I would like to vertically centralize my menu button

  3. Keep the Logo on the far left of the screen

My website is: https://pianobike.com.br/index

Can anyone help me out with that?

Hi,

You can modify the site-header on your mobile like you’ve described with this Custom CSS:

@media only screen and (max-width: 767px) {
.site-logo {
    float: left !important;
    margin-bottom: 0 !important;
}

.header-wrap .col-xs-12 {
    margin-bottom: 0 !important;
}

#masthead.site-header {
    padding: 0 !important;
}

.btn-menu {
    margin-top: 30px !important;
}

.float-header .btn-menu {
    margin-top: 14px !important;
}
}

Please add the above CSS to your Child Theme’s style.css or in case you haven’t setup a Child Theme already, then you can also add the CSS to wp-admin -> Appearance -> Customizer -> Additional CSS so you won’t loose the changes after Theme or WordPress updates.

Please let me know how it works.

Kind Regards,
Csaba