Menu Background color

[Cairy]

Hi,

is it possible to set a full width background for the menu nav items?

Regards!

[Kieran_SQ]

Hi,

You can set a menu background image by going to WP Admin > Theme Options > Styling Options > Header > Scroll to ‘Background Image’ and selecting your desired styling options and image (see screenshot).

Thanks,

Kieran

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Custom development requests can be sent to dev@seventhqueen.com, one of the development team will be happy to discuss your needs.

Attachments:

You must be logged in to view attached files.

[Cairy]

Hi Kieran, thanks for your reply.
It should only affect the navbar, not the complete header section.

Attachments:

You must be logged in to view attached files.

[Kieran_SQ]

Hi,

The highlighted area in your screenshot is not where the container ends so I am not sure you’ll be able to achieve what you’re after – here are two options to add a background image to this general area.

Option 1: Background image for the menu items only

COPY CODE

.primary-menu.collapse.navbar-collapse.nav-collapse {
    background-image: url(http://domain.com/wp-content/uploads/2018/03/your_image.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

Option 2: Background image for the menu container

COPY CODE

.menus-wrap {
    background-image: url(http://domain.com/wp-content/uploads/2018/03/your_image.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Custom development requests can be sent to dev@seventhqueen.com, one of the development team will be happy to discuss your needs.

[Cairy]

Hi, thanks again. Sorry for the missunderstanding, I didnt mean a image, i want to add a color.
Regards

[Kieran_SQ]

Hi,

My apologies, please use the below CSS for color

Option 1: Background color for the menu items only

COPY CODE

.primary-menu.collapse.navbar-collapse.nav-collapse {
    background-color:#000000;
}

Option 2: Background color for the menu container

COPY CODE

.menus-wrap {
    background-color:#000000;
}

Change the #000000 to your desired color and clear all of your caches to see the changes on the front-end.

Thanks,

Kieran

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Custom development requests can be sent to dev@seventhqueen.com, one of the development team will be happy to discuss your needs.

[Cairy]

Tried this, but it isnt full width :/

[Kieran_SQ]

Hi,

As I said in my above reply, as per your screenshot, that area does not have a full width container for the menu only and therefore it is not possible to style in the way you showed in your screenshot.

You can of course set the background color for the whole header in Theme Options > Styling Options > Header > Background Color but this will fill in the whole area of the header and not just the menu.

Thanks,

Kieran

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Custom development requests can be sent to dev@seventhqueen.com, one of the development team will be happy to discuss your needs.

[Cairy]

Ok, thanks a lot!

[Author]

Posts