How to fix this menu and make it look good like make the drop down below the shop by color tab now its very far and the which background also just on the drop down menu
website : https://a4fmj9-bx.myshopify.com/
password : rohbla
Hi @learning141 ,
Go to Online Store → Themes → Edit code
Open base.css or theme.css
Paste this code at the bottom
/* Target only the Shop by Color mega-menu */
#submenu-5 {
position: absolute;
top: 100%; /* drop right under the parent link */
left: 0; /* align with parent */
margin-top: 0;
background: #fff; /* white background only */
border: 1px solid #e0e0e0;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
z-index: 999;
width: auto; /* shrink to fit items instead of full width */
min-width: 200px;
padding: 10px 15px;
}
/* Adjust the inner mega-menu grid */
#submenu-5 .mega-menu {
margin: 0;
padding: 0;
background: transparent; /* keep only outer background */
box-shadow: none;
}
#submenu-5 .mega-menu__list {
display: flex;
flex-direction: column; /* stack items neatly */
gap: 6px;
}
/* Style individual links */
#submenu-5 .mega-menu__link {
display: block;
padding: 6px 10px;
color: #333;
text-decoration: none;
white-space: nowrap;
}
#submenu-5 .mega-menu__link:hover {
background: #f5f5f5;
border-radius: 4px;
color: #000;
}
Save and refresh preview.
Thanks
Manoj
@Manoj_j with this code the drop down menu is still not centered and now its not even visible
Hey @learning141
Follow these Steps:
- Go to Online Store
- Edit Code
- Find theme.liquid file
- Add the following code in the bottom of the file above </ body> tag
<style>
li.mega-menu__column.mega-menu__column--span-1 {
text-align: -webkit-center !important;
}
[data-menu-grid-id="MegaMenuList-5"] {
--menu-columns-desktop: 1 !important;
}
[data-menu-list-id="MegaMenuList-5"] {
--menu-columns-desktop: 1 !important;
}
</style>
RESULT:
If I managed to help you then a Like would be truly appreciated.
Best,
Moeed
@Moeed can we please make it just below the shop by color menu and remove the white background i just want to show the white background just below the drop down menu so it will god nice then
Replace the previous code with this code below.
<style>
li.mega-menu__column.mega-menu__column--span-1 {
text-align: -webkit-center !important;
margin-left: 25% !important;
}
[data-menu-grid-id="MegaMenuList-5"] {
--menu-columns-desktop: 1 !important;
}
[data-menu-list-id="MegaMenuList-5"] {
--menu-columns-desktop: 1 !important;
}
</style>
RESULT:
If I managed to help you then a Like would be truly appreciated.
Best,
Moeed
1 Like
Hi @learning141,
Please go to Customize > Theme settings > Custom CSS and add code:
.header-menu.mobile\:hidden .overflow-menu:after {
display: none;
}
.header-menu.mobile\:hidden .menu-list__list-item {
position: relative;
}
.header-menu.mobile\:hidden .menu-list__submenu {
min-width: 200px;
left: 0;
right: auto;
}
.header-menu.mobile\:hidden li.mega-menu__column.mega-menu__column--span-1 {
text-align: left !important;
}
If I helped you, then a Like would be truly appreciated.
2 Likes
@Moeed Great its now under the main button now please how to just make the white backgroud under the drop down menu not on all page when sub menu appears white background show on all page i just need it under the drop down menu please
@namphan its already centered how to remove the white background from drop down menu all page and only leave it under the drop down menu now its appearing on all page
Hi @learning141,
Did you add all my code? Just add it, it will show like you requested
@namphan i did and it not showing
@namphan yes its fixed can you please check and can we add some space or padding from above please
For some top padding, you can add this code with the same steps which I have mentioned above.
<style>
div#submenu-5 {
padding-top: 0.75rem !important;
}
</style>
RESULT:
If I managed to help you then a Like would be truly appreciated.
Best,
Moeed
1 Like
Hi @learning141,
Please add code:
.header-menu.mobile\:hidden .menu-list__submenu-inner {
padding-block-start: var(--submenu-padding-block-end);
}
1 Like
Hi there, this works perfectly! I’m still exploring the Horizon-themes and was hoping you could help me change the background of the dropdown. When added your code, the color changed. I need it to be matched with my header #23282C. Also I would love if there is a way to make the submenu-items full width; the text is now being cropped into 2lines:
Our
Story
–> In stead of: Our Story
Thanks!
Hi @namphan ,
Sorry my notifications were off I guess. I managed to fix the color issue, but changing the width of the menu-items would be great! Can I share the preview link? Code=kig.
Thanks!
Hi @IMYOURGIRL,
Please add code:
.header-menu.mobile\:hidden .menu-list__submenu-inner .mega-menu__grid {
left: 0 !important;
}