Shopify themes, liquid, logos, and UX
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!
Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024In today’s interview, we sat down with @BSS-Commerce to discuss practical strategies f...
By JasonH Nov 13, 2024