Shopify themes, liquid, logos, and UX
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 }} · {{ '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!
Solved! Go to the solution
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;
}
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;
}
That did not quite work, Is there any reason you believe nothing changed?
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;
}
}
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.
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024