Digital Pro Coloured Button in Nav

[pelgen]

Hi Guys, I'm using the digital pro theme on my site and one of the examples in the showcase http://www.wpwebsitecoach.com/ has a coloured button in the nav with the text The WP Libary.

Any ideas how this is achieved?

Thanks in advance
Ed

http://www.wpwebsitecoach.com/

[Christoph]

Hi Ed,

you can add a custom css class to any menu item.
If you don't see the option, you have to select it under screen options: http://prntscr.com/c0hfdc

Afterwards, you can style that class to look like a button.

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[zoemorn]

Christoph (or other brave souls)
Just as you've suggested to Ed, likewise I've been trying to add a custom class, or otherwise style a particular nav item and been pulling my hair out. I can't get the custom class to work nor can i apparently find the right selector combo to style the item in question.

the selector :
.genesis-nav-menu a
is what colors the entire nave menu. the problem i'm having is doing a selective style on a particular nav item. after working for way too long using firebug/inspector to force a style change on one menu item (by adding a custom class as you suggest, but apparently its just not that easy.) trying to nail down the right selector combination makes me want to light my puter on fire.

following these instructions then the CSS that should work would be like this:

.genesis-nav-menu li.CTA {pink!important;} where "CTA" is the custom class that i've set in the wordpress menu for the one i desire for special stying. but it doesnt work and seems to be ignored.

the nav item in question has an identifying selector menu-item-1860 as an ID and class as well, which i've tried to blend in for specificity to no avail.
example HTML from the site (just removed links):
<ul id="menu-main" class="menu genesis-nav-menu menu-primary js-superfish sf-js-enabled sf-arrows" style="touch-action: pan-y;"><li id="menu-item-1860" class="CTA menu-item menu-item-type-post_type menu-item-object-page menu-item-1860"><span itemprop="name">You’re Invited!</span>

i, and my hair, would love for someone to shed light on exactly how i should selectively style the menu-item-1860 nav link. Educated me oh wise ones, and a coffee will be on the way! 🙂

[Christoph]

Hi,

can you share a link to the site in question?

Please use only lower case for your classes.

You might have to do something like:

.genesis-nav-menu .cta.menu-item

and

.genesis-nav-menu .cta.menu-item:hover a

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[zoemorn]

here's the site i'm trying to over-ride styling on the first nav menu item "you're invited" to bring attention to it, like a call to action.
thanks for taking a stab at it. i enjoy putting together sites except for when CSS selector sniffing becomes a maddening frustratingly heinous process of beating head to wall. i even install the addon for mozilla 'css selectors' which is supposed to report what selector is in effect, but i've not figured out how to truly isolate what to use.

i tried your suggestion, and switched to lower case class: .genesis-nav-menu .cta.menu-item to no avail.

suggestions appreciated both in response to this issue and in how to become less newbie-ish at isolating the proper selectors for styling over-rides.

[zoemorn]

Wow. So i discovered an error in my css and the following work, (i wonder how many other related statements might also work if not for my error of forgetting the "color:"

#menu-item-1860 a {color:pink!important;} --- the menu-item-1860 is an identifier for the exact menu so this is cool that this works.
.genesis-nav-menu li.cta a {color:pink!important;} this shows that the custom class works when combined with the genesis-nav-menu and li.customclassname

thanks Christoph, apparently just talking to you causes discovery of solution LOL i must do that more often!
🙂

if one method is preferable over the other, i'd welcome elaboration about this.

[Christoph]

Must be my coaching background 😉

Realistically, it's fine the way you've done it.
Best practice would be using a class.
Styling the id can be problematic because it will only work for this one specific element (hence id).
(If you decide to use a different element as cta, you have to look up its id and change the style.css.
If you style with a class, you can simply add the class to the new element)

You can reuse classes, you can't reuse ids.
This becomes more obvious when you think of styling all cta buttons on your website / front-page the same way.
If you are using ids, you have to write a long list of ids in style.css to cover all your cta buttons.
If you are using classes, you simply add the class to your button and the same css rule will be applied.

Just as a little example, I have applied the cta class to the second menu item and styled the class:
http://prntscr.com/cd5ggl

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[zoemorn]

Thanks, ya,
the following is my perspective as a non-expert who's lightly dabbled in setting up wordpress sites, tailoring, but still very much the novice.
i'm familiar with ID's vs Classes, i do struggle with specificity rules and some of that which i know theres available information about the topic.

where i struggle most, is with isolating the right selector combination to make the style change desired. I'll use firebug and/or chrome's Inspector and think i'm grabbing the right selectors but the complex nature of wordpress and plugins and themes can make getting that combination a real hunt. And then there are the factors of how wordpress reads the various stylesheets involved (specificity rules etc) which means that one could have the 'right' selectors but due to specificity and precedence and 'when' the rule is being read in relation to the rules you want to override - having the right combination wont matter without doing something outside the style sheet to make it take effect.

thanks again, you'll find a coffee paid for, enjoy.
🙂

[Author]

Posts