Archived topic
Mobile menu not visible
14 replies · Started by Erik on April 26, 2017
My mobile menu is not visible, what do i wrong?
Hi Erik,
Can you provide a link to your site? Thanks!
You can also try #1 on this page: https://docs.generatepress.com/article/debugging-tips/
The menu toggle is there. It's just white.
Any reason why you choose to use background image in menu of blue instead of using the color add-ons?
Usually the mobile menu have the color main navigation but they are currently all white right now.
Let me know.
Thanks, i was not clear. Yes, because i'll use tabs as menu items with round corners. I think that's not possible with the normal function?
ok try setting background color back to white like you had it before, then add this CSS to change the menu toggle color:
.menu-toggle {
color: #000000;
}
Let me know if this works for you.
Thanks, it's better but not yet perfect. On the mobile menu i'll show a blue backgroundcolour and no tabs with round corners.
Ok remove the code I provided above and try this instead:
@media (max-width: 768px) {
.main-navigation {
background-color: #1e72bd;
border-radius: 5px
}
}
Thanks, i used this
@media (max-width: 768px) {
.main-navigation {
background-color: #124295;
}
}
but the hover still has a border-radius
Try wrapping this code you've added:
.main-navigation .main-nav > ul > li > a {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
margin-right: 3px;
}
like this as well:
@media (max-width: 768px) {
.main-navigation .main-nav > ul > li > a {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
margin-right: 3px;
}
}
When i use
@media (max-width: 768px) {
.main-navigation .main-nav > ul > li > a {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
margin-right: 3px;
}
}
instead
.main-navigation .main-nav > ul > li > a {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
margin-right: 3px;
}
the tabs are disappeared
I think Leo meant to write it like this:
@media (min-width: 769px) {
.main-navigation .main-nav > ul > li > a {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
margin-right: 3px;
}
}
Ahh right thanks Tom :)
Great! Thanks Leo and Tom.
No problem! :)