[Support request] Change mobile menu dropdown from > to + ?

Home Forums Support Change mobile menu dropdown from > to + ?

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1364142
    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

    #1364178
    David
    Staff
    Customer Support

    Hi there,

    try this CSS:

    .menu-item-has-children .dropdown-menu-toggle:before {
        content: '+';
        font-family: inherit;
    }
    #1364234
    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; }

    #1364288
    David
    Staff
    Customer Support

    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;
        }
    
    }
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.