Navbar bootstrap customization

1

Hi there,
I am creating my portfolio page for the 2nd challenge and I have 2 questions about the navbar.

  1. I set my navigation bar as fixed with class navbar-fixed-top the problem is now we can’t see my title anymore. SO I added style:“margin-top:100px;” but if i reduce the page it is nos displayed anymore, of If I open it on a mobile. I don’t know what to do here, any advice?

  2. 2nd thing is I want to highlight my active link in my navbar (.navbar a:active) with the same style as navbar a:hover but it does not work, I dont" get it.
    navbar
    .navbar a:hover {
    background-color: #ccc !important;
    color: #0064ce !important;
    }

.navbar a:active {
background-color: #ccc !important;
color: #0064ce !important;
}
here is the link to my project : https://codepen.io/christopheleray/pen/RyWBOb
I am getting there, still a lot to do.

Thanks,

2

I’m not an expert but my advice as follows:

  1. Don’t use important in your css (or at least don’t use it so much). Making everything important is like making nothing important. Read up a little bit about how CSS handles multiple styles that override each other (specificity is the key word)

  2. Navbar - lookup the bootstrap example on navbar. Your navbar is not designed to collapse on smaller screens. If you see examples on their site, it will be much clear on how to make it collapse and not just take up all the space on the screen. Keyword here is bootstrap has classes called collapse that help with the problem you have

  3. Don’t use inline styles in your HTML. Put it all in your CSS. Using inline style in HTML makes it hard to read what is going on and also make changes easily.

  4. a:active only runs when you click and hold down an element. See example here: https://www.w3schools.com/cssref/tryit.asp?filename=trycss_sel_active
    I think you want to select a li element that has the .active class and then find the immediate children of it (not descendants) and use that color.
    .navbar .active > a is one such thing that would work. But there are other ways to do it too.

Hope that helps

3

Hi, Thanks Tidus,
Sorry for my late reply, I was away for a while.
I am back on coding training.
Thanks a lot for your review, I will have a look at your suggestions and comments and keep working on that.
this is great to get feedback from the community.
Chris,