Solved

Help making Header Menu Full Width

GregWithProEdge
New Member
6 0 0

My theme is Boost(Supply) I'm looking to make my header menu full width. Here is the code in the Header Liquid file

<header class="site-header" role="banner" data-section-id="{{ section.id }}" data-section-type="header-section">
<div class="wrapper">

<div class="grid--full">
<div class="grid-item large--one-half">
{% if template.name == 'index' %}
<h1 class="header-logo" itemscope itemtype="http://schema.org/Organization">
{% else %}
<div class="h1 header-logo" itemscope itemtype="http://schema.org/Organization">
{% endif %}
{% if section.settings.logo %}
{% capture image_size %}{{ section.settings.logo_max_width | escape }}x{% endcapture %}
{%- assign img_url = section.settings.logo | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
{% capture logo_alt %}{{ section.settings.logo.alt | default: shop.name }}{% endcapture %}
<a href="/" itemprop="url">
<div class="lazyload__image-wrapper no-js header-logo__image" style="max-width:{{ section.settings.logo_max_width }}px;">
<div style="padding-top:{{ 1 | divided_by: section.settings.logo.aspect_ratio | times: 100}}%;">
<img class="lazyload js"
data-src="{{ img_url }}"
data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
data-aspectratio="{{ section.settings.logo.aspect_ratio }}"
data-sizes="auto"
alt="{{ logo_alt | escape }}"
style="width:{{ section.settings.logo_max_width }}px;">
</div>
</div>
<noscript>
{% capture image_size %}{{ section.settings.logo_max_width | escape }}x{% endcapture %}
<img src="{{ section.settings.logo | img_url: image_size }}"
srcset="{{ section.settings.logo | img_url: image_size }} 1x, {{ section.settings.logo | img_url: image_size, scale: 2 }} 2x"
alt="{{ logo_alt | escape }}"
itemprop="logo"
style="max-width:{{ section.settings.logo_max_width }}px;">
</noscript>
</a>
{% else %}
<a href="/" itemprop="url">{{ shop.name }}</a>
{% endif %}
{% if template.name == 'index' %}
</h1>
{% else %}
</div>
{% endif %}
</div>

<div class="grid-item large--one-half text-center large--text-right">
{% if section.settings.show_announcement or shop.customer_accounts_enabled %}
<div class="site-header--text-links{% if section.settings.announcement_text == blank %} medium-down--hide{% endif %}">
{% if section.settings.show_announcement %}
{% if section.settings.announcement_link != blank %}
<a href="{{ section.settings.announcement_link }}">
{% endif %}

<p>{{ section.settings.announcement_text | escape }}</p>

{% if section.settings.announcement_link != blank %}
</a>
{% endif %}
{% endif %}

{% if shop.customer_accounts_enabled %}
<span class="site-header--meta-links medium-down--hide">
{% if customer %}
{% capture first_name %}<a href="/account">{{ customer.first_name }}</a>{% endcapture %}
{{ 'layout.customer.logged_in_as_html' | t: first_name: first_name }} &middot; {{ 'layout.customer.log_out' | t | customer_logout_link }}
{% else %}
{{ 'layout.customer.sign_in' | t | customer_login_link }}
<span class="site-header--spacer">{{ 'layout.customer.or' | t }}</span>
{{ 'layout.customer.create_account' | t | customer_register_link }}
{% endif %}
</span>
{% endif %}
</div>

<br class="medium-down--hide">
{% endif %}

{% include 'search-bar' %}

<a href="/cart" class="header-cart-btn cart-toggle">
<span class="icon icon-cart"></span>
{{ 'layout.cart.cart' | t }} <span class="cart-count cart-badge--desktop {% if cart.item_count == 0 %}hidden-count{% endif %}">{{ cart.item_count }}</span>
</a>
</div>
</div>

</div>

</header>

<div id="mobileNavBar">
<div class="display-table-cell">
<button class="menu-toggle mobileNavBar-link" aria-controls="navBar" aria-expanded="false"><span class="icon icon-hamburger" aria-hidden="true"></span>{{ 'layout.navigation.mobile_menu' | t }}</button>
</div>
<div class="display-table-cell">
<a href="/cart" class="cart-toggle mobileNavBar-link">
<span class="icon icon-cart"></span>
{{ 'layout.cart.cart' | t }} <span class="cart-count {% if cart.item_count == 0 %}hidden-count{% endif %}">{{ cart.item_count }}</span>
</a>
</div>
</div>

<nav class="nav-bar" id="navBar" role="navigation">
<div class="wrapper">
{% include 'search-bar' %}
{% include 'mobile-nav' %}
{% include 'site-nav' %}
</div>
</nav>

 

{% schema %}
{
"name": {
"de": "Titel",
"en": "Header",
"es": "Encabezado",
"fr": "En-tête",
"it": "Header",
"ja": "ヘッダー",
"pt-BR": "Cabeçalho"
},
"class": "header-section",
"settings": [
{
"type": "link_list",
"id": "menu",
"label": {
"de": "Menü",
"en": "Menu",
"es": "Menú",
"fr": "Menu",
"it": "Menu",
"ja": "メニュー",
"pt-BR": "Menu"
},
"default": "main-menu"
},
{
"type": "header",
"content": {
"de": "Logo",
"en": "Logo",
"es": "Logotipo",
"fr": "Logo",
"it": "Logo",
"ja": "ロゴ",
"pt-BR": "Logotipo"
}
},
{
"type": "image_picker",
"id": "logo",
"label": {
"de": "Benutzerdefiniertes Logo",
"en": "Custom logo",
"es": "Logotipo personalizado",
"fr": "Logo personnalisé",
"it": "Logo personalizzato",
"ja": "ロゴをカスタムする",
"pt-BR": "Logotipo personalizado"
},
"info": {
"de": "400px breite .png empfohlen",
"en": "400px wide .png recommended",
"es": "400px de ancho .png recomendado",
"fr": "400 px de largeur .png recommandé",
"it": "Consigliato file .png con larghezza 400 pixel",
"ja": "400ピクセル幅.png推奨",
"pt-BR": ".png com 400 px de largura recomendado"
}
},
{
"type": "text",
"id": "logo_max_width",
"label": {
"de": "Logobreite",
"en": "Custom logo width",
"es": "Ancho del logotipo personalizado",
"fr": "Largeur personnalisée du logo",
"it": "Larghezza logo personalizzato",
"ja": "ロゴの幅をカスタムする",
"pt-BR": "Largura do logotipo personalizado"
},
"default": {
"de": "305",
"en": "305",
"es": "305",
"fr": "305",
"it": "305",
"ja": "305",
"pt-BR": "305"
}
},
{
"type": "header",
"content": {
"de": "Ankündigungsbereich",
"en": "Announcement bar",
"es": "Barra de anuncios",
"fr": "Barre d'annonces",
"it": "Barra degli annunci",
"ja": "告知バー",
"pt-BR": "Barra de anúncios"
}
},
{
"type": "checkbox",
"id": "show_announcement",
"label": {
"de": "Ankündigung anzeigen",
"en": "Show announcement",
"es": "Mostrar anuncio",
"fr": "Afficher l'annonce",
"it": "Mostra annuncio",
"ja": "告知を表示する",
"pt-BR": "Exibir anúncio"
},
"default": false
},
{
"type": "text",
"id": "announcement_text",
"label": {
"de": "Text",
"en": "Text",
"es": "Texto",
"fr": "Texte",
"it": "Testo",
"ja": "テキスト",
"pt-BR": "Texto"
},
"default": {
"de": "Hier etwas ankündigen",
"en": "Announce something here",
"es": "Anuncia algo aquí",
"fr": "Annoncez quelque chose ici",
"it": "Annuncia qualcosa qui",
"ja": "ここで告知してください",
"pt-BR": "Anuncie algo aqui"
}
},
{
"type": "url",
"id": "announcement_link",
"label": {
"de": "Link",
"en": "Link",
"es": "Enlace",
"fr": "Lien",
"it": "Link",
"ja": "リンク",
"pt-BR": "Link"
},
"info": {
"de": "Optional",
"en": "Optional",
"es": "Opcional",
"fr": "Facultatif",
"it": "Facoltativo",
"ja": "選択させる",
"pt-BR": "Opcional"
}
}
]
}
{% endschema %}

 

the URL to the store is https://www.pro-edge.com/

If anyone can help it would be greatly appreciated, Thank you!

Accepted Solution (1)

Ninthony
Shopify Partner
2329 350 1023

This is an accepted solution.

Delete the wrapper class out of that first div underneath the <header> tag, and then add this css into theme.scss.liquid in your assets folder:

.site-nav {
text-align: center;
}
If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄

View solution in original post

Replies 4 (4)

Ninthony
Shopify Partner
2329 350 1023

This is an accepted solution.

Delete the wrapper class out of that first div underneath the <header> tag, and then add this css into theme.scss.liquid in your assets folder:

.site-nav {
text-align: center;
}
If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄
GregWithProEdge
New Member
6 0 0

That did not quite work, Is there any reason you believe nothing changed?

GregWithProEdge
New Member
6 0 0

Ive noticed that the issue may be here in the theme.scss.liquid

 

.nav-bar {
top: 110%;
bottom: 0;
left: 0;
right: 0;
background-color: $colorNav;

a, button {
color: $colorNavText;

&:active,
&:focus {
opacity: 0.9;
}
}
}

.site-nav {
display: none;
margin: 0;
text-align: left;
margin-left: -$gutter/2;
font-family: $accentFontStack;
font-weight: $accentFontWeight;
font-style: $accentFontStyle;
font-size: {{ settings.type_navigation_size }};
{% if settings.type_navigation_transform %}
text-transform: uppercase;
{% endif %}
cursor: default;

li {
margin: 0;
display: block;
position: relative;
}

& > li {
display: inline-block;

}

a, button {
display: block;
text-decoration: none;
padding: $gutter/2;
white-space: nowrap;
}

button {
background: none;
border: 0;
font-size: {{ settings.type_navigation_size }};
text-transform: uppercase;
}

.customer-navlink {
color: $colorNavText;
background-color: lighten($colorNav, 15%);
border-bottom: 0;
border-top: 1px solid lighten($colorNav, 5%);
margin-top: -1px;
}
}

Ninthony
Shopify Partner
2329 350 1023

Your code still has the wrapper class, that is the specific class that is keeping it from being full width. I just deleted it again on my end and your menu is full width and center aligned.

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