[Resolved] styling a menu item – make it stand out

Home Forums Support styling a menu item – make it stand out

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #128558
    Nam Nguyen

    Hi Support,
    I would like to make a menu item standout. For example, along the nav menu items such as Home, About Us, etc, etc, I’d like to do the followings:

    1) add a menu item, ie. Parties, and be able to style it with a different type of font, font size, background color.

    – Please tell me how I can do this? I’ve done similar thing with another theme by giving it a css class, and style it. Is this the way to do it with this theme?
    – Please give me some pointers.

    2) How can I add an image to a menu item?

    – Is there a way to ‘tie’ an image to a menu item? on top of styling its css class?

    The idea is to have something similar to the “parties” button (please see the ‘button’ Parties in the main slider, on the left handside of this slide). The website is

    http://ctt-design3.digitalvinesstudio.com for info.

    Thanks heaps
    Nam

    #128655
    Tom
    Lead Developer
    Lead Developer

    Hi Nam,

    1. That’s correct, you would give the menu item a class, and then target it with specific CSS:

    .main-navigation .main-nav ul li.my-custom-class a {
          /* custom CSS in here */
    }

    2. You should be able to add HTML into your Navigation Labels in “Appearance > Menus”. However, I would suggest using a font icon from FontAwesome instead of an image: http://fortawesome.github.io/Font-Awesome/

    #128855
    Nam Nguyen

    Hi Tom,

    Thanks for that.

    I’m now trying to make the background of one menu in a different color, yellow, say.

    Can you tell me how to style this? I’ve tried a few element, but didn’t seem to get it right.

    Thanks

    #128865
    Tom
    Lead Developer
    Lead Developer

    First, you would add a custom class to that menu item.

    Then you would do something like this:

    .main-navigation .main-nav ul li.my-custom-class a {
          background-color: yellow; /* or use a hex code to be more specific */
          color: #000000; /* this is the text color */
    }
    #165723
    Julia

    Hi Tom,

    I want the bars in my nav to be the same color, except for when they are active or “on hover”. Then I want them to have a different one.

    I’ve given all of them a different class, but what code should I use to make this happen?

    Thanks
    Julia

    #165798
    Tom
    Lead Developer
    Lead Developer

    Hi Julia,

    The best and easiest way is to use the Colors add-on – it lets you do this all through the customizer.

    Otherwise, you can use the current-menu-item class:

    .main-navigation .main-nav ul li.current-menu-item a {
          background-color: yellow; /* or use a hex code to be more specific */
          color: #000000; /* this is the text color */
    }
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.