Solved

How can I make the main menu horizontal on mobile?

Thebeautybarfl
New Member
5 0 0

Hello, I’ll like for my main menu box to be horizontal not in a Dropbox on the mobile version. How do I do that ! 

Accepted Solution (1)
webwondersco
Shopify Partner
1045 158 156

This is an accepted solution.

Please add the below line of CSS code at the end of your base.css file:

 

@media(max-width:989px){
body .header{
grid-template-areas:"heading icons" "navigation navigation";
grid-template-columns: 1fr 1fr;
}
body header-drawer{
display:none;
}
body .header__inline-menu{
display:block;
}
}
Web Wonders | Shopify Partner | Connect here!
- Question answered? Mark as Accepted Solution, reply helpful? Click Like
- Hire me, if you want to design, re-design, develop a store, or make changes to the pre-built store.
a small Coffee Tip would be greatly appreciated. 🙂

View solution in original post

Replies 6 (6)

webwondersco
Shopify Partner
1045 158 156

@Thebeautybarfl Hope you are doing well.

 

Could you please explain in detail? also share your store URL can get better idea

Web Wonders | Shopify Partner | Connect here!
- Question answered? Mark as Accepted Solution, reply helpful? Click Like
- Hire me, if you want to design, re-design, develop a store, or make changes to the pre-built store.
a small Coffee Tip would be greatly appreciated. 🙂
Thebeautybarfl
New Member
5 0 0
Thebeautybarfl
New Member
5 0 0

2E171CAB-CE27-4028-A9C8-E553C18D66D5.jpeg

 

I want my mobile version to look like the circled one 

webwondersco
Shopify Partner
1045 158 156

@Thebeautybarfl would you like to display like this?

 

webwondersco_0-1709191544355.png

 

Web Wonders | Shopify Partner | Connect here!
- Question answered? Mark as Accepted Solution, reply helpful? Click Like
- Hire me, if you want to design, re-design, develop a store, or make changes to the pre-built store.
a small Coffee Tip would be greatly appreciated. 🙂
Thebeautybarfl
New Member
5 0 0

Yes

webwondersco
Shopify Partner
1045 158 156

This is an accepted solution.

Please add the below line of CSS code at the end of your base.css file:

 

@media(max-width:989px){
body .header{
grid-template-areas:"heading icons" "navigation navigation";
grid-template-columns: 1fr 1fr;
}
body header-drawer{
display:none;
}
body .header__inline-menu{
display:block;
}
}
Web Wonders | Shopify Partner | Connect here!
- Question answered? Mark as Accepted Solution, reply helpful? Click Like
- Hire me, if you want to design, re-design, develop a store, or make changes to the pre-built store.
a small Coffee Tip would be greatly appreciated. 🙂