How can I centrally align my navigation and position my logo to the left in Spark theme?

Store Design
1

I’m working in the Spark theme and I’ want to have my logo on the left and move my nav to the center. I’m not given that option in the theme settings and struggling to do this on my own in the CSS. I think I need to add a new div in the header and then add to my theme.css? See attached screenshot showing what I have now.

any help would be awesome

Screen Shot 2022-08-22 at 3.44.26 PM.png
Screen Shot 2022-08-22 at 3.44.26 PM.png2536×264 52 KB

1 Like
2

Hi @acv_drew

Do you mind sharing your website so we can provide a code specific for you?

3

does this work?

https://reeltoreelhaven-com.myshopify.com/

4

I sent you my info directly. Thanks for any help you can provide me.

5

Hi @acv_drew ,

Thank you for sharing. Please follow the instructions below

  1. From your Admin Page, click Online Store > Themes >Actions > Edit code
  2. In the Asset folder, open the theme.css
  3. Paste the code below at the very bottom of the file.
@media (min-width: 60em) {
.header--center.header--inline div.header__center {
grid-area: 1/1;
    justify-content: flex-start !imporant;
}

.header__left {
    grid-area: 1/4;
}

.header__right {
    grid-area: 1/3;
}

.header__below-center {
    grid-area: 1/2;
}
}
6

To have it exact as your image, the menu on left. Please change the provided code above

@media (min-width: 60em) {
.header--center.header--inline div.header__center {
grid-area: 1/1;
    justify-content: flex-start !imporant;
}

.header__left {
    grid-area: 1/4;
}

.header__right {
    grid-area: 1/3;
}

div.header__below-center {
    grid-area: 1/2;
    margin-left: 200px;
    justify-content: flex-start;
}
}
7

that worked - but my logo came with it - anyway to keep the logo on the left? -

the nav is perfect!

Thank you!

8

@acv_drew Sorry got a typo in the code. Here you go

@media (min-width: 60em) {
.header--center.header--inline div.header__center {
grid-area: 1/1;
    justify-content: flex-start !important;
}

.header__left {
    grid-area: 1/4;
}

.header__right {
    grid-area: 1/3;
}

div.header__below-center {
    grid-area: 1/2;
    margin-left: 200px;
    justify-content: flex-start;
}
}
9

Thank you!!!

10

thank you !!

11

To make the menu center, you can use the code instead

@media (min-width: 60em) {
.header--center.header--inline div.header__center {
grid-area: 1/1;
    justify-content: flex-start !important;
}

.header__left {
    grid-area: 1/4;
}

.header__right {
    grid-area: 1/3;
}

.header__below-center {
    grid-area: 1/2;
}
}
12

I’m noticing something now that "stories, about and contact aren’t working in the nav. Is that something you might be able to help me with?

13

https://w3li9vq0ueeyre8n-65296204000.shopifypreview.com

14

any thoughts on why this is happening?

1 Like
15

Hi @acv_drew ,

I replied to your message. You just need to adjust the z-index