Docs

[hostedpci]

Someone brought to my attention that on mobile, the navbar dropdown arrows don’t look right, when I looked at it closely I first thought it was supposed to be like that but then noticed it looks like nested icons that are competing for the same space.

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

So it looks like 2 double arrows on top of each other and then if you look closely at the first arrow, it looks like there is something hiding inside.

I noticed that in most recent threads you guys suggest placing all the site specific changes inside the child theme and not the customizer, since I had a ton of stuff in the customizer, it’s possible I have some conflicts or redundant things, so if you believe I should just move all of that to my child theme, then I’m all for it.

You can see the site here: http://hpciprimary.staging.wpengine.com/

I’m also going to give you access in a separate message.

Thanks for the help!

[hostedpci]

This reply has been marked as private.

[Rupok]

Hi there,

It seems some of your customization might adding double icon there. First update X and Cornerstone to latest version. If the issue still persist, you can add this under Custom > CSS in the Customizer or in your Child Theme’s style.css :

.x-sub-toggle span span.x-sub-toggle {
  display: none;
}

And using Child Theme’s CSS if fine unless you are overwriting something that’s already on Customizer settings. In that case you need to use !important tag.

Hope this helps.

[hostedpci]

Hi,

Thanks for the help, really appreciate it.

So I applied the CSS and it removes the 2nd icon but the icon that is left still looks “dirty”, kinda like there are 2 icons sitting on top of each other.

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

You can also look on the site as it’s updated.

Thanks.

[Jade]

Hi there,

Please try this code :

.x-navbar .mobile .x-nav li > a .x-icon-angle-double-down {
    display: none;
}

.x-navbar .mobile .x-nav li > a .x-icon.x-icon-angle-double-down {
   display: block;
}

Hope this helps.

[hostedpci]

Thanks for the effort.

This is how it looks now:
http://www.screencast.com/t/pPdFEjUMjz

I also updated the site to have all the suggestions inside.

[Jade]

Please update the code above to:

.x-sub-toggle span span,
.x-navbar .mobile .x-nav li > a .x-icon-angle-double-down {
    display: none;
}

.x-navbar .mobile .x-nav li > a .x-icon.x-icon-angle-double-down {
   display: block;
}

Hope this helps.

[hostedpci]

That did the trick!

Thank you so much.

For anyone who is interested, this is the final code I had to use:

.x-sub-toggle span span.x-sub-toggle {
  display: none;
}
.x-sub-toggle span span,
.x-navbar .mobile .x-nav li > a .x-icon-angle-double-down {
    display: none;
}

.x-navbar .mobile .x-nav li > a .x-icon.x-icon-angle-double-down {
   display: block;
}

[Thai]

You’re most welcome 🙂

If you need anything else please let us know.

[Author]

Posts