How to make dropdown menu full width on hover?

jonela · ‎04-10-2024

Hello Everyone,

Here is how the dropdown from my mega menu currently looks:

I would like to change it to full width as in here:

Is there any way to do so?

Any response is highly appreciated.

Hardik2903 · ‎04-11-2024

Please replace my second code with this one.

<style>
  .list-menu li ul.header__submenu li a.header__menu-item {
    justify-content: center !important;
  } 
</style>

- Need a Shopify developer? Message Me here or Ping me

- Your Was it helpful?Buy me a Coffee would do Magic code
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications

View solution in original post

Hardik2903 · ‎04-10-2024

@jonela Please provide website url.

- Need a Shopify developer? Message Me here or Ping me

- Your Was it helpful?Buy me a Coffee would do Magic code
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications

jonela · ‎04-10-2024

Hello Hardik2903,

Here is the url: https://352124.myshopify.com/

Password: dewhin

Thank you very much,

Jonela

Hardik2903 · ‎04-11-2024

Please go to
1) Online store
2) Themes -> Edit theme
3) Layout
4) theme.liquid and paste this code before </head>

<style>
  .list-menu li ul.header__submenu {
    position: fixed;
    left: 0;
    width: 100%;
  }
</style>

If my solution works, then please accept it as a solution.

- Need a Shopify developer? Message Me here or Ping me

- Your Was it helpful?Buy me a Coffee would do Magic code
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications

jonela · ‎04-11-2024

It works now, thank you!!!

Is there a way to center the text rather than aligning to the left? Also, would you know how to add an image (possibly the image for the highlighted collection) next to the text?

Thanks a million!

Hardik2903 · ‎04-11-2024

I have provided code to move the menus to center. However, adding images to the Mega Menu is a bit complicated process which can take some time for coding.

Please go to
1) Online store
2) Themes -> Edit theme
3) Layout
4) theme.liquid and paste this code before </head>

<style>
  .list-menu li ul.header__submenu li.header__submenu a {
    justify-content: center;
  }
</style>

If my solution works, then please accept it as a solution.

- Need a Shopify developer? Message Me here or Ping me

- Your Was it helpful?Buy me a Coffee would do Magic code
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications

jonela · ‎04-11-2024

Hello,

I've added the code like this:

Unfortunately, it did not work.

Hardik2903 · ‎04-11-2024

Please replace my second code with this one.

<style>
  .list-menu li ul.header__submenu li a.header__menu-item {
    justify-content: center !important;
  } 
</style>

- Need a Shopify developer? Message Me here or Ping me

- Your Was it helpful?Buy me a Coffee would do Magic code
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications

jonela · ‎04-12-2024

Thank you, this worked. I will start another thread for adding an image.

Ashleigh_Gill · ‎04-13-2024

Hi, I'm having the same issue. I applied the same code as above but it didn't work. Would you mind letting me know where I've gone wrong. We require exactly the same thing as the original poster. Full width on hovering on collection.

Theme is Gem. Code on theme.liquid.

Top half of the code looks like this.

<!doctype html>
<html class="no-js" lang="{{ request.locale.iso_code }}" dir="{{ settings.text_direction }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="theme-color" content="{{ settings.color_button }}">
<link rel="canonical" href="{{ canonical_url }}">
<link rel="preconnect" href="https://fonts.shopifycdn.com" crossorigin>
<link rel="dns-prefetch" href="https://ajax.googleapis.com">
<link rel="dns-prefetch" href="https://maps.googleapis.com">
<link rel="dns-prefetch" href="https://maps.gstatic.com">

{%- if settings.favicon != blank -%}
<link rel="shortcut icon" href="{{ settings.favicon | img_url: '32x32' }}" type="image/png" />
{%- endif -%}

{%- render 'seo-title' -%}

{%- if page_description -%}
<meta name="description" content="{{ page_description | escape }}">
{%- endif -%}

{%- render 'social-meta-tags' -%}

Any help would be appreciated! - I hope OP doesn't mind. Only question I have seen which matches exactly what I need.

Thanks 🙂