How can I make header menus open in a new tab?

[Medaner]

I was wondering, is it possible to have your header menus open in a new tab?

Let’s say I want the “FAQ” to open a new tab with our FAQ but the “Create Custom Bundles” stay in the same tab. Is that possible?

I was able to fix the footer ones by adding target="_blank and I added some custom JS to the theme.js to fix all external links but the menus in the header are still giving me issues. Thanks!

[Ahsan_ANC]

Plz share your store url

[Medaner]

Thanks!

https://box-builder-demo-store.myshopify.com/ password: chiant

[Ahsan_ANC]

Can you share your header.liquid code so that can be updated.

[Medaner]

I left the schema out. I couldn’t find the If loop like I saw in the footer.

{%- if section.settings.announcement_bar_enabled -%} {%- assign announcement_bar_color_text_rgba_stripped = section.settings.announcement_bar_color_text | color_to_rgb | remove: 'rgb(' | remove: ')' -%} {%- style -%} .announcement-bar { background-color: {{ section.settings.announcement_bar_color_background }}; border-bottom: 1px solid {{ section.settings.announcement_bar_color_text }}; }

.announcement-bar__link,
.announcement-bar__message {
color: {{ section.settings.announcement_bar_color_text }};
}

.announcement-bar {
–focus-color: rgba({{ announcement_bar_color_text_rgba_stripped }}, 0.8);
–focus-offset-color: {{ section.settings.announcement_bar_color_background }};
}

{%- if section.settings.enable_secondary_background -%}
.search-drawer {
background-color: var(–color-secondary-background);
}

.search__form-button–drawer, .search__form-input-label–drawer, .search__form-input–drawer.form__input {
color: var(–color-secondary-background-text);
}

.search__form-input–drawer.form__input{
border-color: var(–color-secondary-background-text);
}

.search__form-button–drawer .icon-close {
stroke: var(–color-secondary-background-text);
}

.search-drawer {
–focus-color: rgba(var(–color-secondary-background-text-rgba-stripped), 0.8);
–focus-offset-color: var(–color-secondary-background);
}
{%- endif -%}
{%- endstyle -%}

{%- if section.settings.announcement_bar_text != blank -%} {%- if section.settings.announcement_bar_url != blank -%} {%- endif -%}

{{ section.settings.announcement_bar_text | escape }}

{%- if section.settings.announcement_bar_url != blank -%}
{% render ‘icon-arrow-right-large’ %}

{%- endif -%}
{%- endif -%}

{%- endif -%}

{%- liquid
assign render_menu = false

if section.settings.main_menu != blank
assign menu = linklists[section.settings.main_menu]

if menu.links.size != 0
assign render_menu = true
endif
endif
-%}

{%- if request.page_type == 'index' -%}

{%- else -%}

{%- endif -%} {%- if section.settings.logo != blank -%} {%- style -%} .header__logo-image { max-width: {{ section.settings.logo_max_width }}px; } {%- endstyle -%}

{% capture image_size %}{{ section.settings.logo_max_width }}x{% endcapture %}

{% else %}
{{ shop.name }}
{% endif %}

{%- if request.page_type == ‘index’ %}

{%- else -%}

{%- endif -%}

{%- liquid
if render_menu
render ‘menu-navigation’, menu: menu, is_mobile: false
endif
-%}

{%- if section.settings.show_search -%} {% render 'icon-search' %} {{ 'general.search.search' | t }} {% render 'icon-search' %} {{ 'general.search.search' | t }} {%- endif -%}

{%- if shop.customer_accounts_enabled -%}
{% assign customer_url = routes.account_login_url %}
{% assign customer_fallback_text = ‘layout.customer.log_in’ | t %}

{%- if customer -%}
{% assign customer_url = routes.account_url %}
{% assign customer_fallback_text = ‘layout.customer.account’ | t %}
{%- endif -%}

{% render 'icon-account' %} {{ customer_fallback_text }} {%- endif -%}

