I am trying to insert an HTML element "an arrow or a checkbox" to make use of the "checkbox technique" so I can use it to expand the submenu "only if submenu is there" when checked.

my question is: how to insert this HTML element if there is a "sub-menu" class only or only when the list <li> has a class menu-item-has-children then insert this HTML element.

I have tried to hook on 2 filters: nav_menu_css_class and wp_nav_menu_items but didn't succeed.

I have also tried to add this element when calling the menu:

 'theme_location' => 'main-menu',
 'depth'          => 0,
 'menu_class'     => 'topNav-List',
 'menu_id'        => 'topNL',
 'after'          => ' <label for="dropDown" class="btn-dropdown"></label>
                       <input class="dropdown-open" type="checkbox" id="dropDown"/>
                       <label for="dropDown" class="dropdown-overlay"></label>'

but it will add this checkbox to all list items, which I don't want at all.

here is the latest SCSS solution that I have tried:

.btn-dropdown { display: none; }

.topNav-List {
    .menu-item-has-children {

        .btn-dropdown {
            display: inline-block;
            z-index: 2;
            cursor: 'pointer';
            &::after {
                content: ' +';

        .dropdown-overlay {
            background: red;
            opacity: 0.5;
            display: none;
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: 1;

        .sub-menu {
            background: #fff;
            border: #aaa solid 1px;
            border-radius: 3px;
            position: absolute;
            padding: 20px;
            opacity: 0;
            transition: opacity .3s, visibility .3s;
            visibility: hidden;
            z-index: 2;

        .dropdown-open:checked {
            .btn-dropdown {
                    content: ' -';

        .dropdown-open:checked + .dropdown-overlay {
            display: block;

        .dropdown-open:checked + .sub-menu {
            opacity: 1;
            visibility: visible;
            display: block;
  • What is the checkbox technique? I found this css-tricks.com/the-checkbox-hack but that can be achieved using just active states too. Likewise you can use CSS with the PHP code you already have to hide and show things differently based on wether the sub-menu class is present, only putting the labels on those elements is unnnecessary. E.g. something based on this .menu-item:not(.sub-menu) input { display: none; } – Tom J Nowell Dec 27 '20 at 0:20
  • Infact you appear to be recreating the behaviour of the <details> tag – Tom J Nowell Dec 27 '20 at 0:21
  • @TomJNowell I am asking about PHP, WordPress, and nav menus, not about CSS!! read the question again. – Moosa Dec 27 '20 at 8:12
  • I'm saying you don't need PHP/WP/Nav menus, you can do this with 100% CSS, you don't need to change the markup off specific nav menu items, it is unnecessary. Ideally you would ask how to implement your original goal, rather than how to fix your proposed solution, this is an X Y problem – Tom J Nowell Dec 27 '20 at 12:31
  • 2
    You are adding your markup via the wrong method in my opinion. You should use a filter, to add/filter the menu items and then add your markup according to your level of depth like Moosa suggested. – user3135691 Dec 28 '20 at 1:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.