Closed. This question is off-topic. It is not currently accepting answers.

---

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.

Improve this question

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

Closed. This question is off-topic. It is not currently accepting answers.

---

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.

Improve this question

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

Share Improve this question edited Aug 12, 2019 at 18:33 Christian Walgenbach asked Aug 10, 2019 at 15:12 Christian WalgenbachChristian Walgenbach 1122 bronze badges 1

• 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

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

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