d
Topic
Posts:
1
7 days ago

Enlarge main menu width

Hello all,

for some reason my main menu seems to be limiting itself in a very tiny space. I would like to strech it out along a larger zone (please see picture). Do you know how to do that?

 

I am using simple theme

https://esprit-yoga-shop.com/ is my website

 

i
Replies
Posts:
38
6 days ago

Hi Matthieu,

At the moment, 1/2 (50%) of the screen size is allocated on the menu. Each Logo and Cart icons - 1/4 (25%) of the screen size.

GenovaWebArt-old-nav-size

 

 

 

 

Here is a step-by-step instruction that can help you increase a size by the navigation. Now it will be 1/6 (width: 16.66667%;) of the screen size for each Logo and Cart icons. And the menu will take 4/6 (width: 66.66667%;).

GenovaWebArt-new-nav-size

Please, test changes in a theme copy first vs editing the live theme (unless you are really sure you know it will work). Duplicate the theme and test things in the copy.

Follow this steps:

1.From your Shopify admin, go to Online Store > Themes (In this example I have managed Debut theme).
2. Choose "Edit code" from the "Actions" drop-down menu.
3. On the Edit HTML/CSS page, you can edit the Sections / header.liquid file.
4. You should find the following lines in the file (the code is about 158 line):

{% if section.settings.align_logo == 'center' %}
{%- assign logo_classes = 'medium-up--one-third logo-align--center' -%}
{% else %}
{%- assign logo_classes = 'medium-up--one-quarter logo-align--left' -%}
{% endif %}

4.1. Replace by this (medium-up--one-quarter --> medium-up--one-sixth):

{% if section.settings.align_logo == 'center' %}
{%- assign logo_classes = 'medium-up--one-third logo-align--center' -%}
{% else %}
{%- assign logo_classes = 'medium-up--one-sixth logo-align--left' -%}
{% endif %}

You should find the following lines in the file (the code is about 205 line):
 

{% if section.settings.align_logo == 'left' %}
<nav class="grid__item medium-up--one-half small--hide" id="AccessibleNav" role="navigation">
{% include 'site-nav' %}
</nav>
{% endif %}

5.1. Replace by this (medium-up--one-half --> medium-up--four-sixths):
 

{% if section.settings.align_logo == 'left' %}
<nav class="grid__item medium-up--four-sixths small--hide" id="AccessibleNav" role="navigation">
{% include 'site-nav' %}
</nav>
{% endif %}

And the last one. Find the following lines in the file (the code is about 211 line):
 

<div class="griditem small--one-half {% if section.settings.align_logo == 'left' %}medium-up--one-quarter{% else %}medium-up--one-third{% endif %} text-right site-headericons{% if shop.customer_accounts_enabled %} site-header__icons--plus{% endif %}">

6.1. Replace by this (medium-up--one-quarter --> medium-up--one-sixth):

<div class="griditem small--one-half {% if section.settings.align_logo == 'left' %}medium-up--one-sixth{% else %}medium-up--one-third{% endif %} text-right site-headericons{% if shop.customer_accounts_enabled %} site-header__icons--plus{% endif %}">

Press Save and Preview the edit Theme.


I hope it helps)

Best,
Arthur

Shopify subject matter expert | Founder at GenovaWebArt | Full-services shopify agency | Certified Shopify Experts | https://www.genovawebart.com | info@genovawebart.com