Black header on mobile site

Hello,

I’ve recently finished website www.nzauto.lt. Everything is ok, but on mobile site there is a black header, which I don’t need. I’ve tried a lot of css codes, which I found here, but none of them working correct on my site. Is there any way that logo on mobile site would be on the left side and menu sign on the right side? Both of them should be on the main header picture without black header.

Thank you,
Donatas

Hi,

You can change the black background color of the static mobile header with this Custom CSS:

@media only screen and (max-width: 1024px) {
.site-header {
    background-color: red !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

Thank you for fast a answer. But I don’t need to change color of it. I want to remove it and place logo on the right side of main picture and menu sign on the right side. Is it possible to do it with a custom css?

mobile site example http://blomstra.de/

Hi,

You can do position the header above the picture and move the logo to the left and the menu button on the right with this Custom CSS:

@media only screen and (max-width: 1024px) {
.site-header.fixed {
    position: absolute !important;
    background: transparent !important;
}

.site-logo {
    display: inline-block !important;
    float: left !important;
}

.header-wrap .col-md-8, .header-wrap .col-xs-12 {
    width: 50% !important;
}

.btn-menu {
    float: right !important;
    margin-top: 25px !important;
}
}

Please let me know how it works.

Kind Regards,
Csaba

Thank you! Code works perfect.

Donatas

Hi,

Great! You’re most welcome! If you need help with anything else, please open a new topic.

Have a nice day!

Kind Regards,
Csaba