My portfolio (some help needed)

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.

here it is…
https://codepen.io/mbert86/pen/RZpzLd

I am struggling wit ha few things…

#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

Thank you!!

Hey

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 :slight_smile:. 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.

1 Like

Thank you for the tips. I guess it makes sense why I havent figured those 2 things out yet, as I have not learned them :smiley:

Bootstrap doesn’t automatically have higher priority — bootstrap.min.css is just a normal CSS file like any other.

Styles are applied in the order they’re loaded, with the last one taking precedence. For example (using inline stylesheets for clarity):

<style>
  h1 {color: skyblue}
  h1 {color: purple}
</style>

<style>
  h1 {color: magenta}
  h1 {color: lawngreen}
</style>

<h1>This is lawn green!</h1>

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.

Actually, a lot of the reason why Bootstrap styles are taking priority is because they have “!important” after them.

With your example:

<style>
  h1 {color: skyblue}
  h1 {color: purple !important}
</style>

<style>
  h1 {color: magenta}
  h1 {color: lawngreen}
</style>

<h1>This is lawn green!</h1>

The h1 would actually be purple. Try putting !important on the end of your styles and see what happens.

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.