Search code examples
htmlcsswordpresspseudo-class

Disable “parasitic” link behaviour at navigation menu

I've Worpress site with JetOne theme installed

When I click root menu element in the main navigation menu to open its items(links in that root element) click action for selected link (the root element) also triggered that's the matter. The problem is present on mobile view for that theme. I already tried

@media (max-width: 768px) {
  .ct-main-navigation > .menu-item > a {
    pointer-events: none;
  }
}

But this trick just disables link for root elements of menu. How to achive the goal right way?

There is another idea: recreate navigation using wp_nav_menu_items hook, but I don't want to break original design and don't know how to do that exactly.

HTML

<nav id="ct-main-nav__wrapper" itemscope itemtype="http://schema.org/SiteNavigationElement">
<ul id="menu-menu" class="ct-main-navigation"><li id="menu-item-80" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-80"><a href="https://demo.curlythemes.com/private-jet/services/">Services</a>
<ul class="sub-menu">
<li id="menu-item-333" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-333"><a href="https://demo.curlythemes.com/private-jet/services/private-jet-2/">Private Jet Charters</a></li>
<li id="menu-item-409" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-409"><a href="https://demo.curlythemes.com/private-jet/services/business-jets/">Business Jets Charters</a></li>
<li id="menu-item-410" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-410"><a href="https://demo.curlythemes.com/private-jet/services/helicopter-charters/">Helicopter Charters</a></li>
<li id="menu-item-408" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-408"><a href="https://demo.curlythemes.com/private-jet/services/air-taxi-services/">Air Taxi Services</a></li>
</ul>
</li>
<li id="menu-item-78" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-78"><a href="https://demo.curlythemes.com/private-jet/about-us/">About Us</a>
<ul class="sub-menu">
<li id="menu-item-299" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-299"><a href="http://demo.curlythemes.com/private-jet/about-us/#our-values">Our Values</a></li>
<li id="menu-item-300" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-300"><a href="http://demo.curlythemes.com/private-jet/about-us/#our-history">Our History</a></li>
<li id="menu-item-301" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-301"><a href="http://demo.curlythemes.com/private-jet/about-us/#our-fleet">Our Fleet</a>
<ul class="sub-menu">
<li id="menu-item-303" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-303"><a href="https://demo.curlythemes.com/private-jet/about-us/aircraft/">CESSNA 208 GC</a></li>
<li id="menu-item-304" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-304"><a href="https://demo.curlythemes.com/private-jet/about-us/aircraft/">DE HAVILLAND DHC-8-200</a></li>
<li id="menu-item-396" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-396"><a href="https://demo.curlythemes.com/private-jet/about-us/aircraft/">BOMBARDIER JET 200</a></li>
<li id="menu-item-397" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-397"><a href="https://demo.curlythemes.com/private-jet/about-us/aircraft/">EMBRAER 175</a></li>
</ul>
</li>
<li id="menu-item-302" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-302"><a href="http://demo.curlythemes.com/private-jet/about-us/#our-team">Our Team</a></li>
</ul>
</li>
<li id="menu-item-77" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-77"><a href="https://demo.curlythemes.com/private-jet/empty-legs/">Empty Legs</a></li>
<li id="menu-item-76" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-76"><a href="https://demo.curlythemes.com/private-jet/news/">News</a></li>
<li id="menu-item-75" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-75"><a href="https://demo.curlythemes.com/private-jet/contact/">Contact</a></li>
</ul> </nav>

Original CSS

.ct-main-navigation .menu-item-has-children > a::before,
.ct-main-navigation .page_item_has_children > a::before {
  content: "";
  position: relative;
  font-family: 'themify';
  display: inline-block;
  -webkit-transition: opacity 100ms ease-in;
   transition: opacity 100ms ease-in; 
}

.ct-main-navigation .menu-item-has-children > a::before,
.ct-main-navigation .page_item_has_children > a::before {
  float: right;
  margin: 0 0.5rem;
  display: inline-block; }
  @media (min-width: 48em) {
    .ct-main-navigation .menu-item-has-children > a::before,
    .ct-main-navigation .page_item_has_children > a::before {
      font-size: 0.5rem;
      line-height: 2.25;
      margin-right: 0; 
      } }

@media (min-width: 576px) {
  .ct-main-navigation .menu-item .menu-item-has-children > a::before,
  .ct-main-navigation .page_item .page_item_has_children > a::before {
    content: '\e649';
    line-height: 2.2;
    } }

.ct-main-navigation a {
  text-decoration: none;
  -webkit-transition: all 200ms ease;
  transition: all 200ms ease;
  display: block;
  padding: 0.25rem 0; }

P.S. Another workaround for subject issue is make CSS as follows

Modified CSS

@media (max-width: 768px) {
  .ct-main-navigation .menu-item-has-children::before,
  .ct-main-navigation .page_item_has_children::before {
    position: absolute;
    right: 0px;
    height: 100%;
    padding-right: 10px;
    padding-top: 7px;
    top: 0;
    z-index: 5;
    width: 40px;
    text-align: right;
    content: '';
    font-family: 'themify';
    display: inline-block;
    -webkit-transition: opacity 100ms ease-in;
    transition: opacity 100ms ease-in;
  }
  .ct-main-navigation .menu-item-has-children > a::before,
  .ct-main-navigation .page_item_has_children > a::before {
    display: none;
  }
}

How to make the fix universal not only for Android devices, but for iOS as well?

Current CSS fix brokes navigation menu markup on iPad(iOS) devices.

Solution

  • As requested, here is a minimal example on a possible solution:

    const icon = document.querySelector('.chevron-down');

/* for mobile devices you may also use "touchend" event */
icon.addEventListener('click', (e) => {
  const subMenu = e.currentTarget.nextElementSibling;

  subMenu.style.display = 'block'
});
    ul {
  list-style: none;
}

ul li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

i.chevron-down:before {
  content: "";
  position: relative;
  font-family: themify;
  display: inline-block;
  -webkit-transition: opacity 100ms ease-in;
  transition: opacity 100ms ease-in;
  font-style: normal;
}

.sub-menu {
  display: none;
  flex-basis: 100%;
}
    <ul>
  <li>
    <a href="https://demo.curlythemes.com/private-jet/services/">Services</a>
    <i class="chevron-down"></i>
    <ul class="sub-menu">
      <li>Private etc.</li>
    </ul>
  </li>
</ul>

    This is not a fully working solution and requires tweaking, however it should get you started.