How to move search and cart icons to the right, whilst keeping menu and logo centred? Brooklyn

Store Design
1

Hello,

I’ve managed to move my logo and menu items to the centre of my navigation bar. However, the code I have followed has also dragged the cart and search buttons along with the menu items. I

I’m wondering if I can keep the menu items and logo centred but push search and cart ions back to the far right side of the navigation bar.

It seems like others on the Shopify forum have had the same issue as me but I can’t find a solution to this specific query.

https://slicktokofficial.myshopify.com/

I will paste the code I found to centre everything on the nav bar below.

@media only screen and (min-width: 768px) {
.site-header .large–text-right {
text-align: center !important;
}
.site-header .grid–table .large–two-thirds {
width: 100%;
float: none !important;
display: block !important;
}
.site-header__logo {
text-align: center;
font-size: 1.5625em;
display: block;
float: none !important;
}
.site-header__logo {
text-align: center;
font-size: 1.5625em;
display: block;
float: none !important;
}
.site-header .large–one-third {
width: 100%;
display: block !important;
}
}

Many thanks

2

hi @SlickTok !
I checked and see, the reason here is cart and search icons inside menu, so when you style css to menu it will be affect to icons.

Screen Shot 2022-05-06 at 23.00.42.png
Screen Shot 2022-05-06 at 23.00.42.png2480×1256 475 KB

So the solve to you:

Screen Shot 2022-05-06 at 23.17.22.png
Screen Shot 2022-05-06 at 23.17.22.png2556×1194 551 KB

Hope will helpful to you!

3

Hi @SlickTok ,

To reposition the icons to the right, you can use the position absolute. Just add the code below to your theme.scss file.

#AccessibleNav > li:nth-child(4) {
    position: absolute;
    right: 5%;
}

#AccessibleNav > li:nth-child(5) {
    position: absolute;
    right: 2%;
}
1 Like
4

Amazing, thank you!

This has worked perfectly.

1 Like