How to remove black area on mobile device header menu - Sydney

This is my link - http://webdesigners.store/enquire/
Check that on a mobile device
can you see how there is lots of black space at the top (Header)
I want to have it removed could you please help me
i still want the 3 bars (menu) but all that black i want gone

is this possible thanks

awaiting your reply

Hi,

You can make the black area transparent and only show the menu bars and also you have to make the button menu black to see on the white background with this Custom CSS:

@media only screen and (max-width: 1024px) {
.site-header {
    background-color: transparent;
    padding-top: 0 !important;
}

.site-header.fixed {
    position: absolute !important;
}

.btn-menu {
    color: black !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.

Best Regards,
Csaba

I inputed the code that you told me , it works as i wanted it to but it seems a bit buggy on my end. The menu keep glitching, going above the header image and then below it.
Can you check on your end to see if the same thing is happening to you.
If so how can i fix this.
Thank you/
Could you please also resolve my other issue i posted another topic.
I want the text to basically be right under the header image, http://webdesigners.store/contact/
but there is lots of white space i need to get rid of it on all pages
also i want to reduce the width so that the text isnt so spread out on the page it is more centred if you get what i mean?
Thank you!

Hi,

That’s happening when the content loads up completely, so after loading the header will be positioned in place.

Best Regards,
Csaba

Hello! I have a similar issue with my menu bar not appearing on a mobile platform. Instead, it shows a box or garbled numbers in different platforms. My website URL is katherinelachow.com. Please help!!

Best,
Katherine

Hi @kc1015,

Please try this Custom CSS to fix the missing menu icon issue:

.btn-menu {
    font-family: "FontAwesome" !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.

Best Regards,
Csaba

Hi @Csaba,

Thanks so much for the help! It worked on the main menu, but the sub-menu under “Wheelhouse” still shows an empty box image. Is there a fix for this one too? Let me know and appreciate your help!

  • Katherine

Hi,

I see the arrow down icon after the “Wheelhouse” have you been able to resolve this?

Best Regards,
Csaba

Hello there. I’ve used the code to remove the black but the menu now sits over the writing of the home screen when mobile is up right. It’s fine when holding phone side ways. Any help would be appreciated.

Sorry forgot this http://tinterwebsites.co.uk/ many thanks

Hi,

You can fix that issue with this Custom CSS:

@media only screen and (max-width: 768px) {
.btn-menu {
    margin-top: -60px;
}
}

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.

Best Regards,
Csaba

Works brilliantly thank you.

Hi,

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

Have a nice day!

Kind Regards,
Csaba