AWPGuide

Beginner's Guide For WordPress

  • Blog
    • Monetization
    • Reviews
    • Showcase
    • WordPress Guides
    • ScanWP
  • Start Here
  • Deals
  • Blueprint

Last Updated On October 18, 2018 By Christina

AWPGuide » WordPress Guides » How To Add CSS Class In WordPress Menus

How To Add CSS Class In WordPress Menus

How To Add CSS Class In WordPress Menus

Last day, we have shown you that how can you create menus and how to add title tag on menus. In this post, we are going to show you that how to add CSS class in WordPress menus and add custom CSS for the menu item.

Table Of Contents

  • Why You Need To Add CSS Class On Menus
  • How To Add CSS Class In WordPress Menus

Why You Need To Add CSS Class On Menus

If you are planning to configure the menu item differently from the ordinary ones, you need to add a CSS class for the menu.

How To Add CSS Class In WordPress Menus

First of all, go to your WordPress admin area and menus section. You can see the menus under appearance.

Add CSS Class In WordPress Menus

Make sure that you have at least one menu and assigned it to any navigation menu location.

wordpress menu added to location

On the top, you can see the screen options. Click on it.

adding screen options settings

Enable the CSS class option there and close the screen options settings.

enabled css class in wordpress menus

When you expand any of your menu items, you will see a new option called CSS class. You need to enter any class you would like. In my case, I wish to add awpgblog as the CSS class.

adding css to awpguide blog menu

Now, style the item! You need to go to the customizer and add additional CSS.

Use CSS something like this:

.awpgblog {
color: #ff6200;
}

It will affect only the menu item with the specific CSS class. Make sure that you have changed the CSS class with your own and styling according to your website style. By using the customizer, you will be able to see the live preview. It will help you to choose the best design for the menu.

If you are not good at CSS, you can try the CSS Hero, a WordPress plugin which will help you to design your WordPress blog without touching any code! We highly recommend CSS Hero for every beginner.

We hope you enjoyed the post and found it useful. If you did, please consider sharing this post with your friends and fellow bloggers. For more WordPress tutorials, you may want to check out our blog section.

Full Disclosure This post may contain affiliate links, meaning that if you click on one of the links and purchase an item, we may receive a commission (at no additional cost to you). All opinions are our own and we do not accept payments for positive reviews.
Avatar

About Christina

Christina is the lead editor in AWPGuide.
She will mainly write about WordPress tutorials, product reviews, monetization tricks, and related stuff.
Christina is led by Sreehari.

Leave a Reply Cancel reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let us have a personal and meaningful conversation.

Learn WordPress Now!

Never miss our updates! We are adding fresh contents daily!
Join our newsletter and learn WordPress now!

The Best of AWPGuide

We have the best guides here! Some of them are below!

Beginner's Guides

  • 1
    Media.net Review (and RPM Optimization Guide)
  • 2
    Grammarly Review: Free Proofreading Tool
  • 3
    Why You Need To Build an Email List?
  • 4
    How To Start a Free Blog on CloudAccess.net
  • 5
    Aspire pro Documentation and Setup
  • 6
    WP Engine Affiliate Program Review
  • 7
    How To Add Coupon Section In WordPress

Theme Reviews

  • 1
    Jupiter X WordPress Theme Review
  • 2
    Newsmag WordPress Theme Review
65% DISCOUNT
AWPGuide
CSS Hero coupon

CSS Hero Coupon

Do you want a charming 65% off on the CSS Hero plugin? Use our special coupon for it. In this post, we are going to share a coupon which will give you a 65% discount on the CSS Hero WordPress plugin.
Get This Deal

ABOUT AWPGUIDE

Finally we have launched AWPGuide blog! At this time of writing, we know, there are so many blogs are providing blogging and money making tips and tricks.

We are not like them! In AWPGuide, we will cover WordPress, blogging, SEO, make money online guides and will teach you how to start, maintain and monetize a WordPress blog.

All these guides will be 100% free and always it will be. We are not running a typical membership website for making money. Also, AWPGuide is free from display advertising, pop-up ads and URL shortner!

For more, feel free to check out our about page.

SITE LINKS

About Us

Advertise Here!

Contact Us

Free Blog Setup

Terms of Service

Write For Us!

Privacy Policy

Deals

OptinMonster Coupon

MyThemeShop Coupon

WPForms Coupon

Bluehost Coupon

CSS Hero Coupon

Social Warfare Coupon

REVIEWS

Genesis Framework

WP Coupons

WP Review Pro

Slider Revolution

Newsmag

Jupiter X

MonsterInsights

© 2021 · AWPGuide LLC