Junction: Nav hover effects


#1

How do I remove the white box that appears when hovering over the nav bar?
I tried setting background-color to transparent, but it's still showing up.


#2

Hey Thomas,

Would you mind copy/pasting your entire HTML and CSS code into a Fiddle? I'd have to look through your code to find the problem.
Thanks! :slightly_smiling:


#3

Sure, link is below.

https://jsfiddle.net/vpmy75du/

I've never used Fiddle but the output looks much different than the Code Academy work space.


#4

@tas33 It shouldn't really look different on JSFiddle :confused:

I was trying to see if it was JSFiddle that was the problem, and put it into a Pen instead:

It still doesn't look quite right, but I can't tell if that's because of Codecademy vs. other sites, or because you're not finished.

Anyway, in that pen, I'm using !important. This makes it override other rules. It's not a good practice to use it, but then again Bootstrap shouldn't be overriding other peoples' styles like that. The other way to make properties inside a CSS rule override other properties is to make it more specific. For example, instead of:

.nav a {
  /* ... */
}

you can do this:

.nav > li > a {
  /* ... */
}

and the second one is more specific, and so gets applied.


#5

Ah, looks better on pen than it did on fiddle.
On fiddle the menu was vertical.

I added !important to my CA project and that removed the white box.

On a completely different note, is there a more precise method to center an image within a column? I'm currently using margin and just did my best to center it by eye.

Appreciate your help!


#6

That's because I changed the code in the Pen :slightly_smiling: It looked the same both places, originally.

https://css-tricks.com/centering-css-complete-guide is a great place for when you need centering help :slightly_smiling:
If the image has display: block; on it, you can use margin: 0 auto; on it and and it will get centered horizontally :slightly_smiling:


#7

Oh I see...well it's looking good in my CA project page and that's good enough for me. :slightly_smiling:

Thanks for the tips and help, really appreciate it.