How to Left Align logo and Keep Menu bar in the middle. DAWN THEME

Store Design
1

Is there a way to left align the logo and keep the menu bar in the middle for all the pages?

The following picture depicts the scenario I want to do

A.PNG
A.PNG1822Ă—830 151 KB

Earlier on I used a code block and it changed only the home page, but what I want is to make the change on all pages.

The code block I used earlier is (used it on base.css) :

.header.header--top-center.page-width.header--has-menu {
	position: relative;
}
.header__heading {
	position: absolute;
	left: -232px;
	top: 5px;
}

URL: Abbasi (theabbasiandsons.myshopify.com)

Password: testingpage

1 Like
2

@noQueNoAe

Hi,

To resolve the top navigation issue, please follow the steps below.

  1. Go to Online Store > Customize > Header > Select Desktop logo position “Middle left” as below.

20220810_024149.png
20220810_024149.png347Ă—721 31.7 KB

  1. Save and Exit

  2. Go to Actions > Edit code > Assets > open base.css file

  3. Add the code below to base.css file

@media screen and (min-width: 740px) {
  .header {
    display: flex !important;
    justify-content: space-between;
    width: 100% !important;
    margin-left: auto;
    margin-right: auto;
  }
}
  1. Save & Exit

It will be as below.

20220810_025121.png
20220810_025121.png1785Ă—402 256 KB

If you resolve the issues, please click “Like” and “Accept solution”.

If you have any questions or have not resolved the issue, please let me know.

Hope it helps.

Thanks.

5 Likes
3

It did something but now my logo it a the same place and the header content moved to the right

4

Thank you so much! This was exactly what I was looking for and it works perfectly well in Dawn Theme!

1 Like