Changing sub-menu icon with integrity stack

[seola]

How do i change the sub menu icon in my nav menu? by default it’s a double-downward arrow.

site: https://tinyurl.com/y2ma7d5d

I’m using the Integrity stack and latest version of X (not pro): 7.2.3

[prakash_s]

Hi @armintz,

Thanks for writing in!

To chnage the submenu icon, please add following CSS under X > Theme Options > CSS :

.x-navbar .x-nav li>a>span:after {
content: "\f063";
font-family:"FontAwesome"
}

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

3. Here is a list of font-awesome icons please feel free to change the icon code as per your design
   https://fontawesome.com/v4.7.0/icons/

The purpose of providing the custom CSS to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector.

Hope it helps you.
Thanks

[seola]

Works great on desktop, but I had to add !important. Unfortunately it’s still showing the old icon for mobile (as well as the new one):

[prakash_s]

Hi @armintz,

Add this code in theme option’s CSS to hide the icons in mobile.

 #x-nav-wrap-mobile .x-sub-toggle>span i{
  display:none
} 

The purpose of providing the custom CSS to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector.

Hope it helps you.
Thanks

[seola]

Now all of the mobile menu links have submenu icons, even the ones which don’t contain submenu links.

[prakash_s]

Hi @armintz,

Sorry, I didn’t notice that. Kindly replace this code

.x-navbar .x-nav li>a>span:after {
    content: "\f107" !important;
    font-family: "FontAwesome";
}

with this code in theme option’s CSS.

.x-navbar .x-nav .menu-item-has-children>a>span:after {
    content: "\f107" !important;
font-family:"FontAwesome"
} 

The purpose of providing the custom CSS to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector.

Hope it helps you.
Thanks

[seola]

thanks, it’s working now.

curious - why is there not a theme option for this? seems strange for such a powerful theme to require custom css for a simple change like this. I know it’s easier with Pro, but that also brings an entirely new level of complexity over your entire website. Happy and grateful for the theme support, but baffled at how such a great theme tends to overlook the little details like this.

[ruenel]

Hello @armintz,

It’s good to know that it is working for you right now.

If you are using the X theme, you do not have any option to change the icon. On the other hand, if the Pro theme is used and installed on your site, you will have full control over the header by creating your own custom header. This is where you can easily set the navigation, icons, colors, etc.

Cheers.