Solved

How to make dropdown menu full width on hover?

jonela
Tourist
7 0 1

Hello Everyone,

 

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

 

Screenshot 2024-04-10 at 16.52.14.png 

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

Screenshot 2024-04-10 at 16.53.23.png

 

Is there any way to do so?

Any response is highly appreciated.

Accepted Solution (1)
Hardik2903
Explorer
55 6 7

This is an accepted solution.

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>

View solution in original post

Replies 9 (9)

Hardik2903
Explorer
55 6 7

@jonela  Please provide website url.

jonela
Tourist
7 0 1

Hello Hardik2903,

 

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

Password: dewhin

 

Thank you very much,

Jonela

Hardik2903
Explorer
55 6 7

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.

jonela
Tourist
7 0 1

It works now, thank you!!!

Screenshot 2024-04-11 at 15.29.06.png

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
Explorer
55 6 7

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.

jonela
Tourist
7 0 1

Hello,

 

I've added the code like this:

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

Unfortunately, it did not work.

Hardik2903
Explorer
55 6 7

This is an accepted solution.

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>
jonela
Tourist
7 0 1

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

Ashleigh_Gill
Tourist
10 0 1

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 🙂