.fa .fa-bars are white on white = invisible menu icon on mobile devices

  • Resolved DGLauren

    (@dglauren)


    10 years ago

    I’ve done a little tweaking to font colors, etc, in my Hueman child theme to match my client’s original design and it still creates small problems here and there. (The site is not viewable online yet. I don’t think that would make a difference in the answer though.)

    The site has a white background. Since the menu icon/button has white bars, it’s invisible on the smaller screens. It’s functional: if you happen to notice that it’s an active link when you chance to hover over it, a click produces the menu.

    1. I want to change the color of the bars.
    2. I’d like to put a thin border around the button.
    3. I’d also like to add a hover caption, if possible, but not essential.

    I couldn’t find this in the main Hueman stylesheet, or I would have copied that part to my child CSS and altered it there.

    Thank you so much for any help you can give. All other help I’ve received from this forum has resulted in total resolution.

Viewing 4 replies - 1 through 4 (of 4 total)
  • bdbrown

    (@bdbrown)

    Hi DG – If you’re still looking for a solution on this, try adding the following to your css. It will turn the menu icon red with a cyan background, and put a red border around it. On hover, it creates a “popup” box that is positioned just above the icon. You can adjust the colors and placement however you wish. Let me know if you have any questions.

    #nav-header .nav-toggle {
  color: #f00;
  border: solid 1px #f00;
  background: #46e0de;
  }

#nav-header .nav-toggle :hover:after{
  position: absolute;
  right: 0;
  top: -26px;
  content: "click to see the menu";
  font-size: 18px;
  color: #000;
  background: #fffea1;
  border: 1px solid #f00;
  padding: 3px 6px;
}

    bdbrown

    (@bdbrown)

    ahhh…maybe I spoke too soon…;-) It works if you resize the browser but doesn’t seem to be active on a mobile device. Back to the drawing board. Sorry for the false alarm.

    bdbrown

    (@bdbrown)

    OK, it works. You need to add the code block to the appropriate css @media section.

    Thread Starter DGLauren

    (@dglauren)

    @bdbrown ~ Thank you so much! That worked beautifully!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘.fa .fa-bars are white on white = invisible menu icon on mobile devices’ is closed to new replies.