CSS Code not showing up in IE

[PCEE]

Hello,

I am new to wordpress and working on my first site so pardon my ignorance.

The menu icon (3 bars / hamburger) needed some highlighting around-it so it is legible on all pages. I used the CSS code below, which has worked perfectly in Chrome, however, not showing up in Internet Explorer. http://www.digitalthynk.com.

.mobile_menu_bar:before {
background-color: #ffffff80;
padding: 3px 3px 3px 3px;
top: 9px;
color: #373737!important;}

Also, can someone guide me on the CSS code to add an overlay behind the homepage text?

Please help – much appreciated.

PCE

[Beverleyh]

Thinking out loud… on mobile…

Might have something to do with the hexadecimal syntax. I’m pretty sure it should only be 6 characters. But if you need further help, please mock up a reduced demo in CodePen (that’s the preferred platform for us to troubleshoot and test on here – easy to see all HTML/CSS/JS upfront, live edits, not limited to desktop troubleshooting).

Not sure what you mean by your second request; an overlay but behind is contradictory, but you might want to research “background-images in CSS” to begin your research. Again, if you need further help, please mock up a reduced demo in CodePen showing us what you’ve tried while clearly explaining the problem vs what you’d expect/like to happen instead.

[uxfed]

You’re on to something there. The AARRGGBB format is unsupported in IE and a bunch of other browsers. RGBA works, I’d suggest changing it to that if you need transparency anywhere, but in that specific example you don’t seem to even need transparency – just use a regular 6-digit hex code there.

See https://caniuse.com/#feat=css-rrggbbaa

[PCEE]

Thank you @uxfed and @Beverleyh – you guys are superstars! Issue resolved. Made my day – much appreciated.

[Author]

Posts