<a href=“{{ routes.cart_url }}”
class=“header__icon header__icon–button header__icon–cart-button-link{% unless settings.show_cart_drawer %} header__icon–cart-visible{% endunless %} focus-inset”
data-header-icon

{% render ‘icon-cart’ %}
{{ ‘layout.cart.title’ | t }}

{{ 'layout.cart.items_count' | t }} {%- if cart.item_count > 99 -%} 99+ {%- else -%} {{ cart.item_count }} {%- endif -%}

{%- if settings.show_cart_drawer -%}

{% render 'icon-cart' %} {{ 'layout.cart.title' | t }}

{{ 'layout.cart.items_count' | t }} {%- if cart.item_count > 99 -%} 99+ {%- else -%} {{ cart.item_count }} {%- endif -%}

{{ 'layout.cart.cart_price' | t }} {%- if settings.currency_code_enabled -%} {{ cart.total_price | money_with_currency }} {%- else -%} {{ cart.total_price | money }} {%- endif -%}

{%- endif -%}

{%- if render_menu -%}
<button class=“header__icon header__icon–button header__icon–menu-navigation focus-inset”
aria-controls=“MenuNavigationDrawer”
aria-haspopup=“dialog”
aria-expanded=“false”
aria-label=“{{ ‘sections.header.menu’ | t }}”
data-mobile-navigation-toggle

{%- endif -%}

{%- if render_menu -%}

{{ 'sections.header.menu' | t }}

{% render 'menu-navigation', menu: menu, is_mobile: true %}

{%- endif -%}

{% if request.page_type == ‘index’ %}
{% assign potential_action_target = shop.url | append: routes.search_url | append: “?q={search_term_string}” %}

{% endif %}

[Medaner]

There’s got to be a spot to put the blank for the a href but I thought I tried them all.

[Ahsan_ANC]

hello plz find the main js file on your theme. may be something like “global.js” and paste the following code at the bottom of file

Array.from(document.querySelectorAll('.menu-navigation-wrapper .menu-navigation__item')).forEach((element,index) =>
{element.setAttribute("target", "_blank");});

[Ahsan_ANC]

[Medaner]

I dont have a global.js but how about theme.js?

[Medaner]

Awesome, I do have a

[Medaner]

[Ahsan_ANC]

you can paste in theme.js.

but you can share the code of menu-navigation.liquid so it can be updated

[Medaner]

{%- for link in menu.links -%}
• {%- if link.links != blank -%} {{ link.title | escape }} {% render 'icon-select' %}
  {%- for childlink in link.links -%}
  • {%- if childlink.links != blank and link.levels == 2 -%} {{ childlink.title | escape }} {% render 'icon-select' %}
    {%- for grandchildlink in childlink.links -%}
    • {{ grandchildlink.title | escape }}
    {%- endfor -%}
    {%- else -%} {{ childlink.title | escape }} {%- endif -%}
  {%- endfor -%}
  {{ link.title | escape }} {%- else -%} {{ link.title | escape }} {%- endif -%}
{%- endfor -%} {%- if is_mobile and shop.customer_accounts_enabled -%}
• {% assign customer_url = routes.account_login_url %} {% assign customer_fallback_text = 'layout.customer.log_in' | t %}

  {%- if customer -%}
  {% assign customer_url = routes.account_url %}
  {% assign customer_fallback_text = ‘layout.customer.account’ | t %}
  {%- endif -%}

  {% render 'icon-account' %} {{ customer_fallback_text }}
{%- endif -%}

Do I need to add this as well?

rel="nofollow noindex noopener" 

[Ahsan_ANC]

Plz paste the javascript code i provided earlier at the bottom of theme.js

[Medaner]

Done!

[Ahsan_ANC]

Sorry, plz paste the code at the bottom of theme.min.js

[Medaner]

Done and I removed it from theme.js

[Medaner]

Sorry I put it in the theme.min.css now its in the .js

[Medaner]

Hell yeh it totally works now!