CodePen broke my code :( help

1

Hello,
So I’ve been working on a portfolio project locally on my computer, and tried to paste my code into codepen, so that it would be easier to view the final product (which is finished and was working). However, when I pasted the code into CodePen, it broke a couple elements on the page. Most notably my navbar and footer. The navbar looks okay, but the toggle button no longer works.
My footer has little icons linked to my social media accounts which were supposed to be arranged in a row along the bottom, and one the pen, they are stacked on top of each other?

Any help would be greatly appreciated, I just want to see a full working version of this site :weary:

I have included links to the pen with my code, as well as an html preview where you can see the broken elements behaving correctly, but the portfolio images missing.

codepen: https://codepen.io/kkannen/pen/MOQqML

bitbucket: https://htmlpreview.github.io/?https://github.com/kkannen/web-workbook/blob/gh-pages/07week/Checkpoint02/index.html

in case it might be useful, here is the full version on codepen:

thanks!

2

Instead of adding a <head> section in the HTML section, try using the CodePen settings:
image

3

Looks like a Bootstrap 4 incompatibility issue in code pen

1 Like
4

You could take out the link tag for bootstrap because you are loading bootstrap through codepen anyway. I once had a issue with a pen because of this.
Also you dont need the link tag for the css file.

1 Like
5

Very strange indeed , if you take out your inline CDN link (https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css) and manually add it to settings > CSS , you get a semblance of what your original lay out looks like , make sure you take it out of your html page however.
The code pen recommended Bootstrap 4 CDN (https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap-grid.css) does not seem to be doing anything at all, you can take it out.

1 Like
6

In your JavaScript settings, change the bootstrap / jquery calls to have jquery on top.
I seem to remember that there is something about the way it reads when pulling in the scripts.

1 Like
7

Because you already have Bootsrap added in the ‘css’ settings I dont think you also need bootstrap added in the ‘javascript’ settings.

1 Like
8

Yes, we still need Bootstrap.js to go with Bootstrap.css. It is why both settings are available - one in CSS Settings and one in JavaScript settings.

However, jQuery needs to be called before Bootstrap.js

3 Likes
9

Thank you! this fixed the footer problems (which was my main concern)

10

Thank you so much, switching those fixed the navbar problem!

1 Like
11

Great! I’m glad I could help :slight_smile: