{"id":864,"date":"2018-10-18T13:40:14","date_gmt":"2018-10-18T08:10:14","guid":{"rendered":"https:\/\/awpguide.com\/?p=864"},"modified":"2018-10-18T13:40:14","modified_gmt":"2018-10-18T08:10:14","slug":"how-to-add-css-class-in-wordpress-menus","status":"publish","type":"post","link":"https:\/\/awpguide.com\/wp-guides\/how-to-add-css-class-in-wordpress-menus\/","title":{"rendered":"How To Add CSS Class In WordPress Menus"},"content":{"rendered":"

Last day, we have shown you that how can you create menus<\/a> and how to add title tag on menus<\/a>. 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.<\/p>\n

Why You Need To Add CSS Class On Menus<\/h2>\n

If you are planning to configure the menu item differently from the ordinary ones, you need to add a CSS class for the menu.<\/p>\n

How To Add CSS Class In WordPress Menus<\/h2>\n

First of all, go to your WordPress admin area and menus section. You can see the menus under appearance.<\/p>\n

\"Add<\/p>\n

Make sure that you have at least one menu and assigned it to any navigation menu location.<\/p>\n

\"wordpress<\/p>\n

On the top, you can see the screen options. Click on it.<\/p>\n

\"adding<\/p>\n

Enable the CSS class option there and close the screen options settings.<\/p>\n

\"enabled<\/p>\n

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<\/em> as the CSS class.<\/p>\n

\"adding<\/p>\n

Now, style the item! You need to go to the customizer and add additional CSS<\/a>.<\/p>\n

Use CSS something like this:<\/p>\n

\r\n.awpgblog {\r\ncolor: #ff6200;\r\n}\r\n<\/pre>\n
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.<\/p>\n
If you are not good at CSS, you can try the CSS Hero<\/a>, a WordPress plugin which will help you to design your WordPress blog without touching any code! We highly recommend\u00a0CSS Hero<\/a> for every beginner.<\/p>\n
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<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"
Last day, we have shown you that how can you create menus and how to add title tag on menus. … <\/p>\n
Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":928,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[5],"tags":[],"_links":{"self":[{"href":"https:\/\/awpguide.com\/wp-json\/wp\/v2\/posts\/864"}],"collection":[{"href":"https:\/\/awpguide.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/awpguide.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/awpguide.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/awpguide.com\/wp-json\/wp\/v2\/comments?post=864"}],"version-history":[{"count":0,"href":"https:\/\/awpguide.com\/wp-json\/wp\/v2\/posts\/864\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/awpguide.com\/wp-json\/wp\/v2\/media\/928"}],"wp:attachment":[{"href":"https:\/\/awpguide.com\/wp-json\/wp\/v2\/media?parent=864"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/awpguide.com\/wp-json\/wp\/v2\/categories?post=864"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/awpguide.com\/wp-json\/wp\/v2\/tags?post=864"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}