How to Change the Icon in the menu

Support
#1

Hi there,

I want to change the icon used in the menu to a +/- or a single chevron

#2

Hello Rearolam,

Thanks for writing in!

Please add following CSS under X > Theme Options > CSS:

.x-sub-toggle span i:before {
content: "\f063";
}

1- I have found the proper CSS code selector using the Chrome browser Developer Toolbar: https://www.youtube.com/watch?v=wcFnnxfA70g

2- For the CSS code itself, I suggest that you get started with this tutorial: https://www.youtube.com/watch?v=yfoY53QXEnI

Thanks.

#3

Thanks,

How can I hide icons from the main nav without affecting the icons in the sub menu?

In the mobile version, I want the chevron to transform from \f054 to \f078

#4

Hi @Tsogtbaatar,

My apologies but I didn’t quite get what you are trying to do. Do you want the submenu indicator for the main menu items not to display on desktop but only on mobile?

Kindly provide us clearer info so that we can provide some suggestion.

Thank you.

#5

Hi Jade,

On Desktop, I want to hide the indicator for the main menu and but not for the submenu.
On Mobile, I want to show the indicator for the main and submenu.

Thanks,

#6

Hi @Tsogtbaatar,

Thank you for the clarification, Is that your site URL in the secure note? It is down at the moment, please check.

Thanks,

#7

Yes, It is my URL.

You can visit the site using Open DNS setting. (8.8.8.8 /8.8.4.4)

#8

Hello Rearolam,

Thanks for updating in!

To resolve your issue, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

@media screen and (max-width: 979px){
  .menu-item a > .x-sub-toggle span i:before {
    content: "+";
    font-size: 14px;
  }

  .menu-item.x-active a > .x-sub-toggle.x-active span i:before {
    content: "-";
  }
}

We would love to know if this has worked for you. Thank you.

#10

It worked just fine. Thanks for that. What about hiding the indicator in the main menu and but not for the submenu on the desktop version? Is this even possible?

Thanks

#11

Hi @Tsogtbaatar,

Yes that’s possible. To remove it, you can add the code below in Theme Options > CSS

.x-navbar .desktop>.x-nav li.menu-item-has-children>a>span:after {
     display:none;
}

Hope that helps

#12

Hi Paul, it doesn’t seem to work.

#13

Hi @Tsogtbaatar,

There is a syntax error in your css code, preventing all the codes after it from working.

In the last part of your css code, please change this

@media screen and (max-width:979px) {
    .x-navbar .ut-custom {
        display: none;
    }
    .x-btn-navbar {
        margin-top: -60px !important;
    }
    .x-sub-toggle span i:before {
        content: "\f054";
        font-family: 'FontAwesomeLight';
        font-size: 14px;
    }
    .x-acc-header-indicator {
        display: none;
    }
    @media screen and (max-width:979px) {
        .menu-item a > .x-sub-toggle span i:before {
            content: "\f054";
        }
        .menu-item.x-active a > .x-sub-toggle.x-active span i:before {
            content: "\f078";
        }

To this


@media screen and (max-width:979px) {
    .x-navbar .ut-custom {
        display: none;
    }
    .x-btn-navbar {
        margin-top: -60px !important;
    }
    .x-sub-toggle span i:before {
        content: "\f054";
        font-family: 'FontAwesomeLight';
        font-size: 14px;
    }
    .x-acc-header-indicator {
        display: none;
    }
}

@media screen and (max-width:979px) {
        .menu-item a > .x-sub-toggle span i:before {
            content: "\f054";
        }
        .menu-item.x-active a > .x-sub-toggle.x-active span i:before {
            content: "\f078";
        }
}

Please make sure each bracket is properly closed.

Thanks

#14

Great, it worked. Thanks for pointing out the missing closing bracket.

Cheers.

#15

You’re welcome! :slight_smile:

#16

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.