[digicaParticipant]

Hello,

I used some CSS found in another thread to change the renew stack main menu arrows from single to double. The solution works well on desktop but is producing numbers instead of arrows/icons in mobile. Please can you assist.

This is the code I’ve used:

.mobile .menu-item-has-children .x-icon-angle-double-down:before {
content: "f107";
}

.x-navbar .desktop .x-nav li>a>span:after {
content: "\f107";
}

This is what it’s producing in mobile menu: http://www.screencast.com/t/vvR8zdcHzRy

[ChristopherModerator]

Hi there,

Please try this :

.mobile .menu-item-has-children .x-icon-angle-double-down:before {
content: "\f107";
}

Thanks.

[digicaParticipant]

Thanks for the effort, however:
1. it returns the arrows to default standard ‘double arrow’ and I’m after the single one that the previous ccs override (above) produces
2. the mobile issue is unresolved and is still showing the \F107 text instead of the icon.

[Rue NelModerator]

Hello There,

Please try this one in your customizer,

@media (max-width: 979px){
  .menu-item-has-children .x-icon-angle-double-down:before {
    content: "\\f107";
  }
}

We would recommend that use a child theme. This allows you to make code changes that won’t be overwritten when an X update is released. After your child theme is setup, please add this css code in your child theme’s style.css, Appearance > Editor

@media (max-width: 979px){
  .menu-item-has-children .x-icon-angle-double-down:before {
    content: "\f107";
  }
}

The difference is that when you add \f107 in the customizer, the customizer will automatically remove \ and thus creates an issue. If nothing else works, would you please provide us the url and access information of your site so we can take a closer look. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

To do this, you can make a post with the following info:
– Link to your site

– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thank you.

[digicaParticipant]

This reply has been marked as private.

[Paul RModerator]

Hi,

We’ll also need your http login credentials.

http://screencast.com/t/QdxvUWqZA

Thanks

[digicaParticipant]

This reply has been marked as private.

[Paul RModerator]

Hi,

I was able to fix the issue by adding the code below in your child theme’s style.css instead of adding it in custom > css

/* adjust arrow style */
	
	@media (max-width: 979px){
	  .menu-item-has-children .x-icon-angle-double-down:before {
		content: "\f107" !important;
	  }
	}
	

Kindly check on your end.

Thanks

[digicaParticipant]

This reply has been marked as private.

[Paul RModerator]

Hi,

There is a syntax error in your custom > javascript code in the customizer.

Please remove the code in your custom > javascript box in the customizer that reads

/* adjust main menu media queries */

@media (min-width: 801px) {
  .x-nav-wrap.desktop,
  .x-nav-wrap.desktop {
    display: block !important;
  }

  .x-nav-wrap.mobile,
  .x-nav-wrap.mobile,
  .x-btn-navbar {
    display: none !important;
  }
}

You need to add that code in custom > css box instead.

The contents of your custom > javascript box should only be this.

jQuery(function($){

if ( $(window).width() < 480  ) {

$( '.x-brand img' ).attr('src', 'http://gda.wpengine.com/wp-content/uploads/2015/06/gda-logo-mobile1.png');

}
});

Hope that helps.

[digicaParticipant]

Great, mobile logo is showing again–thanks.

So the mobile menu is working correctly now and showing single arrow instead of \F107, but the desktop view is still showing the default double arrows–any way to make those single arrows as well?

[Paul RModerator]

Hi,

I added the code below in your child theme’s style.css to make the desktop version show single arrow.

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

Please check

Thanks

[digicaParticipant]

Hello and thanks for doing that, but the arrows appear the same to me. See screen grab below.

http://www.screencast.com/t/djjtxE8YBE8

[FriechModerator]

Hi There,

The single arrow shows on our end, with the css code given above.

Please clear your browser’s cache and any caching plugin that the site might have.

Thanks!

[Author]

Posts