Hi guys i am wanting to move my mega menu to the right side of my header 9mobile version only)
Also wanting to make my foot menus change to drop down menus (mobile version only)
https://wolfievoir.com/ - password: mrsp
I have tried and unfortunately haven’t found anything that has worked for me!
To relocate mobile menu drawer button in Dawn family of themes
paste this code into “Customize”=> “Theme settings”(cog icon)=>“Custom CSS”:
@media (max-width:990px) {
header.header {
grid-template-areas:
'heading icons left-icons';
grid-template-columns: 1fr auto auto;
}
}
header header-drawer {
grid-area: left-icons;
margin: 0;
}
header .menu-drawer {
left: auto;
right: 0;
transform: translate(100%);
}
Will look like this:
Hi @WolfieVoir,
You can achieve both adjustments with a bit of CSS and Liquid tweaks
Move Mega Menu to Right
Go to Online Store → Themes → Edit Code → base.css (or theme.css) and add this at the bottom:
@media screen and (max-width: 768px) {
.header__menu {
justify-content: flex-end !important;
}
}
This pushes your mobile mega menu to the right side.
Convert Footer Menus into Dropdowns (Mobile Only)
You can do this by wrapping your footer link groups inside <details> tags.
If your footer code looks like this:
<div class="footer-block">
<h4>{{ linklist.title }}</h4>
<ul>
{% for link in linklist.links %}
<li><a href="{{ link.url }}">{{ link.title }}</a></li>
{% endfor %}
</ul>
</div>
Replace it with:
<details class="footer-block">
<summary>{{ linklist.title }}</summary>
<ul>
{% for link in linklist.links %}
<li><a href="{{ link.url }}">{{ link.title }}</a></li>
{% endfor %}
</ul>
</details>
You can style it for mobile only with:
@media screen and (max-width: 768px) {
.footer-block ul {
display: none;
}
.footer-block[open] ul {
display: block;
}
}
If you’d like, I can do both changes safely without affecting your desktop layout.
– Hammad | Shopify Developer (Theme Customization & CRO Expert)
Are you sure there is this element on their site?
Looks pretty much like AI-generated code…
This was small tweak so i did not confirmed. He can try .site-nav, or .mega-menu
I am not an english person so i use to correct gramatically
Then why are you pasting code which has no relevance to the question?
It’s not a grammatical mistake, you’re forcing people to do wrong things, mess with their code, why?
bro, i am not saying it was gramatical mistake, i use AI to correct it gramatically to my written message. then reply here.
And forcing?
I went to their site and pasted it. not.
I am giving suggestion which i consider right, but it may be wrong.
If solution does not work code can be removed and merchants do so.
so do not worry .
Try to help and motivate others, not degrade
Sorry , if my words are harsh.
This could be the biggest blunder on Shopify’s part, not standardizing class names. At least for themes published in the theme store.
I believe @tim_tairli is using the correct selectors for dawn theme.
this worked great! thank you 
anyone know how to do this?