Burger menu and media queries

Highlighted
Tourist
6 0 1

Hello there,

I need your help for a specific issue.

I have a quite long menu with 6 items + the icons for login, searching and the cart.

Since I had my sixth menu element, the menu has transform into a burger menu. I tried to fix that using different tips I found on the Shopify Community, such as:

Change  $siteWidth to 1400px width in the files timber.scss.liquid  and theme.scss.liquid, 

and in the header.liquid, change this code:

<div class="grid__item large--one-third medium-down--one-half">

and change it to the following:

<div class="grid__item large--one-quarter medium-down--one-half">

Then locate this piece (line 63 for me):

<div class="grid__item large--two-thirds large--text-right medium-down--hide">

and change it to:

<div class="grid__item large--three-quarters large--text-right medium-down--hide">

The change is large--one-third -> large--one-quarter and large--two-thirds -> large--three-quarters.  You may go further and try large--one-fifth and large--four-fifths respectively to gain more space for the menu.

 

On my 27" screen 1/4 3/4 works, but still goes wrong on my 15" screen.

When I try 1/5 4/5, it works on both 27 and 15" screens, but as soon I reduce the width of my screen it goes wrong as well.

Does anyone can help me please?

I am also wondering why my media queries are the same for both 27" and 15" screens. I use Pagefly and did all the media queries by type of media (all devices, laptop, tablet, mobile). In Timber and Theme, my settings are the following:

$viewportIncrement: 1px;
$siteWidth: 1400px;
$small: 590px;
$medium: 768px;
$large: 769px;
$xlarge: $siteWidth + $viewportIncrement;

Do you know if it's normal to have same queries for 2 screens so differents?

Thank you so much for your help!

0 Likes
Highlighted

Hello @nfjohn,

Can you please share your store url

Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
Tourist
6 0 1

Hello,

Here is the URL: https://northern-feather-estore.com/

Thank you for your attention

0 Likes
Highlighted

@nfjohn,

1. Go to Online Store->Theme->Edit code
2. Asset->timber.scss->paste below code at bottom of file
.site-nav__link span.icon.icon-arrow-down {
    padding-left: 0;
}
#AccessibleNav a.site-nav__link {
    padding: 15px 5px;
}
.site-header__logo img {
    width: 100%;
}
Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
Tourist
6 0 1

Hello,

Thank you for the code, I did that, but I have still the same issues when I reduce the window, the menu is going on the left (cf screenshot), and the result in 27 and 15" is tight (but I can play with the pixels of the padding for that I think). My aim is to avoid the burger menu the more that I can (not a easy thing as there is a lot of items).

Thank you so much for your help!

Screen Shot 2020-07-08 at 9.45.59 AM.png

0 Likes