Venture Theme Hamburger Menu in Desktop

Solved
tclapmarketing
New Member
1 0 1

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!

Accepted Solution (1)

Accepted Solutions
PaulNewton
Shopify Partner
3491 233 677

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.

What important thing did you learn this Black Friday?


Answers powered by coffee Buy Paul a ☕ Coffee for more answers or donate to eff.org

Problem Solved? ✔Accept and Like solutions to help future merchants

Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com

View solution in original post

Replies 2 (2)
KetanKumar
Shopify Partner
24923 2498 9041

@tclapmarketing 

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   

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
PaulNewton
Shopify Partner
3491 233 677

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.

What important thing did you learn this Black Friday?


Answers powered by coffee Buy Paul a ☕ Coffee for more answers or donate to eff.org

Problem Solved? ✔Accept and Like solutions to help future merchants

Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com

View solution in original post