How can I align header icons with my navigation menu?

Store Design
1

Hey, please help me to align header icons with navigation menu , if there any way to do so

what I have now

ScreenShot_20221019195437.png
ScreenShot_20221019195437.png1365×394 45.6 KB

what I want (please

ScreenShot_20221019200125.png
ScreenShot_20221019200125.png1320×305 26.3 KB

my shop url: you-boho-vibes.myshopify.com

password**: sotroy**

2

Hi @hamza-elkaissi ,

Don’t seem to see the same layout as shown on "what I have now". Your current navigation looks like this from our end:

layoutbase_0-1666250936267.png
layoutbase_0-1666250936267.png1167×119 7.63 KB

But we can provide some edits to center-align the dropdown:

  1. Go to Online Store → Theme → Edit code
  2. Assets/base.css → paste the following code:
@media screen and (min-width: 990px){

.header--middle-center {

   display: flex;

   flex-flow: wrap;

   position: relative;

}

.header__heading, .header__heading-link {

 order: 1;

 width: 100%;

 text-align: center;

}

.header__inline-menu{

   order: 2;

   flex: 0 0 50%;

   margin-left: auto;

   justify-content: center;

   text-align: center;

}

.header__icons {

order: 3;
width: 25%;

}

.header__search {

position: absolute;

    left: 0;

      Width: 100%;

}

.header__search details[open] .modal-overlay:after {

 min-width: 100vw;

        left: 50%;
        transform: translateX(-50%);

}

       }

After that, it should look like this:

layoutbase_1-1666251027488.png
layoutbase_1-1666251027488.png1228×151 7.97 KB

If the problem persist, we can further assist you here: https://www.layoutbase.com/build-my-page

Cheers,

Layoutbase - drag & drop page-builder

1 Like
3

hey, thank you for writing that code for me really appreciate it, buy unfortunately when I apply it my head looks like this

ScreenShot_20221020174242.png
ScreenShot_20221020174242.png1352×231 14.7 KB

by the way now if you visit the store you will see the same layout that I previously shared