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.
Hi @slidein_india , kindly provide your store URL please and if it is password protected, please share the password as well. Thanks
- Go to Online Store → Theme → Edit code.
- 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!
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
Hey,
Thanks a ton. Wanted to know..will this work if I replace any of the menu items ?
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
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