Menu bar on woocommerce

Hello,

I’m facing a problem with my menu bar on woocommerce, as the pages are white we can’t see my menu so I’d like to have a black bar on the menu. Same as I manage to do on following page :
https://www.msproductions.ch/categorie-produit/occasion/eclairage/

But when I’m trying to have the same on product page, I can’t, I didn’t find the good CSS code, so I did it by adding a black rectangle on my product page, but this doesn’t fit correctly :

And then I need to have this done also on my cart / checkout / my account / validation pages.

Thanks for your help

Hello,

First thanks for using our Sydney Pro theme!

Please try the following steps below:

  1. Add the given custom CSS code below as the last line at Appearance > Customize > Additional CSS:

    body.woocommerce .sydney-hero-area .header-image,
    body.woocommerce .sydney-hero-area .header-image .overlay {
        background: transparent !important;
    }

    body.woocommerce .site-header,
    body.woocommerce-page .site-header {
    	background-color: #000 !important;
    }

    body.woocommerce .content-wrapper {
    	margin-top: 15px;
    }

  1. I notice the mobile hamburguer button is not being shown at tablets screens. That’s because the below code you have in the Appearance > Customize > Additional CSS. Locate the code below:

    .btn-menu {
        float: right;
        margin-right: 10px;
        margin-top: -68px;
    }

And change to:


    @media only screen and (max-width: 767px) {
        .btn-menu {
            float: right;
            margin-right: 10px;
            margin-top: -68px;
        }
    }

We hope this helps!

Please try that and let us know if you need further assistance.

Kind Regards,

Rodrigo.

aThemes Support

Hello Rodrigo, you are great this works perfectly. Thank you :kissing_smiling_eyes:

Hello,

You are welcome!

Let us know if you need any further assistance.

Kind Regards,

Rodrigo.

aThemes Support

Hi Rodrigo, I’m facing a problem now with the mobile device, I have got a very big white space between my menu bar and the content of the page (for ex on : https://www.msproductions.ch/categorie-produit/occasion/)

I had too put a margin top of 115px otherwise on computer my content was too high. But even with a 10px this white space is far too big on mobile device. How can I fix this ???

Thanks for your help, Best Regards,
Tina

Hello Tina,

Please try adding the given custom CSS code below at Appearance > Customize > Additional CSS:

@media only screen and (max-width: 1024px) {
    body.woocommerce.archive .sydney-hero-area .header-image {
        height: 0px!important;
    }
}

We hope this helps!

Please try that and let us know if you need further assistance.

Kind Regards,

Rodrigo.

aThemes Support

This is not working ;-(

Hello Tina,

You are fast haha! This code is from my first reply where I posted this wrong code, but after some seconds I’ve edited the post and fixed the code. Please try again with the provided (edited) code of my last reply for you.

Hope this helps!

Kind Regards,

Rodrigo.

aThemes Support

This is lot better, still a big white space but better ! Do you think we can improve it a bit more ?

Hello Tina,

Sure!

Please try adding this new code:

@media only screen and (max-width: 1024px) {
	body.woocommerce .content-wrapper {
		margin-top: 0px !important;
	}
}

Hope this helps!

Kind Regards,

Rodrigo.

aThemes Support

You are great. This works perfectly. THANKSSSS :grinning:

Hello,

You are welcome! :slight_smile:

If you need any further assistance, feel free to contact us.

Kind Regards,

Rodrigo.

aThemes Support

1 Like