How can I change the style of my dropdown menu?

How can I change the style of my dropdown menu?

WVU
Tourist
12 0 1

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:

WVU_0-1726739381764.png

 

Desired menu-style:

WVU_0-1726739561802.png

 


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!

Replies 4 (4)

VIEKIN
Shopify Partner
774 93 110

@WVU 

Do you want change style for menu look like this?

VIEKIN_0-1726741569193.png

VIEKIN_1-1726741582493.png

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%);
    }
}
You can please Like and Accepted Solution if my suggestion helpful. And if you want to customize or develop new feature on Theme or App => Contact to us via Email or Skype.
- Contact Support : Gmail | Skype: live:.cid.309f2fbaceec513
WVU
Tourist
12 0 1

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:

WVU_0-1726742103847.png


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

VIEKIN
Shopify Partner
774 93 110

@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:

VIEKIN_2-1726743087562.png

 

 

You can please Like and Accepted Solution if my suggestion helpful. And if you want to customize or develop new feature on Theme or App => Contact to us via Email or Skype.
- Contact Support : Gmail | Skype: live:.cid.309f2fbaceec513
WVU
Tourist
12 0 1

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.
WVU_0-1726745836531.png


How do I add a picture to the menu item? 
I'd love to have it look like this:

WVU_1-1726746006129.png

 

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!