REPOSITIONING MENU ITEMS IN HEADER

[slidein_india]

Hi,

On the desktop view of my website, I'd like to place few menu items between the finder and the logo that is centred on the header and the other half menu items on the right side between the logo and account login icon. 

[websensepro]

Hi @slidein_india  , kindly provide your store URL please and if it is password protected, please share the password as well. Thanks

[slidein_india]

Hi,

www.slidein.co.in 

I'm using the dawn theme.

[websensepro]

Hi @slidein_india 

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.

@media(min-width:990px){
ul.list-menu.list-menu--inline li:nth-child(3) {
    position: absolute !important;
    top: 17px !important;
    left: 23% !important;
}
ul.list-menu.list-menu--inline li:nth-child(6) {
    position: absolute !important;
    top: 17px !important;
    right: 23% !important;
}
}

If my reply is helpful, kindly click like and mark it as an accepted solution.
If you are happy with my help, you can help me buy a COFFEE
Thanks!

[Techwolf · Accepted solution]

HI @slidein_india 

add this css on base.css file at very bottom of the file: 

nav.header__inline-menu li:nth-child(4) {
    margin-right: 80px;
}
a.header__heading-link.link.link--text.focus-inset {
    margin-left: 78px;
}

    .header:not(.header--middle-left,.header--middle-center) .header__inline-menu {
        margin-top: -7.95rem;
    }

Result : 

Thanks and regards

[slidein_india]

Hey,

Thanks a ton. Wanted to know..will this work if I replace any of the menu items ?

[Techwolf]

Add This css Like this 

@media only screen and (min-width: 768px) {
nav.header__inline-menu li:nth-child(4) {
    margin-right: 80px;
}
a.header__heading-link.link.link--text.focus-inset {
    margin-left: 78px;
}

    .header:not(.header--middle-left,.header--middle-center) .header__inline-menu {
        margin-top: -7.95rem;
    }
	}

with this it did not affact your mobile view 

Thanks

[slidein_india]

can you also tell me how could I remove the extreme right and left blank spaces..not completely but this margin is too much. And wanted to centre the logo. Now it feels the header is slightly aligned to the right