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!
Starting a B2B store is a big undertaking that requires careful planning and execution. W...
By JasonH Sep 23, 2024By investing 30 minutes of your time, you can unlock the potential for increased sales,...
By Jacqui Sep 11, 2024We appreciate the diverse ways you participate in and engage with the Shopify Communi...
By JasonH Sep 9, 2024