How can I center my header menu to avoid logo overlap?

[Edricpoh]

Can anyone help me with this issue?

My header menu is not centered on the header bar.

Currently it is slightly to the left of the entire header bar and thus when I minimize my window or make my window smaller, my 'home' button would end up being blocked by my logo.

I would like my header menu to be centered and such that when the screen size is changed, it will not be blocked by my logo etc.

Website: https://cheeknchubbs.com

Password: admin

[dmwwebartisan · Accepted solution]

@Edricpoh 

 Please try this code 1. Go to Online Store->Theme->Edit code 2. Asset->/styles.scss.liquid-->paste below code at the bottom of the file.

.main-nav .nav {margin-left: 10% !important;}

Thanks!

[KetanKumar]

@Edricpoh 

oh sorry for that issue can you please confirm this look

[Edricpoh]

Hi yes,

Because my initial concern was, I wanted to make my logo bigger but when I enlarge the logo, the header bar gets thicker with the logo.

I wanted only the logo, text, login, shopping cart icon to be bigger but the header banner size remains the same.

but when I change one, the other changes as well.

So far I have received solution to copy the following at the bottom of my css

.menu-position--inline .header__logo {
width: 100%;
position: absolute !important;
}

.top-bar .social_icons { z-index: 9;}

.main-nav .nav {margin-left: 10% !important;}

I see that it works too!

However, If I want to change the colour of the 'Login' and the shopping cart icon to be the same colour as my menu font colour, can it be done?

[KetanKumar]

@Edricpoh 

yes please just remove logo blank spacing and upload again