On a customer's site they wanted to go with a really clean menu item so we've hidden all the site navigation under a single button for the main navigation.
But that navigation looks rubbish on a mobile device:
>
Any ideas on how to remove the "Menu" when ONLY on a mobile device?
Adding the following CSS should put you in a good spot:
/* Mobile nav styles */
@media (max-width: 799px){
/* Make the sub menu and container that contains the icons spaced apart into a column
@beren Glad it worked for you! I updated the CSS by adding some comments to each CSS ruleset that will hopefully help you figure my logic behind the styles.
Question
beren 3
Site URL: https://www.callummckirdy.com/
Hi.
On a customer's site they wanted to go with a really clean menu item so we've hidden all the site navigation under a single button for the main navigation.
But that navigation looks rubbish on a mobile device:
Any ideas on how to remove the "Menu" when ONLY on a mobile device?
Thanks for your help.
B
Link to post
Top Posters For This Question
3
3
3
2
Popular Days
Mar 8
4
Jun 3
2
Jun 4
2
Nov 22
1
Top Posters For This Question
tuanphan 3 posts
pramirol 3 posts
Mie_MIe 3 posts
beren 2 posts
Popular Days
Mar 8 2021
4 posts
Jun 3 2020
2 posts
Jun 4 2020
2 posts
Nov 22 2020
1 post
Popular Posts
jpeter
Adding the following CSS should put you in a good spot: /* Mobile nav styles */ @media (max-width: 799px){ /* Make the sub menu and container that contains the icons spaced apart into a column
jpeter
@beren Glad it worked for you! I updated the CSS by adding some comments to each CSS ruleset that will hopefully help you figure my logic behind the styles.
Posted Images
15 answers to this question
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment