Need help positioning dawn theme header positions

[crescenthu]

Hello! This is what the header of my website looks, and there is some thing I would like to change on it. It is important that I would want to change it so it is responsive to resolution changes.

I would like to have the logo more to the left of the screen, and the icons more to the right,

the menu items in the very middle, and on mobile, I would want the header icons to be smaller, which I do not know how to do. Can anyone please help me with this? I’ve been trying but have been just messing up the responsiveness. Thank you in advance.

crescent.hu (Draft theme)

[tim_tairli]

Why your search icon is positioned over the menu icon?
If it’s a draft theme, you need to share a preview link for people to see it.

To make your Header wider, you can use this code in Header section “Custom CSS” setting:

{
  --page-width: 150rem; /* can do 'none', but making it too wide is bad UX */
}

[devcoders]

Hi @crescenthu

I just checked your website, and everything looks fine to me.

[crescenthu]

crescent.hu

Here is the preview link.

[DitalTek]

Hi @crescenthu

If you using Dawn theme you can go to Theme Settings → Layout and change the page width for site as like image bellow:

• On Mobile you should remove the style that you added to revert style before change
  

If you not found that part or the solution does match with your goal, fill free to let me know.

[crescenthu]

There on your picture it looks exactly how I want it. Only I would like the search icon on the left, right side of the hamburger menu. For some reason my header icons are too big, so it does not look like that for me. Could you help with what style I should remove? Thanks

[Maximus3]

You’ve been at this for a good minute. It’s a shame because another theme, like Dwell, which already has mobile header icons exactly like how you want, would fix your issue no problem.

[Mustafa_Ali]

hey @crescenthu try this one by follow these steps
Go to online store ----> themes ----> go to three Dots ----> edit code ---->find theme.liquid files ----> place the code ---->before the </body>tagif this code work please do not forget to like and mark it solution

<style>
@media screen and (max-width: 767px) {
.header {
    padding: 0px 1rem 0px 1rem !important;
}
.svg-wrapper > svg {
    height: 100% !important;
    width: 65% !important;
}
}
</style>

try this one