Dynamik - Styling of single Nav item

As I only do my own websites and having been enabled by WYSIWYG editors, I lack some of these basic code knowledge, sorry for the newbie question!

I have a custom menu nav set up in the Header Right area.
It only has three menu items, which I have styled in the "Header Nav" section of the Dynamik menu.
I'd like to further style just one of them, the far right item only. (adding a background colour and changing the text colour, to give it a call to action button vibe).

This is where I'm at:

  • I need to add a new CSS Class to the menu item (visible by turning on the option in Screen Options of the Menu page).

  • The CSS I want to add to the item is:
    background: #0089BC;
    color: #FFFFFF;

  • When I "inspect" the menu item via the browser it shows the following:
    <li id="menu-item-3797" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3797"><a href="https://houseofuniforms.com.au/contact/" itemprop="url"><span itemprop="name">Get Started</span></a></li>

So, my question is where/how do I pull it altogether from here?

  • Where do I go to create the custom css?
  • How do I name it?
    -Or is there a much better way to do this sort of thing?

At the moment, I'm running with a "faux" menu built in Beaver Builder which has the basic look I'm after. (done as temp measure). Don't need the rounded corners though.
https://houseofuniforms.com.au/

This is the actual header that I'm wanting to style the last "Get Started" menu item of:
https://houseofuniforms.com.au/why-your-business-should-be-gifting-these-holidays/

@drmoshen

You can give it whatever class name you like, such as "get-started-item" or something like that, but you can also just use the already assigned class based on menu item id. So in your case that Get Started menu item has a unique class of "menu-item-3797". So you could use that to style only that menu item like so:

.site-header .genesis-nav-menu .menu-item-3797 a {
    background: #0089BC;
    color: #FFFFFF;
}

Note that the general menu items are styled with this element structure:

.site-header .genesis-nav-menu a {
    
}

So I simply added the .menu-item-3797 class right before the "a" element as that class is assigned to the "li" element that is the parent element of the "a" element. In other words that's just the order of elements, from .site-header to .genesis-nav-menu to .menu-item-3797 to "a".

And then if you wanted to give hover styles to that menu item you would just do this (changing the styles, of course):

.site-header .genesis-nav-menu .menu-item-3797 a:hover {
    background: #0089BC;
    color: #FFFFFF;
}

As far as where to add these Custom Styles, you can do that either in Dynamik Custom > Custom CSS, or if you're working with a Custom Dynamik Skin then you could add it to that Skin's {CSS} (see HERE).

Awesome. Thanks for the help. Greatly appreciated.

You're very welcome. 🙂

Log in to reply