Centered logo with split navigation in header (Dawn Theme)

Centered logo with split navigation in header (Dawn Theme)

thanksforhostin
New Member
5 0 0

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:

Screenshot 2024-10-21 at 4.39.50 PM.png

Replies 5 (5)

AnneLuo
Shopify Partner
1031 196 219

Hi, @thanksforhostin 

Can you please share the store URL so that I can assist you?

If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.
- Feel free to Email Me   

Buy Me A Coffee

thanksforhostin
New Member
5 0 0

Hi Anne - thank you!

 

site: 4krvmd-zc.myshopify.com
password: reblia

AnneLuo
Shopify Partner
1031 196 219

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.

If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.
- Feel free to Email Me   

Buy Me A Coffee

thanksforhostin
New Member
5 0 0

I sent you an email, thank you.

thanksforhostin
New Member
5 0 0

Hi @AnneLuo  - just checking to see if you received my message or email. Still looking to solve this issue. Thank you.