{"id":45528,"date":"2015-04-03T02:40:51","date_gmt":"2015-04-03T06:40:51","guid":{"rendered":"http:\/\/www.templatemonster.com\/help\/?p=45528"},"modified":"2015-07-27T07:29:24","modified_gmt":"2015-07-27T11:29:24","slug":"how-to-manage-submenu-css-styles-for-specific-menu-item-using-custom-css-classes","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/how-to-manage-submenu-css-styles-for-specific-menu-item-using-custom-css-classes.html","title":{"rendered":"How to manage submenu CSS styles for specific menu item using custom CSS classes"},"content":{"rendered":"How to manage submenu CSS styles for special menu using custom CSS classes<\/a>\r\n\r\n

Our Support team is ready to present a new tutorial that shows how to manage submenu CSS styles for specific menu item using custom CSS classes:<\/p>\r\n\r\n\"how_to_manage_submenu_css_styles_1\"<\/a>\r\n \r\n

    \r\n\t

  1. If you want to apply different settings for your sub-menus with the same CSS class, you will need to add a special selector.<\/p><\/li>\r\n\t

  2. Click your menus section, then inspect element and find the sub-menu div with css class.<\/p><\/li>\r\n\t

  3. Duplicate sub menus css class and add selector :nth-child()<\/strong> which makes your sub menu unique:<\/p><\/li>\r\n\t

  4. In this case, we need to increase the background width for About us sub menu section. We should create a new CSS class (including main sub menu class used in template) and add selector :nth-child(2)<\/strong> , where “2”<\/strong> is a number of the page.\r\n Now we can add css rules to our new class used for about us sub menu section:<\/p>\r\n\r\n\"how_to_manage_submenu_css_styles_2\"<\/a>\r\n<\/li>\r\n\t

  5. Check the result on your site:<\/p>\r\n\r\n\"how_to_manage_submenu_css_styles_3\"<\/a>\r\n<\/li>\r\n\t

  6. Don’t forget to save your new css class in main stylesheet file on your website.<\/p><\/li>\r\n\t

  7. Now you know how to manage submenu CSS styles for specific menu using custom CSS classes.<\/p><\/li>\r\n\t<\/ol>\r\n\r\n

    Feel free to check the detailed video tutorial below:<\/p>\r\n\r\nHow to manage submenu CSS styles for special menu using custom CSS classes<\/a>","protected":false},"excerpt":{"rendered":"

    Our Support team is ready to present a new tutorial that shows how to manage submenu CSS styles for special menu using custom CSS classes<\/p>\n","protected":false},"author":56,"featured_media":45537,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[256],"tags":[651,514,517,1840],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/45528"}],"collection":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/users\/56"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=45528"}],"version-history":[{"count":0,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/45528\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media\/45537"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=45528"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=45528"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=45528"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}