Desktop one line,hamburger icon click issue, policy page

kashco · ‎03-09-2025

Hi everyone !

This is my website: https://kashco-interiors.myshopify.com/?_ab=0&_fd=0&_sc=1. I tried to add a mega menu in desktop which affected my actual original menu style:

1. Mobile: 3 dotted lines disappears upon click in mobile - it should stay visible at all times.

2. desktop: menu should be one line kindly. How can we fix this

3. My policy page in desktop looks great. But in mobile view: I don't know why it differs how can we fix that to match desktop view ?

Please do share ideas on how to fix this. I can provide access to someone who knows how to provide expert help but is 100% sure. Unfortunately, I live in country where even making website is very expensive so I have to do all things with help of community. Your help is appreicated.

Dotsquares · ‎03-09-2025

Hi @kashco

Thanks for sharing the website URL, by initially viewing this I can suggest that the website is experiencing layout issues after adding the mega menu.

However, I can look into this in a detailed manner and come back with a solution if you can share access to the website to help you better.

Dotsquares Ltd

Problem Solved? ✔ Accept and Like solution to help future merchants.

Shopify Partner Directory | Trustpilot | Portfolio

kashco · ‎03-09-2025

Hi. Yes you're right. It did happen after I manually added mega menu using youtube tutorial, which helped me to a great deal. Please let me know if you're an expert as I don't want any last issues.

I forced issue 3 to be fixed using some css for mobile. However, prior loading it buffers. Also, I want a follow us above the social media only in desktop view but it should match the other heading style.

Please view your message.

cravenjack01 · ‎03-09-2025

For the menu issues, you might need some custom CSS to ensure the mobile icon stays visible and the desktop menu stays in one line. As for the policy page, check if your theme has mobile-specific styles affecting it shutters Conroe tx. A quick fix could be adjusting the CSS for consistency across views.

kayakakan · ‎03-11-2025

Hello, I am going to try to give you solutions to each problem, in the simplest manner. So here are my solutions:

1. Disappearing menu icon on mobile

In base.css inside the assets folder, find this rule:

details:not([open]) > .header__icon--menu .icon-close,
details[open] > .header__icon--menu .icon-hamburger {
  visibility: hidden;
  opacity: 0;
  transform: scale(0.8);
}

And you either remove it or comment it out like so:

details:not([open]) > .header__icon--menu .icon-close,
details[open] > .header__icon--menu .icon-hamburger {
  /* visibility: hidden; */
  /* opacity: 0; */
  /* transform: scale(0.8); */
}

You can chose to keep the transform if you want the hamburger menu to be smaller when open.

2. Keeping the menu on one line

In header.liquid inside the sections folder, find this rule:

.list-menu--inline {
  display: inline-flex;
  flex-wrap: wrap;
}

And you either remove or comment out the flex-wrap property, like this:

.list-menu--inline {
  display: inline-flex;
  /* flex-wrap: wrap; */
}

After that, you may see that the words Home Decor are on two lines, if this bothers you, go to the .list-menu rule and add the text-wrap-mode:nowrap; property to it:

.list-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  text-wrap-mode: nowrap;
}

3. Policy pages differ between desktop and mobile

For this one, I'm not sure it's the best solution, but it is definitely the most simple and easy to revert. Go the theme.liquid and locate your body tag, it should look like this:

<body class="gradient{% if settings.animations_hover_elements != 'none' %} animate--hover-{{ settings.animations_hover_elements }}{% endif %}">

Then, you simply add the class name of the color scheme that suits your pages better, I think 3 is the best choice to get a good result:

<body class="color-scheme-3 gradient{% if settings.animations_hover_elements != 'none' %} animate--hover-{{ settings.animations_hover_elements }}{% endif %}">

Hopefully I addressed all of your issues, and if that's the case, then leave a like and mark the answer as the solution.

Desktop one line,hamburger icon click issue, policy page