Shopify themes, liquid, logos, and UX
Hello! Does anyone know how I could edit my site to always display the hamburger menu that is visible in mobile view? I'm having trouble finding the correct @media line in the CSS. I want to remove the responsiveness of the menu so it is always like the mobile view. Thanks!
Solved! Go to the solution
This is an accepted solution.
@tclapmarketing wrote:I'm having trouble finding the correct @media line in the CSS.
DO NOT change the @media line hiding the mobile menu button, it is a class applied to many elements used by the layouts grid.
You will break something if you do.
Always backup themes and files before making changes
Instead you need to go through the header|nav file itself and remove the class .medium-up--hide
Roughly, ignore the liquid and look for the code that is making the menus container :
<header class="site-header page-element is-moved-by-drawer" role="banner" data-section-id="header" data-section-type="header">
<div class="site-header__upper page-width">
<div class="grid grid--table">
<div class="grid__item small--one-quarter medium-up--hide">
Adjust that first "grid__item" which contains the mobile menu button in latest versions of Venture
Remove .medium-up--hide and replace it with medium-up--one-twelfth so the logo isn't pushed to the center or further
<header class="site-header page-element is-moved-by-drawer" role="banner" data-section-id="header" data-section-type="header">
<div class="site-header__upper page-width">
<div class="grid grid--table">
<div class="grid__item small--one-quarter medium-up--one-twelfth ">
And you will need to find the code for the main menu and either give it a class of hide or disable it all together by commenting it out.
If you need help with this contact me at paull.newton+shopifyforums@gmail.com with this Topic url, use case details, store, front-pass, and theme name.
Save time & money ,Ask Questions The Smart Way
Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com
Problem Solved? ✔Accept and Like solutions to help future merchants
Answers powered by coffee Buy Paul a ☕ Coffee for more answers or donate to eff.org
sorry for that issue
its theme default menu functionality if you have menu item long that should convert horizontal menu to hamburger you have try first 2-3 menu item and reduces font size after make it more add
This is an accepted solution.
@tclapmarketing wrote:I'm having trouble finding the correct @media line in the CSS.
DO NOT change the @media line hiding the mobile menu button, it is a class applied to many elements used by the layouts grid.
You will break something if you do.
Always backup themes and files before making changes
Instead you need to go through the header|nav file itself and remove the class .medium-up--hide
Roughly, ignore the liquid and look for the code that is making the menus container :
<header class="site-header page-element is-moved-by-drawer" role="banner" data-section-id="header" data-section-type="header">
<div class="site-header__upper page-width">
<div class="grid grid--table">
<div class="grid__item small--one-quarter medium-up--hide">
Adjust that first "grid__item" which contains the mobile menu button in latest versions of Venture
Remove .medium-up--hide and replace it with medium-up--one-twelfth so the logo isn't pushed to the center or further
<header class="site-header page-element is-moved-by-drawer" role="banner" data-section-id="header" data-section-type="header">
<div class="site-header__upper page-width">
<div class="grid grid--table">
<div class="grid__item small--one-quarter medium-up--one-twelfth ">
And you will need to find the code for the main menu and either give it a class of hide or disable it all together by commenting it out.
If you need help with this contact me at paull.newton+shopifyforums@gmail.com with this Topic url, use case details, store, front-pass, and theme name.
Save time & money ,Ask Questions The Smart Way
Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com
Problem Solved? ✔Accept and Like solutions to help future merchants
Answers powered by coffee Buy Paul a ☕ Coffee for more answers or donate to eff.org
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024