Having issues with mobile menu links, can anybody take a look?

Hello on my website there is an issue on mobile menu where somehow the button to expand the mobile menu vertically (in my case, it’s a simple “+” sign (fa fa-plus), somehow this plus sign, to expand the menu, has become hotlinked itself. So what is happening is if somebody is on mobile device and they go to expand the menu, it is actually hotlinked to the URL and the menu doesnt expand, it just goes to a page. Here is the code:

{%- assign lvl1 = link.title | handleize -%}

{% if linklists[lvl1].links != blank %}
	<li class=" {% if link.active %} active{% endif %}">
		<a href="{{ link.url }}" class="site-nav">
          {{ link.title }}  <i class="fa fa-plus" aria-hidden="true"></i>
  		</a>
    	<ul>
			{% for lvl1 in linklists[lvl1].links %}
			{%- assign lvl2 = lvl1.title | handleize -%}
            {% if linklists[lvl2].links != blank %}
                <li {% if childlink.active %}class="active"{% endif %}>
					<a href="{{ lvl1.url }}" class="site-nav{% if forloop.last %} last{% endif %}">
                    	{{ lvl1.title | escape }}<i class="fa fa-plus" aria-hidden="true"></i>
                  	</a>
                    <ul>
                      	{% for lvl2 in linklists[lvl2].links %}
                        	<li><a href="{{ lvl2.url }}" class="site-nav child-link{% if forloop.last %} last{% endif %}">{{ lvl2.title | escape }}</a></li>
                      	{% endfor %}
                    </ul>
                </li>
           	{% else %}
                <li class="{% if link.active %} active{% endif %}">
                  <a href="{{ lvl1.url }}" class="site-nav">{{ lvl1.title }}</a>
                </li>
            {% endif %}
            {% endfor %}
    	</ul>
	</li>
{% else %}
	<li class="{% if link.active %} active{% endif %}">
  		<a href="{{ link.url }}" class="site-nav">{{ link.title }}</a>
	</li>
{% endif %}

The site URL is ModernAirsoft.com

Your fa icon is surrounded by an a href link… so it’s going to that url when clicked.

<a href="{{ link.url }}" class="site-nav">
          {{ link.title }}  <i class="fa fa-plus" aria-hidden="true"></i>
 </a>

If you remove the href=“xxxxxx”, the + icon will just expand the menu without taking you to a new page.

And no worries, this is not a hack. It’s valid HTML code.

https://www.w3.org/TR/2016/REC-html51-20161101/textlevel-semantics.html#the-a-element

  • If the a element has no href attribute, then the element represents a placeholder for where a link might otherwise have been placed, if it had been relevant, consisting of just the element’s contents.
1 Like