Archived topic
Change mobile menu dropdown from > to + ?
3 replies · Started by Sol on July 15, 2020
Hi all!
Is there any way to change the icon used to open the mobile menu drop downs from a > to a +?
Thanks in advance!
Sol
Hi there,
try this CSS:
.menu-item-has-children .dropdown-menu-toggle:before {
content: '+';
font-family: inherit;
}
Thanks for the help, David! This didn't seem to work, but I am also having trouble with other CSS codes such as for page width and menu buttons. For example, I had to add page width CSS o every page as my simple CSS plugin code placement wasn't working.
Do you see any issues here?
#mbutton {
width:50px !important;
background-color: #f37f3d !important;
border: 2px solid #000000 !important;
color: #f37f3d !important;
line-height: 20px !important;
}
@media (max-width: 768px) {
.inside-header>:not(:last-child):not(.main-navigation) {
margin-bottom: 0;
}
}
@media (min-width:769px) {
.main-navigation .main-nav ul li.nav-button a {
background-color: #f37f3d;
border: 1px solid #000000;
color: #000000;
line-height: 30px;
@media (min-width:769px) {
.secondary-navigation .main-nav ul li.nav-button a {
background-color: #f37f3d;
border: 2px solid #000000;
color: #000000;
line-height: 35px;
}
.menu-item-has-children .dropdown-menu-toggle:before {
content: '+';
font-family: inherit;
}
}
html, body {
max-width: 100% !important;
overflow-x: hidden !important;
}
html, body {
max-width: 100% !important;
overflow-x: hidden !important;
}
@media only screen and (max-width: 768px) { html, body { width: 100%; overflow: hidden; }
You have some missing brackets/nested @media queries to fix.
Change this Code:
@media (min-width:769px) {
.main-navigation .main-nav ul li.nav-button a {
background-color: #f37f3d;
border: 1px solid #000000;
color: #000000;
line-height: 30px;
@media (min-width:769px) {
.secondary-navigation .main-nav ul li.nav-button a {
background-color: #f37f3d;
border: 2px solid #000000;
color: #000000;
line-height: 35px;
}
.menu-item-has-children .dropdown-menu-toggle:before {
content: '+';
font-family: inherit;
}
}
to this:
@media (min-width:769px) {
.main-navigation .main-nav ul li.nav-button a {
background-color: #f37f3d;
border: 1px solid #000000;
color: #000000;
line-height: 30px;
}
.secondary-navigation .main-nav ul li.nav-button a {
background-color: #f37f3d;
border: 2px solid #000000;
color: #000000;
line-height: 35px;
}
.menu-item-has-children .dropdown-menu-toggle:before {
content: '+';
font-family: inherit;
}
}