How to center logo with split navigation? (Dawn)

[Monkeyshyne95]

I am currently using the Dawn theme, but I am not particularly satisfied with the header options... Trying to find a way to get my logo and navigation to sit in my header LIKE THIS - Thanks!

[MaBa]

Hi, i have the same need. did you find a way to do it?

[matejsmicka]

Hi guys, in case someone is still looking for a solution. Here is my wokraround. Your menu should have even number of items.

1. in the theme customization select header and in the left menu for "desktop logo position" choose "top center"

2. then in the top left corner of your screen there is an escape button, name of your theme, live indicator and three dots - click on the dots - and select "edit code"

3. in the left menu click on "assets", then click on "base.css" and scroll to the bottom of the css file

4. insert this code and change the pixels if you need to.

.header {
height: 80px;
}

.header__inline-menu {
transform: translateY(-52px);
}
.list-menu--inline li:nth-child(4) {
margin-left: 170px;
}

[Villageconcept]

I tried this and it looks great in the live preview however will not save on my 'Taste' theme.

I keep getting the red warning 'Online Store Editor Session Can't Be Published'

Is there a way round this?

[matejsmicka]

Hi,

well I was googling and all I could find was that you can't use position:absolute anywhere in the css. So do you use it for some other elements maybe? If not, then I don't know what the problem could be.

[EBONPYRE]

Disclaimer: I am not a coder nor do I understand code much, but here is how I did it.

Note: Under Themes > Customize > Header I have 'Desktop Logo Position' set to 'Top Center'

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;
}

I needed to use the pointer-events because after splitting the menu, the logo was unclickable (as if the menu was on top, blocking it). The solution was to turn off the entire menu and then override the buttons to be active.

It worked like a charm! I even tested by logging into my website in an incognito tab.

PS. You could add another part to target the last menu item if the menu itself is off-center:

/* Push Whole Menu Left */

.list-menu--inline li:nth-child(#) { /* Change '#' to the total number of menu items */
margin-right: 30px; /* Adds a margin to push the menu left*/
}

[thanksforhostin]

I did the steps you said and added the custom css and while it did work, it needs some tweaks and i'm not sure how to do it.  I can get the 2 links to ok on the right side of the logo but I can't seem to figure out how to adjust the first 2 (home, how it works) to be equal distance on the left side and not behind the search icon.  Any advice?