Have you set up the navigation section in your store? You should be able to set some things up there, including the drop downs. The next is to style it, either in the theme editor, or by going through css.
Depending on your theme you may have a choice between drop-down menu and mega-menu.
Looks like you have a mega-menu selected now.
Have a look in the settings of the header section.
Ideally, share a link to your store and preview password.
Mine is Horizon. Not sue about my menu type
www.cruzee.sg
Ah, Horizon only has mega-menu.
There are ways to fix this, for example you may try my solution posted there – Horizon theme: drop-down menu alignment - #19 by tim_tairli
tried just now, you can check, it shifted left side and drop menu now divided into 2/2, I mean first two with white background and last two with transparant background
Add this code right above the </style> in my code:
.mega-menu, .overflow-menu::part(overflow-list) {
background: var(--color-background);
}
.overflow-menu::part(overflow-list) {
grid-column: 1/4;
padding: 1.25rem;
}
ok, it fixed second problem but the drop menu still on the left side
Because you’ve put the code into assets/base.css instead of following instructions and adding a “Custom liquid” section – check this post too: Horizon theme: drop-down menu alignment - #13 by tim_tairli
You can’t put <style>, </style> and javascript code into stylesheet.
And I’ve amended the code above.
I wish I understand haha but thanks for trying to explain
Hi cruzee.sg,
I’d be happy to help with that! Looking at your screenshot, it seems the dropdown menu could benefit from some spacing, alignment, and styling adjustments to make it look cleaner and more polished.
Could you share your store URL and let me know which theme you’re using? If you’ve made any custom code changes to the header/navigation, that would be helpful to know as well. Once I have those details, I can take a closer look and suggest the best way to improve the dropdown appearance.
Looking forward to your reply!
Hi, there store is here https://cruzee.sg/ I use Horizon theme
I only added this code under assets #base.css :
.mega-menu {
background: var(–color-background);
}
li.menu-list__list-item { position: relative; } .menu-list__submenu-inner, .overflow-menu::part(overflow-list) { transform: none; } .header-menu .menu-list__submenu, .overflow-menu::part(overflow) { background: var(--color-background) !important; top: 100%; } .overflow-menu:has(button.menu-list__link:hover)::part(overflow) { visibility: visible; } .header-menu .menu-list__submenu, .overflow-menu::part(overflow) { min-width: fit-content; width:max-content; box-shadow: 2px 4px 8px 0px rgba(var(--color-border-rgb) / 0.1); clip-path: none; \--submenu-padding-block-start: 0.5rem; \--submenu-padding-block-end: 0.5rem; } \[slot=overflow\] .menu-list__submenu { box-shadow: none; } .overflow-menu::part(overflow) { right:0; left: auto !important; } .header-menu .menu-list__submenu.at-right { left: auto; right: 0; } .menu-list__submenu .mega-menu, overflow-list { \--full-page-grid-with-margins: 1.25rem 1fr 1.25rem; } .mega-menu__grid { display: flex; min-width: max-content; } ul.mega-menu__list.list-unstyled { display: flex; } .overflow-menu:after, .header__underlay { display: none; } overflow-list.overflow-menu { position: relative; }.mega-menu {
background: var(--color-background);
}
<style>
li.menu-list__list-item {
position: relative;
}
.menu-list__submenu-inner, .overflow-menu::part(overflow-list) {
transform: none;
}
.header-menu .menu-list__submenu,
.overflow-menu::part(overflow) {
background: var(--color-background) !important;
top: 100%;
}
.overflow-menu:has(button.menu-list__link:hover)::part(overflow) {
visibility: visible;
}
.header-menu .menu-list__submenu,
.overflow-menu::part(overflow) {
min-width: fit-content;
width:max-content;
box-shadow: 2px 4px 8px 0px rgba(var(--color-border-rgb) / 0.1);
clip-path: none;
--submenu-padding-block-start: 0.5rem;
--submenu-padding-block-end: 0.5rem;
}
[slot=overflow] .menu-list__submenu {
box-shadow: none;
}
.overflow-menu::part(overflow) {
right:0;
left: auto !important;
}
.header-menu .menu-list__submenu.at-right {
left: auto;
right: 0;
}
.menu-list__submenu .mega-menu, overflow-list {
--full-page-grid-with-margins: 1.25rem 1fr 1.25rem;
}
.mega-menu__grid {
display: flex;
min-width: max-content;
}
ul.mega-menu__list.list-unstyled {
display: flex;
}
.overflow-menu:after,
.header__underlay {
display: none;
}
overflow-list.overflow-menu {
position: relative;
}
</style>
<script>
window.addEventListener('load', () => {
let topSubMenus= document.querySelectorAll('[header-menu] .menu-list__submenu');
let checkMenus = () => {
if (window.innerWidth < 750) return; /* mobile drawer active */
console.log('Check menus');
topSubMenus.forEach( e=> {
let p = e.parentElement;
let er = e.getBoundingClientRect();
let pr = p.getBoundingClientRect();
if ( (pr.left + er.width) > window.innerWidth ) {
e.classList.add('at-right');
} else e.classList.remove('at-right');
});
};
let debounceTimeout;
setTimeout(checkMenus, 300);
window.addEventListener('resize', ()=> {
if (debounceTimeout) clearTimeout(debounceTimeout);
debounceTimeout = setTimeout(checkMenus, 300);
});
});
</script>
Again – you can not add this to your stylesheet assets/base.css
<style> and <script> tags are not valid there.
If you can’t add a “Custom liquid” section to a Footer in “Edit theme”, then you need to remove this code from the stylesheet and add it into your layouts/theme.liquid right above </body> line.
Note that there is a big difference between <body> and </body>, <style> and </style> and if you’re instructed to put code above </style>, do not put it above <style> or it will break your page.
So when putting the code below into theme.liquid, find the actual </body> in the file.
The code should be this:
<style>
li.menu-list__list-item {
position: relative;
}
.menu-list__submenu-inner, .overflow-menu::part(overflow-list) {
transform: none;
}
.header-menu .menu-list__submenu,
.overflow-menu::part(overflow) {
background: var(--color-background) !important;
top: 100%;
}
.overflow-menu:has(button.menu-list__link:hover)::part(overflow) {
visibility: visible;
}
.header-menu .menu-list__submenu,
.overflow-menu::part(overflow) {
min-width: fit-content;
width:max-content;
box-shadow: 2px 4px 8px 0px rgba(var(--color-border-rgb) / 0.1);
clip-path: none;
--submenu-padding-block-start: 0.5rem;
--submenu-padding-block-end: 0.5rem;
}
[slot=overflow] .menu-list__submenu {
box-shadow: none;
}
.overflow-menu::part(overflow) {
right:0;
left: auto !important;
}
.header-menu .menu-list__submenu.at-right {
left: auto;
right: 0;
}
.menu-list__submenu .mega-menu, overflow-list {
--full-page-grid-with-margins: 1.25rem 1fr 1.25rem;
}
.mega-menu__grid {
display: flex;
min-width: max-content;
}
ul.mega-menu__list.list-unstyled {
display: flex;
}
.overflow-menu:after,
.header__underlay {
display: none;
}
overflow-list.overflow-menu {
position: relative;
}
.mega-menu, .overflow-menu::part(overflow-list) {
background: var(--color-background);
}
.overflow-menu::part(overflow-list) {
grid-column: 1/4;
padding: 1.25rem;
}
</style>
<script>
window.addEventListener('load', () => {
let topSubMenus= document.querySelectorAll('[header-menu] .menu-list__submenu');
let checkMenus = () => {
if (window.innerWidth < 750) return; /* mobile drawer active */
console.log('Check menus');
topSubMenus.forEach( e=> {
let p = e.parentElement;
let er = e.getBoundingClientRect();
let pr = p.getBoundingClientRect();
if ( (pr.left + er.width) > window.innerWidth ) {
e.classList.add('at-right');
} else e.classList.remove('at-right');
});
};
let debounceTimeout;
setTimeout(checkMenus, 300);
window.addEventListener('resize', ()=> {
if (debounceTimeout) clearTimeout(debounceTimeout);
debounceTimeout = setTimeout(checkMenus, 300);
});
});
</script>