[Resolved] Change mobile menu dropdown from > to + ?

[Sol]

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

[David]

Hi there,

try this CSS:

.menu-item-has-children .dropdown-menu-toggle:before {
    content: '+';
    font-family: inherit;
}

[Sol]

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; }

[David]

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;
    }

}

[Author]

Posts