How can I change the style of my dropdown menu?

[WVU]

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!

[DitalTek]

@WVU

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%);
    }
}

[WVU]

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

[DitalTek]

@WVU

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:

[WVU]

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!