Archived topic
Mobile menu
3 replies · Started by ammgbr on June 12, 2022
Hello, I have added the following CSS in order to have a line above and below the menu items:
.inside-navigation {
border-top: 1px solid #ffeedc;
border-bottom: 1px solid #ffeedc;
}
It works well on desktop but on mobile I cannot see the upper line above the menu items?
Hello there,
I can see the line added here on mobile: https://share.getcloudapp.com/9ZuoEkNl
To clarify, are you wanting something like this instead?: https://share.getcloudapp.com/qGuOdmDY
If so, you’ll need to alter your code into something like this to alter the lines on mobile:
@media (max-width: 768px) {
div#primary-menu {
margin-top: 5px;
border-top: 1px solid #ffeedc;
border-bottom: 1px solid #ffeedc;
}
}
@media (min-width: 769px) {
.inside-navigation {
margin-top: 5px;
border-top: 1px solid #ffeedc;
border-bottom: 1px solid #ffeedc;
}
}This will retain you layout on tablet and Desktop, and alter the look of the lines on mobile.
Hope this helps!
That works thank you! :)
You’re welcome! :)
