If this tutorial is not what you were looking for, you still have any questions, suggestions or concerns - feel free to let us know. Please help us to serve you better!

Your Name

Your Email

Your Message (required)

captcha

How to manage submenu CSS styles for specific menu item using custom CSS classes

How to manage submenu CSS styles for special menu using custom CSS classes

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:

how_to_manage_submenu_css_styles_1
  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.

  2. Click your menus section, then inspect element and find the sub-menu div with css class.

  3. Duplicate sub menus css class and add selector :nth-child() which makes your sub menu unique:

  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) , where “2” is a number of the page. Now we can add css rules to our new class used for about us sub menu section:

    how_to_manage_submenu_css_styles_2
  5. Check the result on your site:

    how_to_manage_submenu_css_styles_3
  6. Don’t forget to save your new css class in main stylesheet file on your website.

  7. Now you know how to manage submenu CSS styles for specific menu using custom CSS classes.

Feel free to check the detailed video tutorial below:

How to manage submenu CSS styles for special menu using custom CSS classes
 
Live Chat
Consultant
We help you to choose the right product.