How to change logo and menu position

[Nxte]

I’m trying to get my logo all the way to the left and my menu items all the way to the right for my header. Any way to do this?

[kazi_1]

Hello @Nxte
Please share your store address

[Nxte]

Upryze Studios

[kazi_1]

Add this CSS in base.css file

.header–middle-left {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 10px;
}

.header__inline-menu {
justify-self: end;
}

[Dan-From-Ryviu]

Please add this code to Custom CSS in theme settings

@media (min-width: 750px) {
  . header .header__inline-menu {
    grid-area: icons;
    justify-self: end;
  }
}

Best regards,
Dan from Ryviu: Product Reviews App

[Nxte]

Didn’t seem to work. Is there a specific place I need to put it?

[Dan-From-Ryviu]

@Dan-From-Ryviu

@media (min-width: 750px) {
  . header .header__inline-menu {
    grid-area: icons;
    justify-self: end;
  }
}

My bad, it has a space in the code, so it doesn’t work. Please update the code

@media (min-width: 750px) {
  .header .header__inline-menu {
    grid-area: icons;
    justify-self: end;
  }
}

[Nxte]

this worked thank you! also curious if there was a way to put the menu and the logo near the edge of the screen kinda like this?

[DitalTek]

@Nxte

The issue happen because your logo has top and bottom space to big, you re-design by reduce top/bottom space:

[Dan-From-Ryviu]

As @DitalTek mentioned, this issue is caused by the square logo of your store, which has blank space at the top and bottom. Please crop it to remove those spaces, then center the menu and the logo near the edge of the screen.
If you don’t know how to crop your log,o then download this file and update it to your logo

[Nxte]

Did that, have to say much happier with it cropped. Thank you!

[Dan-From-Ryviu]

You are very welcome!