Refresh Theme Logo Center and Navigation Menu left

[Cbrownz]

Hey so I am currently working on a back up of my site to get this working but I have gotten as this far.

Essentially I want the end product to look like this:

I currently have this:

With this code:

How do I go about getting the navigation menu on the left and the icon center?

In addition it would be really helpful to have the navigation bar use the full width!

Site: https://cardboardcathomes.com/

[made4Uo]

Hi @Cbrownz ,

Thank you for providing a nice image to compare. This help me a lot.

To change your header layout, please follow the instructions below.

1. Go to Admin page > Online store > Themes > Actions > Edit code
2. Open the base.css under the Asset folder.
3. Add the code below and click SAVE

@media screen and (min-width: 990px) {
.header--middle-left {
    grid-template-areas: "navigation heading icons"  !important;
    grid-template-columns: repeat(3, 1fr) !important;
    min-width: 100%  !important;
}
}

@media screen and (min-width: 990px) {
.header__heading, .header__heading-link {
    justify-self: center !important;
}
}

[Cbrownz]

That code makes the header like this:

[made4Uo]

Hi @Cbrownz ,

I made some modifications with the code

@media screen and (min-width: 990px) {
.header.header--middle-left.header--has-menu {
    grid-template-areas: "navigation heading icons"  !important;
    grid-template-columns: repeat(3, 1fr) !important;
    min-width: 100%  !important;
}

.header__heading {
    justify-self: center !important;
}
}

This is what it looks like with the code

[Cbrownz]

Thanks!

[abitsleepy]

Hello @made4Uo !
Your solution is very helpful to me too, however I got a little problem for my page would look like this, I really need your help

It’s crowded on the left. What can I do to make them on the same row like these ?

This is my website : www.abitsleepy.com

[iwonder]

@made4Uo , the problem is that the LOGO keeps moving off center when I navigate to another page… Any idea how to fix that please?

[iwonder]

@made4Uo , just found out that it can be fixed by adding the following.

grid-template-columns: 1fr auto 1fr;

instead of;

grid-template-columns: repeat(3, 1fr)

[greenvalleycode]

Hello, I also made this change to my code in Refresh theme. It looks great on my home page, however it looks different on subsequent pages and I’m not sure why. You can see the header logo is off-center on all pages other than my home page. Can you help?

www.greenvalleynutrition.com (Refresh theme is not yet active, you can find it in my draft themes)

[greenvalleycode]

Hello, I also made this change to my code in Refresh theme. It looks great on my home page, however it looks different on subsequent pages and I’m not sure why. You can see the header logo is off-center on all pages other than my home page. Can you help?

www.greenvalleynutrition.com

[Mraitanas]

Hi bro can send me your header code cuz i wanna do the same thing as you but I got a problem with my code if you want to help me I would appreciate it