Your question should be specific to WordPress. Generic PHP/JS/SQL/HTML/CSS questions might be better asked at Stack Overflow or another appropriate Stack Exchange network site. Third-party plugins and themes are off-topic for this site; they are better asked about at their developers' support routes.

Closed 5 years ago.

What is happening? The third level menu overlap to the dropdown menu.

Goal? The third level menu should outsite the dropdown menu.

What have I tried so far? I just added inline css to the second menu level in Web-Developer-Modus in Browser.

<ul role="menu" class=" dropdown-menu" style="display: none; left: 11rem; top: -0.5rem; width: min-content;">
    <li id="menu-item-400" class="nav-item menu-item menu-item-type-post_type menu-item-object-page menu-item-400 open"><a title="Öffentlichkeitsarbeit" href="http://localhost:38080/oeffentlichkeitsarbeit" class="dropdown-item">Öffentlichkeitsarbeit</a></li>
</ul>

left: 11rem; top: -0.5rem; width: min-content;

How can I change the javascript to add a the css class .open only for the menu in the second level? Or is a solution in wp_bootstrap_navwalker.php better?

jQuery(function($) {
if($(window).width()>769){
    $('.navbar .dropdown').hover(function() {
        $(this).find('.dropdown-menu').first().stop(true, true).delay(250).slideDown();

    }, function() {
        $(this).find('.dropdown-menu').first().stop(true, true).delay(100).slideUp();

    });

    $('.navbar .dropdown > a').click(function(){
        location.href = this.href;
    });

} });

• Gitlab-Repo
• Gitlab Issue
• Demo-Page
• Question before: Page from parentmenu is not opening

Your question should be specific to WordPress. Generic PHP/JS/SQL/HTML/CSS questions might be better asked at Stack Overflow or another appropriate Stack Exchange network site. Third-party plugins and themes are off-topic for this site; they are better asked about at their developers' support routes.

Closed 5 years ago.

What is happening? The third level menu overlap to the dropdown menu.

Goal? The third level menu should outsite the dropdown menu.

What have I tried so far? I just added inline css to the second menu level in Web-Developer-Modus in Browser.

<ul role="menu" class=" dropdown-menu" style="display: none; left: 11rem; top: -0.5rem; width: min-content;">
    <li id="menu-item-400" class="nav-item menu-item menu-item-type-post_type menu-item-object-page menu-item-400 open"><a title="Öffentlichkeitsarbeit" href="http://localhost:38080/oeffentlichkeitsarbeit" class="dropdown-item">Öffentlichkeitsarbeit</a></li>
</ul>

left: 11rem; top: -0.5rem; width: min-content;

How can I change the javascript to add a the css class .open only for the menu in the second level? Or is a solution in wp_bootstrap_navwalker.php better?

jQuery(function($) {
if($(window).width()>769){
    $('.navbar .dropdown').hover(function() {
        $(this).find('.dropdown-menu').first().stop(true, true).delay(250).slideDown();

    }, function() {
        $(this).find('.dropdown-menu').first().stop(true, true).delay(100).slideUp();

    });

    $('.navbar .dropdown > a').click(function(){
        location.href = this.href;
    });

} });

• Gitlab-Repo
• Gitlab Issue
• Demo-Page
• Question before: Page from parentmenu is not opening

• css

• This seems mostly a CSS issue, and thus off topic, please consult the help center to get familiar with the site guidelines. The nav menu walker class has the depth parameter for several of its methods available, which you can use to add classes by level, depth. The open class is afaik added by bootstrap js, not by the walker class though. As a third-party library bootstrap is off topic too. – Nicolai Grossherr Commented Aug 11, 2019 at 17:08

1 Answer 1

Solution: #main-nav ul li ul ul { margin-left: 150px; width: 250px; }