How to edit the colour of the Menu and of one specific page

Hi,

I would like to change the colour of the logo text and menu only for one specific page, from white to black. How could I do that?

Thank you,
Marina.

HI Marina,

You can add a class to the menu item then add a custom CSS to set a background color to that menu item.

To do this, please go to WP Admin > Appearance > Menus then click on the Screen Options link on the top right part of the page.

Once click, you should see a collapsed panel. Make sure that CSS Classes is active under Show advanced menu properties.

Go to your menu items and you should see the CSS Classes (optional) field under the menu item settings:

Add a class to the menu item that you want to target. In this example, we will use the class highlight to the menu item.

Once the menu is saved, go to X > Theme Options > CSS then add this code:

.x-navbar .desktop .x-nav>li.highlight {
    background-color: #fff;
}

Feel free to change the value in the code above.

Hope this helps.

Hi,

The page I want to change it is not on my menu, how can I do it then.
I will be this one:

Also how can I make that the title goes lower, as now it is mixing with the title.

Thank you,
Marina.

Hello Marina,

Thank you for the clarifications.

To resolve your issue, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

.page-id-1161  .masthead {
    position: relative;
}

.page-id-1161 .x-brand.text,
.page-id-1161 .x-navbar .desktop .x-nav > li > a, 
.page-id-1161 .x-navbar .desktop .sub-menu li > a, 
.page-id-1161 .x-navbar .mobile .x-nav li a {
    color: black;
}

.page-id-1161 is the body class where it contains the ID of the page. To get the page ID, please check out this article. You might want to apply the same in some other page.

Hope this helps.

Hi,

It did not work. It still looks like this:

What can I do?

Also, I would like to ask how could I delete the title of the discovering your own sexuality that appears in this page.

Thank you,
Marina.

Hi Marina,

Since you are trying to change the colors of the header on specific pages, what you can do is to add a common value to the Body CSS Class(es) field of those pages then update the code given by RueNel to:

.custom-header .masthead {
    position: relative;
}

.custom-header .x-brand.text,
.custom-header .x-navbar .desktop .x-nav > li > a, 
.custom-header .x-navbar .desktop .sub-menu li > a, 
.custom-header .x-navbar .mobile .x-nav li a {
    color: black;
}

The code above assumes that the value you add to the specific pages is custom-header. So all you need to do if you want to apply the same format of the header area to the page is to add custom-header to the Body CSS Class(es) field.

To remove the page title of the page, please see the screenshot below:

Hope this helps.

Hi,

It did not work neither with that option, I send you the link below. What can I do?

Thank you,
Marina.

Hi Marina,

Please follow this steps thoroughly and your header on those pages you mentioned (and possible other secondary pages) should look fine.

First, please navigate to Pro > Themes Options > CSS and find this CSS block

.masthead {
    position: absolute;
    width: 100%;
}

That is the custom CSS code that mess up your header on those secondary pages. So we need to update that, so it wont affect those secondary pages. Please update that to this:

body:not(.page-template-default) .masthead {
    position: absolute;
    width: 100%;
}

The second step is to make the logo text “IN A WOMAN’S BODY” and menu text a black color. You can do that by adding this CSS to Pro > Themes Options > CSS

body.page-template-default .x-brand.text,
body.page-template-default .x-navbar .desktop .x-nav > li > a {
   color: #000;
}
/*for hover*/
body.page-template-default .x-navbar .desktop .x-nav > li > a:hover {
	color: red;
}

As you can see I’ve also added a for hover color red so the menu text does not blend with the white background on hover. Feel free to change that color value.

Third is to hide that lardmark-header (“Workshop: discovering your sexuality”), you can do that by adding this to Pro > Themes Options > CSS

/*hide landmark on default template*/
body.page-template-default .x-header-landmark {
	display: none;
}

Lastly, the huge gap above your headline is the headline element’s top margin, you can get rid of that by applying a CLASS mtn to the headline element. You can learn more about this Utility Classes here.

Remember to clear all your caching plugins and browser’s cache after this changes.

Please be reminded that this is now in the realm of customization, and we cannot provide further customization support from here.

Thanks,

Thank you SO much! This was really helpful.

Best regards,
Marina.

We are delighted to assist you with this.

Cheers!

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.