Sub menu indent query

Hi

See image attached below. We need to indent the 3rd level of our sub menu (level 3) as it looks like the red 2 is part of this level when it is not. I can’t see how to do this in xPro Header builder. Can you help?

Thanks

Mark

Hello @markcfrancis,

Thanks for writing to us.

To set the submenu level. Please follow these steps.

  1. Go to your Dashboard (WP-ADMIN)
  2. Appearance -->Menu
  3. You add the menu and drag the menu items as shown in the given screenshot

To learn more about submenu please have a look at this article https://codex.wordpress.org/WordPress_Menu_User_Guide

Hope It Helps
Thanks

Hi Prakash, the sub menu items are already set. My query relates to how to indent the 3rd level items on the front end using Pro’s Header editor. Please see the screenshot I attached. Thanks. Mark

Hi @markcfrancis,

Add this code in Theme option -> CSS to align the third level menu.

@media(max-width:980px){
    .menu-item-has-children .x-dropdown .x-dropdown {
    padding-left: 10px !important;
    } 
}

If the code doesn’t work, please share your details in a secure note. Please provide the following details

  • WordPress Login URL
  • Admin level username and password

You can find the Secure Note button at the bottom of your posts

Thanks

Secure note sent! Thanks

Hey @markcfrancis,

We’re sorry for the confusion. I’ll provide the override code for that but please consider that the Navigation Collapsed element which you’re using does not support the 3rd and succeeding menu indentation for reasons deemed by our designers to be generally bad for Interface Design and User Experience.

With that said, our developers created the Navigation Layered element. It’s recommended to use the Navigation Layered element if you have a 3rd level menu item.

The following code is the correct override code.

.sub-menu .sub-menu {
    padding-left: 20px
}

As you can see in the screenshot above, it would work provided it’s copied completely and if there’s no other code conflicting with it.

Please just note that we do not provide support for custom code issues and we don’t enhance them as part of our theme support. If you encounter issues with your site that is a result of using custom codes, you need to forward the issues to a personal developer.

Hope that helps and thank you for understanding.

That’s perfect thanks ! Working

You’re welcome, @markcfrancis.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.