Меню не добавляет подкатегорию для одного элемента, но работает для другого Wordpress - PullRequest
2 голосов
/ 27 июня 2019

У меня есть голая тема WordPress.Панель навигации по меню содержит 6 пунктов / связанный текст из этих 6, 4 имеют подкатегории с раскрывающимися списками.

Menu nav bar

Однако, когда я иду, чтобы добавить подкатегорию к одному из элементов, у которого еще нет выпадающего / подкатегории, он не отображается намой сайт.

Я сохранил и очистил кеш.

При проверке HTML-кода я заметил разницу между успешным и неудачным.См. Ниже:

Успешный пункт меню с подкатегорией в раскрывающемся списке:

<li id="menu-item-7726" class="who has-links menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-7726">
    <a href="/who-we-are/leadership-team/" data-unsp-sanitized="clean">Who We Are</a>
    <ul class="sub-menu">
        <li id="menu-item-30" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-30">
            <a href="https://www.website.com/who-we-are/leadership-team/" data-unsp-sanitized="clean">Leadership Team</a>
        </li>
        <li id="menu-item-36" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-36">
            <a href="https://www.website.com/who-we-are/ireland/" data-unsp-sanitized="clean">Ireland</a>
        </li>
        <li id="menu-item-37" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-37">
            <a href="https://www.websitee.com/who-we-are/uk/" data-unsp-sanitized="clean">UK</a>
        </li>
    </ul>
</li>

Неудачный пункт меню с подкатегорией, не отображаемой:

<li id="menu-item-23" class="menu-item menu-item-type-post_type menu-item-object-page current_page_parent current-menu-ancestor current-menu-parent current_page_ancestor menu-item-has-children menu-item-23">
    <a href="https://www.website.com/news-hub/" data-unsp-sanitized="clean">News Hub</a>
    <ul class="sub-menu">
        <li id="menu-item-11549" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item menu-item-11549">
            <a href="/teampage/" aria-current="page" data-unsp-sanitized="clean">Get Social</a>
        </li>
    </ul>
</li>

Когда я редактируюhtml в инспекторе и измените неудачный элемент, чтобы он работал:

<li id="menu-item-23" class="pj has-links menu-item menu-item-type-post_type menu-item-object-page menu-item-object-page menu-item-has-children menu-item-23">
    <a href="https://www.website.com/news-hub/" aria-current="page" data-unsp-sanitized="clean">News Hub</a>
    <ul class="sub-menu">
        <li id="menu-item-11481" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-11481">
            <a href="https://www.website.com/teampage/" data-unsp-sanitized="clean">Get Social</a>
        </li>
    </ul>
</li>



<li id="menu-item-23" class="pj has-links menu-item menu-item-type-post_type menu-item-object-page menu-item-object-page menu-item-has-children menu-item-23">
    <a href="https://www.website.com/news-hub/" aria-current="page" data-unsp-sanitized="clean">News Hub</a>
    <ul class="sub-menu">
        <li id="menu-item-11481" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-11481">
            <a href="https://www.website.com/teampage/" data-unsp-sanitized="clean">Get Social</a>
        </li>
    </ul>
</li>

Edit of HTML in inspector

Мой вопрос: как / где я могу сделать это редактирование постоянным?TIA

Редактировать CSS добавлено:

ul#menu-main li:hover:after {
width:100%;
}
ul#menu-main li.who:after {
left:-50px
}
ul#menu-main li.se:after {
left:-37px;
}
ul#menu-main li.se:hover:after {
width: 186%;   
}
ul#menu-main li.who:hover:after {
width: 160%;
}
#menu-main .pj.has-links .sub-menu {
left:60px;
}
ul#menu-main li a {
color:#fff;
display: inline-block;
}
.single ul#menu-main li a {
font-weight:500;
font-family: 'AvenirLTStd-Medium', sans-serif;
}
ul#menu-main li a:hover {
color:#ffee00;
}
ul#menu-main li.has-links {
position: relative;
}
ul#menu-main li.has-links a:after {
content: '';
background: url(img/chevron-down.svg) no-repeat center center;
width: 16px;
height: 16px;
background-size: 16px 16px;
display: inline-block;
position: relative;
top:2px;
margin-left:10px;
}
ul#menu-main li.has-links:hover a:after {
content: '';
background: url(img/chevron-active.svg) no-repeat center center;
width: 16px;
height: 16px;
background-size: 16px 16px;
display: inline-block;
position: relative;
top:2px;
margin-left:10px;    
}
ul#menu-main li.has-links:hover .sub-menu {
-webkit-transform: scale(1) translateX(-50%);
transform: scale(1) translateX(-50%);
visibility: visible;  
}

1 Ответ

0 голосов
/ 07 июля 2019

Ваша проблема в том, что при добавлении нового дочернего элемента menu-item в существующий родительский элемент menu-item, в котором еще нет дочернего элемента menu-item под ним класс has-links не добавляется к этому конкретному родительскому menu-item.

Это bizzare , потому что они должны быть php function, который генерирует этот класс и добавляет его к каждому menu-item, который становится родительским menu-item после помещения в это ребенок menu-item!
Если они не такие php function, как другие родители menu-item получили этот класс ?!

Кроме того, у вас есть php function, возможно, тот же самый, который генерирует класс до has-links класса. Это who для КТО МЫ menu-item, se для УСЛУГ menu-item, pj для ПРОЕКТОВ menu-item, НО он не генерирует класс для NEWS HUB menu-item, когда становится родительским !
Если они не такие php function, как другие родители menu-item получили эти классы в зависимости от их имен / меток ?!

Вы говорите:

У меня есть голая тема WordPress

Это тема, которую вы разрабатываете, или тема, которую вы используете?
Предполагая, что это тема, которую вы используете, не могли бы вы сказать нам, какая это тема?

Наконец, чтобы ваше меню работало, поскольку у меня нет вашего php кода, я собираюсь использовать родные CSS классы, добавленные WordPress для любого родительского menu-item .
В приведенном выше CSS, который вы указали, замените каждый has-links на menu-item-has-children. Это должно работать!
Не забудьте использовать дочернюю тему для ваших изменений, иначе они будут удалены при следующем обновлении используемой вами темы.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...