Shopify themes, liquid, logos, and UX
I'm trying to split my navigation links so that there are 2 on either side of the centered logo. I found a related tutorial and while it did work to split the navigation, the first 2 links are too far to the left and overlapping with the search icon (for most screen widths). I want the 2 links to be equal distance from the logo on each side that also adjust with screen width.
This is the custom css I added as instructed by the tutorial:
1. Themes > More Options > Edit Code
2. Assets > add a new asset > create a blank file > create a custom.css
3. In theme.liquid find (Ctrl+F): {{ 'base.css' | asset_url | stylesheet_tag }}
4. Paste underneath the base.css line: <link rel="stylesheet" href="{{ 'custom.css' | asset_url }}">
5. Open custom.css in Assets and paste the following:
.header__inline-menu {
position: absolute;
top: 25%; /* Adjust's verticle position */
pointer-events: none; /* Disables Menu */
}
/* Chooses which menu item to target */
.list-menu--inline li:nth-child(#) { /* Change '#' to the position (number) of the menu item to add the margin after */
margin-right: 175px; /* Adds a margin to break the menu in half */
}
/* Activates Menu Buttons */
.header__menu-item {
pointer-events: auto;
}
Can anyone help me adjust the spacing of the links? Thanks so much!
Screenshot for reference:
Hi, @thanksforhostin
Can you please share the store URL so that I can assist you?
I have checked your store. I can help you with it. But it needs to add some custom code. If you need my help, please let me know.
I sent you an email, thank you.
Hi @AnneLuo - just checking to see if you received my message or email. Still looking to solve this issue. Thank you.
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024