Dawn theme or css problem

[Kiwart]

Hello and thanks for every experienced developer who might help

I have problem with moving part inside my dawn theme . Its mobile version problem

Its not centered for burger and close tab on mobile

I will message header custom liquid hero and header.liquid

[Kiwart]

[devcoders]

Hi @Kiwart

Welcome to the Shopify Community! Please share your store URL and password (if it’s password-protected), so I can check and provide you with the exact solution.

Best regards,
Devcoder

[Moeed]

Hey @Kiwart

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

[Mustafa_Ali]

Hey @Kiwart Welcome to Shopify Community can you please share the Website URL

[Kiwart]

Privateviewscreen.com password 16 (two digits)

[Kiwart]

Privateviewscreen.com password 16

[Kiwart]

It is in the comments

[Moeed]

Hey @Kiwart

Follow these Steps:

1. Go to Online Store
2. Edit Code
3. Find theme.liquid file
4. Add the following code in the bottom of the file above </ body> tag

<style>
.header__icon--menu[aria-expanded="false"] svg.icon.icon-close {
    display: none !important;
}
.header__icon--menu[aria-expanded="true"] svg.icon.icon-hamburger {
    display: none !important;
}
</style>

RESULT:

---

Hope that helps! If it did, a Like and Marking it as Solution goes a long way and helps others find the fix faster too.

Best,
Moeed

[Huptech-Web]

Good day @Kiwart . To fix this icon alignment issue, please follow the steps below:

1. Go to Online Store in your Shopify admin.
2. Click Edit Code, then open base.css (or your custom CSS file).
3. Paste the CSS code provided below into the file.

@media screen and (max-width: 989px){
.header details#Details-menu-drawer-container:not(.menu-opening) .icon-close {
    display: none;
}

.header .menu-opening .icon-hamburger {
    display: none;
}
}

I’ve also attached screenshots for your reference, so you can easily follow along.

If you have any questions or need further assistance, please don’t hesitate to ask.

If this solution helps you, please don’t forget to like and accept it.

Best Regards,

(S.P)

[mastroke]

hii @Kiwart please use this css in base.css paste in the bottom of the file, hope this will work.

details:not([open]) > .header__icon–menu .icon-close, details[open] > .header__icon–menu .icon-hamburger {
display: none;
}

[tim_1]

Here is my suggestion.
Find this code

assets/base.css

Add display: none; right above the closing curly brace.

Or, if you do not want to modify theme code, you can add a rule to the Theme Settings-> Custom CSS:

details:not([open]) > .header__icon--menu .icon-close,
details[open] > .header__icon--menu .icon-hamburger {
  display: none;
}

[Kiwart]

Thank you Moeed! It works perfectly.
Can I adress other little bug I have and don’t know where it came from?
Its this bar on the menu of mobile .. Its blue and I even have it on ladning page but the blur is too big and can’t be seen