Ohhhh okay yeah Im not working through this on beta… I didnt even know there was a beta til I saw someone post about it yesterday hah! Indeed…I did notice that it had some requirements in there that werent a part of the the project requirements that I did.
Because you only have .active, its still pulling the info from the bootstrap css because its declared as .btn:active so its weight is considered more important, At a minimum, you have to use at least the same class that bootstrap is using for your css to override it.
you still have the btn class in your navigation, so its using the bootstrap styles for btn there. To check out what the different classes are doing specifically, you can use developer tool Both Chrome and Firefox have it… just google developer tools for the browser you are using to find info about how it works.
Its very cool actually, because that way you can see right off exactly what styles are being applied to any portion of your site.
That’s odd. The only button is the collapse button, isn’t it? I can’t get rid of that and it shouldn’t be effecting it, should it?
Are you looking at http://codepen.io/Shutsumon/pen/PmGxdB or the original because I haven’t changed the original yet. I forked it to play with because yesterday I broke it at one point and it took me ages to unpick what I’d done.
Okay, yeah def check out developer tools that way you can see this… The styling for your active nav is coming from bootstrap via .navbar-default .navbar-nav .active
so, in your css, just change the .active to .navbar-default .navbar-nav .active and it will override the bootstrap css
I assume no commas because commas turned the entire header bar pink but the white was still there on active links. However this code does nothing at all apparently.
Yes, way better now that we’re looking at the same thing!
Okay, yes, I accidentally left off the a for the link at the end… so in full its .navbar-default .navbar-nav .active a
Indeed, no comma between them, because that is one full path. You only use commas to separate different paths that will share the same style values. (like if you wanted to make both h1 and .alert red, you could go h1, .alert {color: red} ) Also, make sure there is a space before the period…there are some paths where there is no space, but this isnt one of them.
Also, theres no need to put !important. I think that is mostly used for browser compatibility issues. I cant say for sure the ins and outs of why, only that everything I read says its not good to use it and its best to avoid !important if at all possible…
I’ve had to leave the .active with !importants in below it though because otherwise the links go white instead of pink when clicked rather than scrolled (as opposed to what was happening before where it went pink when clicked and white when scrolled).
But everything works now! Yes! dances around the room Now I can move on on the normal site (I’m doing both it and beta because I’m slightly mad, I think).
YaY!!! Oh man Im so glad, what a relief to finally knock that out!
And yes, you probably are slightly mad…one has to be a bit crazy to even want to get into a field where we’ll spend the majority of our time praying it will work, trying to figure out why it wont work, why it worked and now all of a sudden it doesnt work and if something does work…you cant figure how that happened. Gotta love it
Both Chrome and Firefox have it… just google developer tools for the browser you are using to find info about how it works.
