• 0
Sign in to follow this  
Followers 0

Custom CSS on NavBar not working IE

Question

Posted · Report post

Hello, I used the following css to remove the background color on the standard navbar, which seems to work on all browsers except internet explorer. On IE, the background is still black, but should be white.

.navbar-content-width { border: none !important; background: none; box-shadow: none; }
	

Any help is greatly appreciated. Thanks, Tuan

Share this post


Link to post
Share on other sites

13 answers to this question

  • 0

Posted · Report post

Hi Tuan, I tried [code].navbar-inner {border: none !important;}[/code] in firebug and it seems to remove the border. Try it out and let us know if the issue is not solved.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi Tuan, Have you tried anthalis suggestion ?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

No Luck. Black background is still there and I've added '!important' to all css changes. But IE is still not co-operating.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

That is IE just being IE :. What other custom CSS do you have? (If there's black somewhere else, that may be where it's coming from - but can't be too sure)

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hmmm, I see a [code]background-color: #2C2C2C;[/code] in http://astairemagazine.com/wp-content/plugins/js_composer/assets/bootstrap/css/bootstrap.css?ver=3.0.2 and also [code]background-image: -moz-linear-gradient(center top , #333333, #222222);[/code] Try [code].navbar-inner {background-image: none !important;} [/code] It might just do the trick.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

@anthalis This is what I have for css to get the white background, which can be seen in all browsers except IE. [code].navbar-inner {box-shadow: none !important; background-color: none !important; background: none !important; padding-left: 0px; border-bottom-color: #d2d2d2; border-bottom-style: solid; border-bottom-width: 1px; -webkit-border-radius: 0px;padding-right: 0px;}[/code] I've gone ahead and added 'background-image: none !important;' css you recommended but no luck. Tuan

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Ok, I forgot the navbar was defaulting to the Black Transparent theme by default. It's been a hectic week. So, since removing borders, shadows etc worked, all that's left is the darn background. I replicated the black navbar on a site of mine and added the following css in the custom code area: [code].pl-color-black-trans {background-image: none !important;filter: alpha(opacity=0);}[/code] My navbar now shows only the menu elements. http://rodirocken.anthalis.info/ I hope this solves it for you too.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

@anthalis Thanks for all you help. I pasted the code above into custom css and still no luck with IE, the black background still exist. Ready to pull my hair out. Tuan

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

A workaround I've thought of would be to use a background image in the solid color that you want and adding the background-image attribute to the appropriate CSS selector to generate it so that hopefully it replaces that pesky black background: [code]background-image: url('http://DIRECTIMAGEURL') !important; background-repeat: repeat;[/code] You'll need to use an image editing program to create a 5x5-pixel solid black image, upload it to your Media Library, and then use the direct image URL where it says DIRECTIMAGEURL in the code above.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

@catrina Replaced the background image with the css code above, but still no luck.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Tuanma, try the Simple CSS Lite plugin available in the Store. It's free and is specialized to color the background colors, font colors and both active and hover states for the menu. Let us know if it works for you.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi Tuanma, When inspecting your page with F12 dev tools in IE your [b].pl-color-black-trans [/b] appears with a [b]filter: 1[/b] in either your Custom Code area or some other place where the stylesheet is not linked. Please double check that this filter: 1 is not added to the Custom Code area. This filter should be [b]filter: alpha(opacity=0);[/b]. Without it you will end up pulling your hair out. Try to add [code].pl-color-black-trans {background-image: none !important;filter: alpha(opacity=0) !important;}[/code] to your [b]child theme style sheet[/b] or in [b]pagelines customize[/b]. One of them should work for you, but I don't see the code in either of them. Also make sure to refresh with CTRL+F5 when checking for the results to refresh any present cache done by your browser.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Thanks for posting your insight, anthalis

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0