@nottohave
Posted
Hello @nyrellcl, for mobile view, I hope this helps you out with your trouble. Using flex is easier. I just use display flex and justify content: start / end to position the items. Let me know if this helps:
HTML Structure
<div class="ham-container">
<a class="sunny>
<div id="ham-icon">
/* For Mobile */
CSS
.ham-container {
width: 100%;
padding: 1rem 0 0 1rem;
display: flex;
justify-content: space-between;
}
.sunny {
display: flex;
/* I keep the rest of your code the same as github */
}
#ham-icon {
display: flex;
justify-content: flex-end;
flex-direction: column;
margin-right: 1rem;
}
/* For desktop CSS media query */
.sunny {
width: 100%;
}
.ham-container {
display: none;
}
Marked as helpful
@nyrellcl
Posted
Ohh my goodness, this helped so much. I overthought the whole thing lol You're right, I should've just used flex. I added bits of your code suggestions to my current code which helped a ton and actually got the result that i was aiming for. I commented out your code in my file just for reference. i appreciate it! I hope to help you the same way you did me for your future/current projects! @nottohave
@nottohave
Posted
@nyrellcl hey I glad that helped and thanks for the reference. You can help others to up your scores at the moment. If you want to collaborate, I suggest join the Slack community.
