Enlarge main menu width

Highlighted
New Member
1 0 0

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

 

0 Likes
Highlighted

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 | info@genovawebart.com
3 Likes
Highlighted
Excursionist
26 0 6

Hello Arthur,

I know its been 2 years since this was posted, I'm trying to do this now on a development store.

I found the 1st two sections of the fix points 4 and 5, but not 6, I cannot find the line of code.

 

Please can you advise on how we can locate it if using the latest debut version.

 

Thanks,

Alia

0 Likes
Highlighted
Excursionist
15 0 2

Hello Alia,

I just wanted to let you know I found the solution for the last step that Arthur posted:

Look for 

 

<div class="grid__item {% if section.settings.align_logo == 'left' %}medium-up--one-quarter{% else %}medium-up--one-third medium-up--push-one-third{% endif %} text-right site-header__icons{% if shop.customer_accounts_enabled %} site-header__icons-

-plus{% endif %}">

 

And change to: 

 

<div class="grid__item {% 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 %}">

 

This worked for me in Debut.

Thanks!

1 Like
Highlighted
Tourist
14 0 1

No difference in my debut theme.

0 Likes
Highlighted
Tourist
14 0 1

Anyone know how can this be done?

0 Likes
Tourist
4 0 2

This full width menu solution works in Supply theme and it could be applied to other Shopify free themes as well.

 

In the code editor find 'Snippets -> site-nav.liquid' (in Supply 'site-nav' is only for large screens) and add 'full-width' to the class of the top <ul> element.

<ul class="site-nav full-width" id="AccessibleNav">

 

In 'Assets -> theme.scss.liquid' paste this code at the bottom:

.full-width {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

Basically, this kind of overrides the parent wrapper css width (in Supply it's '$siteWidth') and could potentially be applicable to other instances. Haven't fully tested it, though. Remember - always save a backup before going too deep in the code! ;)

1 Like
Highlighted
Tourist
6 0 1

Hi Arthur,

 

I have the same issue but i cannot find the code line and change it to "1/6 "when I try to edit the header.liquid.

I am using Streamline theme. My header is also not aligned and I it is really frustrating. I enclosure the picture.

 

Any idea how can I solve this??

 

Appreciate your help.

BR

 

Jill Bildschirmfoto 2020-05-07 um 14.41.29.png

0 Likes
Highlighted
Tourist
3 0 2

Great Solution! thank you, just to add: on DEBUT theme i needed to add 

    .full-width {
      width: 100vw; 
      left: 50%;
      right: 50%;
      margin-left: -50vw;
      margin-right: -50vw;
    }

    .site-nav__dropdown.full-width {
      top: 61px; /* this line added to avoid overlapping header logo */ 
     }

 

Also notice I removed position: relative, to avoid menu to break everything up.

1 Like