I have been working on my portfolio all day. It is my first time really working with bootstrap. I struggled to figure it all out on my own, so I took a template code, and have broken it down and started tweaking it up to be my own, just so I can get a better feel for bootstrap.
#1 - I am having trouble with the links. I tried linking them to each div, and I have, but it takes me to the bottom of each div instead of the top
#2 - I am trying to change the hover color on the navbar links, but no luck. I can figure that out with basic css, but bootstrap is throwing me off…I dont want to give up on that though because it has been a good learning experience
anyway…this is a work in progress, so I welcome any feedback
It looks nice so far, keep going. Let’s get down to things you have problems with:
#1 - it is taking you to the right place, it will take you to an anchor meaning it will scroll to the place where your anchor of given ID is at the very top of your viewport. This means your anchor is at y = 0, making it fall behind your menu. You could mitigate that either using JavaScript scrolling or placing your anchor element higher above the place you want to scroll to. One more thing, your anchor should have ID, not name.
#2 - this is hard, I’ve been there myself . It’s because bootstrap styles have higher priority. You should inspect how bootstrap styles are applied to menu links and re-create the inheritance chain (nested selectors / classes) in your custom styles.
The reason Bootstrap is taking precedence is that you’ve actually loaded it within the <body> content (Codepen ignores <html>, <head>, and <body> tags in the editor and treats everything as part of <body>). You’ve also loaded a stylesheet called style.css that doesn’t exist, but even if it did, it would be applied before the Bootstrap one.
Due to Codepen’s limitations, you need move everything that’s currently inside your <head> tags into “Stuff for <head>” in “Settings” (also delete the <html>, <head>, and <body> tags in the editor for good measure). Codepen loads the stuff in the CSS portion of its editor right at the end of the head content, which is exactly where you want it to be.
Holy crap, you’re right. 66 instances of !important in Bootstrap 3.3.7.
Although, after playing around further, I found out that’s actually not what’s causing the problem here. The problem is CSS specificity. If you change your selector to the hyper-specific .nav.navbar-nav.navbar-right li a:hover, you can make it work without using important! yourself.
Long story short: there are many factors affecting CSS specificity (the rules by which the browser selects which styles take precedence). The best way to work out what’s happening is a mix of learning those rules, using the browser console, and trial and error.