Archived topic
Nav Button Is Showing In Mobile Dropdown
3 replies · Started by Brent Wilson on September 2, 2021
Viewing posts 1–4 of 4
Hello!
I have a nav button (last menu item) on a site. It displays nicely! But in mobile screenwidths, the nav button appears in the dropdown menu. I would rather just have it display as a normal menu item in mobile dropdown. What might I be doing wrong? Here is the CSS I have on the site for creating the nav button:
.main-navigation:not(.slideout-navigation) .main-nav li.nav-button a {
color: #fff;
border: 3px solid #511478;
border-style: solid;
line-height: 36px;
border-radius: 3px;
margin-left: 15px;
background-color: #511478;
transition: all 0.2s ease 0s;
}
.main-navigation:not(.slideout-navigation) .main-nav li.nav-button a:hover {
color: #ffffff;
background-color: #7e1fbb;
border: 3px solid #7e1fbb;
}Hi Brent,
Try to modify your CSS to this:
@media (min-width: 769px) {
.main-navigation:not(.slideout-navigation) .main-nav li.nav-button a {
color: #fff;
border: 3px solid #511478;
border-style: solid;
line-height: 36px;
border-radius: 3px;
margin-left: 15px;
background-color: #511478;
transition: all 0.2s ease 0s;
}
.main-navigation:not(.slideout-navigation) .main-nav li.nav-button a:hover {
color: #ffffff;
background-color: #7e1fbb;
border: 3px solid #7e1fbb;
}
}Let me know if this helps :)
Thanks! That was helpful. I have a weird mobile breakpoint set in menu>layout (908px) so I changed the css @media to 909.
Good job :)
This archived topic is closed to new replies.
