how to align header in dawn theme

Store Design
, , , , ,
1

logiclayer_0-1750947447464.png
logiclayer_0-1750947447464.png1879×147 8.59 KB

how can i align my header similar to the reference image.

my theme is fresh dawn theme and i only put one code in base.css till now just to change the size of header and is there a way buy which i can change icons too which are in the header and change them and put a 3d glb format file instead same as the reference image cart option

.site-header {
padding: 8px 0;
height: 60px;
}
.header__heading-logo {
max-height: 40px;
}
.header__menu-item {
font-size: 14px;
padding: 10px;
}

2

Hi @logiclayer ,

Can you please highlight the part where you want to add the logo. Also, can you please provide the image so that I can check it on my side.

3

Your current CSS is good for resizing, but alignment (like centering logo, spreading out nav items, or aligning icons) usually needs Flexbox adjustments in Dawn’s layout structure.

Try this enhanced CSS in base.css or component-header.css:

/* == Custom Header Layout Adjustments == */

.site-header {
padding: 8px 0;
height: 60px;
display: flex;
align-items: center;
justify-content: space-between; /* adjust as needed */
}

.header__heading {
display: flex;
align-items: center;
}

.header__heading-logo {
max-height: 40px;
margin-right: 20px; /* adjust spacing */
}

.header__inline-menu {
flex-grow: 1;
display: flex;
justify-content: center; /* center nav items */
}

.header__menu-item {
font-size: 14px;
padding: 10px;
}

.header__icons {
display: flex;
align-items: center;
gap: 12px;
}

4

I WANNA PUT A 3D MODEL INSTEAD OF CART WHICH WILL KEEP ROTATING

5

DIDNT WORKED

6

Hey! @logiclayer ,

Could you kindly share your store URL and password (if it’s password-protected) so I can review it and provide you with an update?