Sticky Menu Background Image

Hi,

I would like to have an image on the sticky menu rather than having a background color… How can I add an image as sticky menu background?

Thanks

Hi,

Please post a link to your website, so I can give you a working solution to add a background image to your sticky menu’s background. Do you want to add it only to the sticky menu, not to the regular menu right?

Best Regards,
Csaba

Hi Csaba,

Thank you for your kind reply.

Here is the wordpress page I am working on: http://www.platangroup.com/pltn/

Here is our current website:http://platanusa.com/

If you look at our current website, there is a sticky header image with menu. I would like to build the same thing…

Thank you again,

Hi,

You can set a background-image to your menu with this Custom CSS:

.site-header.fixed {
    background-image: url(your-image-url) !important;
}

.site-header.float-header {
    background-image: url(your-image-url) !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,

Thank you for your help.

I have added the CSS to the Additional CSS section. But the sticky header image`s width is not covering the whole page. Plus, on the mobile version, there comes something different.

Could you pls have a look at that?

Really appreciate,

Thanks

Hi,

Please add this Custom CSS instead and let me know how it works then:

.site-header.fixed {
    background-image: url(your-image-url) !important;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.site-header.float-header {
    background-image: url(your-image-url) !important;
}

Best Regards,
Csaba

Hi again Csaba,

The last CSS worked well, but this time there is another problem. Logo and navigation menu stays on the red side of the header, but I want to move them up on the black side. I couldn`t figure out which CSS I need to change.

http://www.platangroup.com/pltn/

Could you pls have a look at?

Thanks

Hi,

For that you must modify the background image you’ve set for that header, so where the logo and navigation is you must add the black area in the image.

Best Regards,
Csaba