How can I style each nav menu item to have different background and interaction colors?

Support
#1

Is there an easy way to change the background color and hover colors for EACH menu item? It seems I can only change the entire menu at once.

For example, I’d like About Us, Examples, and Order to each have different “base” and “interaction” colors. Is there any way to do this? I’d also like to define the boxes around each menu item to have a certain common width, so that they are symmetrical when filled with different colors (right now, you can see that Order is noticeably narrower than the other two. Possible?

#2

Hi Ben,

The element settings on menu doesn’t offer those options.

It is still possible though using custom CSS. Check the following guide:

For example, about us link has this ID #menu-item-88. On this element Customize Tab > Element CSS, we can target the about us link menu like this

$el #menu-item-88 a {
    background: red;
}
$el #menu-item-88 a:hover {
    background: green;
}

Do the the same for other menu. Use the guide to check the correct selector. Thank you.

1 Like
#3

Hi Ben,

The element settings on menu doesn’t offer those options.

It is still possible though using custom CSS. Check the following guide:

For example, about us link has this ID #menu-item-88. On this element Customize Tab > Element CSS, we can target the about us link menu like this

$el #menu-item-88 a {
    background: red;
}
$el #menu-item-88 a:hover {
    background: green;
}

Do the the same for other menu. Use the guide to check the correct selector. Thank you.

#4

Thanks, this mostly worked. I’m trying to make my header and footer both have navigation areas that are exactly the same. As far as I can tell, I’ve set everything equally. In the PRO interface, it looks great. But on the live site, the navigation in the footer has no colors.

I have two follow-up questions:

  1. How do I get the footer to look exactly like the header? It seems not only are the colors not showing on the Footer, the Footer menu items are showing up narrower. Again, as far as I can tell in the Pro interface, I have everything in the Header and Footer set the same.

  2. How do I style the nav menus so that the color behind the nav text is different if I’m on the page where that navigation leads to? Example: I want the ORDER “button” on the navbar to be a different color when I’m on the Order page at mysite.com/order/

I will attach a secure message so you can take a look. Thanks!

Red lines on the screenshot are not from HTML code, I added them from a graphics program to show the misalignment of the menu items.

#5

Hi Ben,

  1. Sorry about the footer menu not applying the background-color Element CSS, it seems there is a conflict if you have the same menu at the same time. So I did a different approach.

First, I remove (commented out) the Element CSS given previously.
Then I applied a unique class for each of your menu item


Then I use those classes to formulate a custom CSS

