How to centre menu items underneath logo in header

Store Design
1

Ive tried a few codes i found via google but none of them seem to have done the trick, is there a was to do this in dawn?

https://bauhouseinteriors.com/

password: ohsuri

2

@natsirt89
you need to put main class of logo class and menu class like below shown in pic into header.liquid file

Ujjaval_0-1679904837801.png
Ujjaval_0-1679904837801.png1587Ă—741 127 KB

and need to put below css into base.css file

@media screen and (min-width: 990px){
.header {
    text-align: end;
}
.header_logo_menu {
    display: flex;
    flex-direction: column-reverse;
}
}
3

Hi @natsirt89

This is Victor from PageFly - Shopify Page Builder App, I’d like to suggest this idea:

you can set it up here.

PageFlyVictor_0-1679905170465.png
PageFlyVictor_0-1679905170465.png1890Ă—897 190 KB

Hope you find my answer helpful!

Best regards,

Victor | PageFly

1 Like
4

@natsirt89
Hello,

.header__inline-menu {
	position: absolute;
	bottom: 20px;
}
.header.header--middle-center.header--mobile-center.page-width.header--has-menu {
	display: table;
}

Add this css at the bottom of Online Store->Theme->Edit code->Assets->theme.scss.liquid

Like This

Andrue0101_0-1679905316267.png
Andrue0101_0-1679905316267.png1618Ă—937 159 KB

5

Hi @natsirt89 ,

Glad to support you today.

To can Centre Menu Items Underneath Logo In Header, you can checkout my suggestion below to make it:

  1. Go to customize theme on shopify admin:

GemPages_0-1679976675743.png
GemPages_0-1679976675743.png1860Ă—888 104 KB

  1. Click the Header and choose Top center option:

GemPages_1-1679976713526.png
GemPages_1-1679976713526.png1889Ă—910 129 KB

Hope you find my answer helpful!

Kind & Best regards,
GemPages Support Team.

6

Hello, thank you for your help.

I couldn’t find “theme.scss.liquid” anywhere so i put it at the bottom of “theme.liquid” but it didn’t work so then i put it at the bottom of “base.css” and it did centre it a little but if you can log on and check my page you can see there is an error and it isn’t centred and sits behind the logo a little.

Am i doing something wrong or is the code wrong?

Thank you