I wanted to get more familiar with GitHub, so I transferred a portfolio page I’m working on over but when I open it with GitHub Pages the dropdown aspect is not functioning. I’m pretty new to this and it is likely a simple mistake, but I can’t figure it out. Any help or leads would be very helpful.
This is a guess but on Codepen have you imported any libraries like JQuery or Bootstrap that on the transfer are no longer available to the code?
I don’t think so. I think I added them all into my head.
<head> <title>Alex Jensen-Sharp</title> <link type="text/css" rel="stylesheet" href="style.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"> <script src="https://use.fontawesome.com/f9b33de092.js"></script> <link href="https://fonts.googleapis.com/css?family=Rubik" rel="stylesheet"> <script src="script.js"></script> </head>
Your “bootstrap.min.js” is linked as a style sheet when it should be linked within a script tag, also, while this may not necessarily be what is causing the problem, it is good practice to group your css together and your scripts together, as the orders matter when your page is loading.
Would you mind showing me how you would order them?
Some say put script tags on the top of your page and others say on the bottom , you can read more about it here : https://stackoverflow.com/questions/436411/where-should-i-put-script-tags-in-html-markup , what I would tell you however is to not mix the style sheets and the script links, simply group them together, like so:
<head>
<title>Alex Jensen-Sharp</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Rubik">
<link type="text/css" rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://use.fontawesome.com/f9b33de092.js"></script>
<script src="script.js"></script>
</head>
the ordering really depends on the dependencies of your files, for instance, say you wrote an index.js file that uses a jquery library, you would then want your jquery reference before your index.js reference. dependency errors are usually displayed in the console, sometimes it is hard to tell what is dependent on what, especially if you did not write the scripts yourself, you can try different combinations till the errors are gone. I also noticed in your code pen file that you had some style sheet and script links in your HTML window, this is not necessary, the correct way to do it for code pen is to go to settings and add the files in the appropriate section (Head/Css/JS) , if you do that, then you can export your entire file in .zip format and import it directly into github while preserving all your links and orders. Hope that helps