REPOSITIONIG MENU ITMES AND LOGO IN HEADER. CENTRE ALIGNMENT AND MARGIN TO THE LEFT AND RIGHT

[slidein_india]

Hi,

I would like to centre my header menu which is currently slightly to the right. I want the logo to be in the centre. Have attached a screenshot for a rough idea. Also need to reduce the margin space on either side of the header. 

Need these corrections only for desktop view. it should not effect mobile view. 

In, the mobile view Need to correct the alignment as well. Need to centre the logo and reduce the banner and header size. including font and logo size. For reference i've attached mobile view of my website and a mobile view of how I would like the banner and header size.

My website is www.slidein.co.in

I'm using dawn theme.

[Bundler-Manuel]

Hi there @slidein_india  for centering the menu, I believe this could should work for you 

<style>

.header__inline-menu {
text-align: center;
}

</style> 
Give it a try and let me know whether it’s successful 

[ShreyaRevize]

Hi @slidein_india,

Thanks for sharing the details and screenshot! Centering the logo and menu, reducing margins, and adjusting the header will require tweaks to the Dawn theme’s CSS. We’ll need to review the existing styles and make desktop-specific changes without affecting mobile.

Let me know if you’d like us to handle this for you!

Best,
Shreya | Revize

[EstherBui]

Hi @slidein_india 

Here is the code to reduce space on both headers. 

You can follow this instruction:

1. Go to Shopify > Theme > Customize

2. Copy and paste this code on Theme settings > Custom CSS section

@media screen and (min-width: 1024xp){
header.header {
padding-inline: 0 !important;
max-width: unset !important;
}
}

About the logo being misaligned, both the logo and the menu are centered. However, you customized the code earlier to align the logo with the menu. You also added CSS to create a space between the menu and the logo. This makes it look misaligned because the text length on either side of the menu is different.

I recommend leaving it as it is, or moving the menu below the logo.

I hope it helps. 

Esther

[slidein_india]

Hi,

The code isn't working for me. Thanks for the explanation regarding the alignment. I understand and have left it untouched as it's properly aligned in the desktop view now. My only concern now is in the mobile view on the main page the logo is aligned at the centre but when you navigate to any other page. collections or faq etc the logo's alignment shifts to the right. Can you help me solve that. And also, the code for removing the spaces to the left and right aren't working in mine.