.xyz-aboutus {background-color: #ABC6DE; }
.xyz-examples {background-color: #AC9BC5;}
.xyz-order {background-color: #ADC5B1;}

Take a look at Theme Options > CSS I’ve added it there.

And that automatically applied on both header and footer navigation since they’re both the same menu.

  1. The option that you’re looking for is the Top links’ Interaction color

This is the background color of your menu item when hovered and if it is the current/active page.

That is because of the custom width you applied on the menu items together with the previous given element CSS, I have commented those out now too so your menu is aligned.


Hope it helps,
Happy holidays,

1 Like
#6

This is wonderful, thanks. Best support ever!

I have a few more questions:

  1. Is there any way to simplify the CSS and JS that gets loaded with my site? I’ve read here on the Themeco website that it has all been optimized, but I’m trying to use Pro to create a super simple site and I’m seeing it load lots of “extra” code. Is there an easy way to trim the CSS so that it only contains the code that is relevant to my design?

I guess what I’d like to see is for Pro to “dynamically generate” the CSS, based on what elements / options / etc that I’m actually using on the site once I “Save” everything.

Is this possible?

Another thought: Maybe this is what a “Child Theme” is for? I don’t know, I’m new to Wordpress.

Generally I try to keep an entire page to 500KB or less of all resources, but when the Pro theme loads nearly 400 KB of CSS and JS files, that doesn’t leave much left for my own site content / graphics.

For example, integrity-light.css is 173 KB. That’s like an encyclopedia of CSS :slight_smile:

  1. How do I turn off the web fonts (woff2 files that are loaded) ? I went to Theme Options - Typography, but it only allows me to set a default “Google” font. How do I select a normal default font like Helvetica, sans-serif, etc? I don’t want my site to load custom font files.

I tried turning Font Manager ON, which says it will give me font options in each individual page element but when I go to for example Column 1 on my Main Page, there’s only an option for Font Size, not Font Face. After turning on Font Manager I see that the font has changed on the site from the Google Font to a serif (Times New Roman?) but I can’t figure out where to change this to Helvetica or something else. I’ve looked in Section 1, Row 2, Column 1… nothing.

I changed font to Helvetica and clicked Save Fonts, but it still displays as a serif font on the site.

  1. When I check the site in the Web Inspector in Safari (developer mode), I get 2 errors:

[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (x.js.map, line 0)
[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (cs.fa34ec9.js.map, line 0)

Both point to files in the /pro/ directory structure.

Any idea what’s going on here?

#7

One more question. I’m really trying to learn this by myself, but honestly I find the Knowledge Base to be confusing as there seems to be no specific section for Pro articles… and some of the information doesn’t match what I see.

For instance, this article:

Do Global Blocks come with any extra markup?

Global Blocks will always be wrapped in a Section, Row, and Column. Because Global Blocks need to support whole sections, this means that all of the markup that comes with a Section is always output around your content. If you wish to create a Global Block that is just a singular element as mentioned previously, you will need to make sure to remove all of the spacing (e.g. margins, padding, et cetera) that comes with these containing elements. You can quickly remove all spacing from containing elements by clicking the Remove Spacing button at the bottom of your Sections in the Layout pane.

I don’t see this button anywhere, although the other screenshots in the article look okay.

I’m really, really confused about how to find documentation and tutorials that can help me learn all the features of Pro. I know I can figure it out on my own eventually, but I don’t want to make any “mistakes” in the beginning which will make it more difficult for me to expand my site in the future (e.g. I should probably be using Global Blocks and Templates).

Right now my site is super simple with only 4 pages (which I could easily hand code without Wordpress) but the reason I am investing in WP and Pro is that I eventually expect to expand the site to include dozens of pages and a web store (WooCommerce) over the next 1-2 years.

#8

Hello Ben,

Thanks for writing in!

1.) The theme needs the JS and CSS files to display the layouts, elements and other features. You cannot simply unload certain parts of it. The integrity-light.css still needs the JS and CSS files to display the layouts and other features because the integrity-light.css file is only the unique styling for the Integrity stack. The base style and features were still in the main JS and CSS file of theme.

2.) Once you enable the Font Manager, select the Font family for your Headings and the Body Content in X > Theme Options > Typography. If you want to use a different font for a particular element, you will need to edit the page or post, click on the element like text element or headline element. You should be able to change the font family in the Text Format option. If you don’t see those options, you need to turn on the Advanced Mode by going to the Settings > Preferences > Advanced Mode

Only the font that is assigned to the heading, body content or particular element will be loaded on the page even if you have several other fonts in the font manager.

3.) Missing x.js.map:
You may ignore those errors as it is just the missing source maps that Safari will always look for. It appears when you open your browser developer tools and the source map is there to help with debugging. It can be turned off in some browser’s developer tools but I guess, not possible in Safari browser. It will always display in Safari’s developer tool’s console.

You’ll need the source map if you’ll debug a site, but you can’t do that on our theme and builder. Should be done by our developers only, plus they tend to be permanent in its current version and shouldn’t be customized.

4.) You will find this set of menu when you go to Pro > Global Blocks. We apologize for a not so organized knowledge base. We are still sorting this out. We will be launching our new website along with our updated documentation in the nezt few weeks from now.

Hope this helps.

1 Like
#9

Three more questions:

  1. Regarding the Global Blocks, I’m still not seeing a “Remove Spacing” button in the Layouts area. Can you give me some screenshots that show how to find this option? I followed the tutorial exactly but I don’t see it, which makes me think I’m not understanding something. Either that, or this option no longer exists in Pro?

  2. When I turn off Javascript and view my site, even some CSS elements don’t work, like changing color when I hover my mouse over the menu items. But this is just a direct CSS feature that should not require javascript so I don’t understand why it doesn’t work with Javascript off. Is this a bug?

  3. Is Pro designed to work directly with CSS Hero? I see that X is officially supported, but I cannot find anything about Pro + CSS Hero.

#10

Hi Ben,

1.) Since the update, REMOVE SPACING is available now when you right click on the Section area. See this screencast: https://screencast-o-matic.com/watch/cqlvikvrOb

2.) This is not a bug. By default, main features uses javascript for most functionality. It is part of the core design. Please don’t turn it off.

3.) All supported plugins of the theme are listed here: https://theme.co/apex/forum/t/troubleshooting-version-compatibility/195. Any other plugins that is not there is not offfcially supported.

#11

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