Need assistance with moving header navigation below logo in Ella shopify theme

Store Design
, , , ,
1

Dear all,

Kindly assist me as I am a no-coding person :slightly_smiling_face:

I want my header navigation to get below the logo on my shopify store: tinylux.store

Any advice would be greatly appreaciated,- thnx

1 Like
2

Hi @Beat09 that’s an advanced theme customization to heavily modify the layout of a third party marketplace theme.

If you need this customization then contact me for services.
Email contact info in forum signature.
ALWAYS please provide context, examples: store url, theme name, post url(s) , or any further detail in ALL correspondence.

3

@Beat09 please add this css to the very end of your base.css file and check,
Shopify Admin → Online Store ->Theme → Edit code → base.css

@media (min-width: 990px) {
.header-bottom-left{order: 1; flex-basis: 50%; justify-content: flex-start; display: flex;}

.header-items.header-bottom-right{order: 2; flex-basis: 50%; justify-content: end;    display: flex;}

.main-menu.header-bottom-center.label-main-menu{order: 3; flex-basis: 100%;
justify-content: center; display: flex;}
}

suyash1_0-1737820832128.png
suyash1_0-1737820832128.png1366×768 171 KB

1 Like
4

Hi Suyash1,

thnx a mil for prompt response..

I did as you instructed (see screenshot below)

However, being slightly in doubt, whether this is where/how I should put it

Beat09_0-1737821072843.png
Beat09_0-1737821072843.png1197×742 45.1 KB

5

Avoid modifying files directly, for bits of css use custom css settings instead to avoid damaging themes.

https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/add-css

6

@Beat09 correct

7

hi again,

seems not to make a difference ??

8

@Beat09 remove all lines in previous given css and add this

@media (min-width: 990px) {
.header-bottom-left{order: 1; flex-basis: 50%; justify-content: flex-start; display: flex;}

.header-items.header-bottom-right{order: 2; flex-basis: 50%; justify-content: end;    display: flex;}

.main-menu.header-bottom-center.label-main-menu{order: 3; flex-basis: 100% !important;
justify-content: center; display: flex;}

.header-bottom.d-flex {flex-wrap: wrap;}
}
1 Like
9

Suyash, GREAT it worked :slightly_smiling_face:

however, I would like it aligned to the left (not center) could you modify ?

thnx a mil

10

you have

.main-menu.header-bottom-center.label-main-menu{order: 3; flex-basis: 100% !important;
justify-content: center; display: flex;}

change that center to left

1 Like
11

Excellent - thank you it all works now :clap:

12

@Beat09 , @suyash1 gave you a lot of effort for free like, and mark their work as the solution.

1 Like
13

@Beat09 - welcome