Hi,
My website is: https://utrecht-winkel.nl/
I would like to change my drop down menu to get rid of the excess red, page-width filling menu and would like to have a more subtle menu like the pic below.
Current menu:
Desired menu-style:
I’m not too sure which CSS code I should be changing and how.
Would anyone be able to assist me with this?
Thanks a lot in advance!
Do you want change style for menu look like this?
If that, you can go to Admin → Online Store → Themes → Customize Code → assets/styles.css
and then add short code here at the bottom of that file:
@media (min-width: 768px) {
.section-header .navigation .navigation__tier-2-container {
position: absolute;
z-index: 10;
top: 100%;
left: 50%;
width: 100%;
pointer-events: none;
visibility: hidden;
opacity: 0;
transition: opacity .15s ease-in-out;
text-align: left;
max-width: max-content;
transform: translateX(-50%);
}
}
Hi Viekin,
Thanks a lot for your reply and offered solution!
That’s almost the desired result, however the menu items are not completely alligned with where the menu item is on the page, see:
Would you happen to know a fix for this as well? Thanks a lot again!
It’s not a necessity to have the menu items listed in 2 seperate columns, these may be one column as well should that make it easier possibly.
Kind regards,
Teun
You can add more a short code here to same file above:
.section-header .navigation .navigation__tier-2-container {
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
This is result:
Thanks!
Unfortunately, menu item “Over ons” → “Contact” is still all the way over to the left with a lot of excess red bit around it.
How do I add a picture to the menu item?
I’d love to have it look like this:
1 column, all equally alligned, picture to the right of the menu items and fonts a little bit reduced.
Sorry for the hassle, and I greatly appreciate your support!
