Navbar doesn't show

Question

So it has been a while since I have written HTML/CSS. I wrote a website a while ago and am in need of moving the code from one registrar to another (school server to google). But the one thing I noticed is that the navigation bar (navbar), pulled in by JQuery isn't showing.

The structure of the school's file system had me add files in an unorthodox manner, maybe that's why the navbar simply isn't being loaded in. Here is essentially how the filesystem is set up.

index.html           # calls everything below
css/
    bootstrap.css
    styles.css
js/
    bootstrap.js
    jquery.js
templates/
    header.html      # where the navigation bar exists

The navigation bar is a component of the header that is templated in, to be placed into the index page. So you can think about the header.html as an element that lives in index.html . The index page should be able to call in the navbar into the index page but that doesn't seem to be happening at all.

Index.html

<!DOCTYPE html>
<html lang="en">

<!-- TODO: replace ../ with root folder path-->

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="My Site" content="">
    <meta name="Max Gittelman" content="">

    <title>Max Gittelman</title>
    <link rel="shortcut icon" href="images/index.ico" />

    <!-- Bootstrap Core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- Font -->
    <link href='http://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic' rel='stylesheet' type='text/css'>

    <!-- Custom CSS -->
    <link href="css/styles.css" rel="stylesheet">

    <!-- jQuery -->
    <script src="js/jquery.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="js/bootstrap.min.js"></script>

</head>

<body>    

    <div id="header"></div>
    <div id="footer"></div>
    <script>
        $("#header").load("templates/header.html #header-template");
        $("#footer").load("templates/footer.html #footer-template");
    </script>

    <!-- Page Content -->
    <div class="container">

        <img src="images/me.jpg" alt="" class="my-pic center-block" />

        <h3 class="text-center mich">University of Michigan '17</h3>
        <hr width="50%">
        <div class="text-center index-text">
            <p>Computer Science Engineering<br>
            Machine Learning<br>
            Artificial Intelligence</p>
        </div>
    </div>

</body>

</html>

Styles.css

body {
    margin-top: 70px; /* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
    font-family: 'Lato',serif;
    color: black;
    margin-bottom: 40px;
}

footer {
    /*margin: 50px 0;*/
    position:fixed;
    height: 35px;
    background-color: #41b5f3;
    bottom:0px; left:0px; right:0px;
    padding-top: 8px;
    color: white;
    z-index: 4;
    border-top: 1px solid black;
}

footer a {
    color: white;
}

footer a:hover {
    text-decoration: none;
    color: gray;
}

.mich {
    font-family: Arial;
    font-weight: 800;
}

.divider {
    width: 40%;
}

.index-text p {
    font-family: Arial;
    font-size: 120%;
}

.footer-text {
    font-family: Arial;
    font-size: 95%;
}

.my-pic {
    width: 240px;
    height: auto;
    margin-top: 50px;

}

.navbar {
    background-color: #41b5f3;
}

.navbar a {
    font-size: 95%;
}

@media (min-width: 768px) {
    .navbar-brand {
        position: absolute;
        width: 100%;
        left: 0;
        text-align: center;
        margin:0 auto;
    }    

    .navbar-brand a {
        padding-left: 35px;
    }
}


.navbar-inverse .navbar-nav li a {
    color: white;
    text-align: center;
}

.navbar-inverse .navbar-brand a {
    color: white;
    text-align: center;
}

.navbar-inverse .navbar-brand a:hover {
    color: #f0f341;
    text-decoration: none;
}

.navbar-inverse .navbar-nav li:hover {
    background-color: #415cf3;
    border-radius: 4px;
}

.navbar-inverse .navbar-nav li a:hover {
    color: #f0f341;
}

.dropdown-menu {
    background-color: #41b5f3;
}

.dropdown-menu a:hover {
    color: #41b5f3;
}

.about {
    width: 70%;
    margin: auto;
    max-width: 700px;
}

.about_pic {
    margin: 0px auto 30px auto;
    text-align: center;
}

.about_pic img {
    width: 25%;
    min-width: 250px;
    max-width: 400px;
    height: auto;
    border: 10px solid black;
}

@media (max-width: 550px) {
    .about p {
        font-size: 13px;
    }
}

@media (min-width: 551px) {
    .about p {
        font-size: 15px;
    }
}

.contact-top-text {
    text-align: center;
    margin-top: 100px;
}

.contact-top-text p {
    font-size: 20px;
}

.submit-btn {
    background-color: #41b5f3;
}

.submit-btn:hover {
    background-color: #415cf3;
    color: #f0f341;
    border-color: #415cf3;
}

form {
    text-align: center;
}

.cap {
    margin: auto;
}

.g-recaptcha {
    margin: 10px;
    display: inline-block;
}

.recaptcha-form .btn {
    background-color: #41b5f3;
}

input#email {
    border-width: 0.25px;
    border-color: #eeeeee;
}

input#name {
    border-width: 0.25px;
    border-color: #eeeeee;
}

input {
    border-width: 0.25px;
    border-color: #eeeeee;
}


.mtn_div {
    border: 1px dashed red;
}

.mtn_div a {
    padding-right: 0px;
}

.navbar-nav li a:nth-child(4) {
    padding: 0px;
    text-align: center;
}

.mtn {
    border: 1px solid red;
    height: 40px;
    width: auto;
}

h1, h2, h3, h4, h5, h6, p {
    font-family: Arial;
}

.col-md-5 {
    vertical-align: center;
}

.img-responsive {
    margin: auto;
    height: 250px;
    width: auto;
    margin-top: 25px;
    display: inline-block;
}

.portfolio-container .col-md-7 {
    text-align: center;
}

.portfolio-container .row {
    width: 100%;
}

.review-one {
    height: 100px;
    width: auto;
    border: 1px dotted black;
}

.review-two {
    margin-top: 25px;
}

.gif {
    display: inline-block;
    margin: 15px;
    height: 102px;
    width: auto;
    text-align: center;
}

.bellman-container {
    text-align: center;
}

.bellman {
    vertical-align: center;
    width: 80%;
    height: auto;
}

.tsp img {
    margin-top: 0px;
    height: 250px;
    width: auto;
    z-index: 1;
}

.anon {
    height: 160px;
    width: auto;
    display: inline;
}

.ship-text {
    margin-top: 10px;
}

.log-text {
    margin-top: 25px;
}

.fsm-text {
    margin-top: 20px;
}

.pipeline-text {
    margin-top: 20px;
}

.kili-body {
    background-color: #8daadc;
}

.kili-container {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: 100%;
    max-height: 100%;
    margin: 52px auto 35px auto;
}

.kili-container img {
    position: absolute;
    max-height: 100%;
    max-width: 100%;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    z-index: -1;
}

.kili-words {
    color: white;
    position: absolute;
    margin: 0px auto 0px auto;
    min-height: 8em;
    width: 60%;
    left: 0;
    right: 0;
    bottom: 0;
}

.kili-words p {
    font-family: Arial;
    font-size: 14px;
}

.form-control {
    margin: auto;
    width: 30%;
    max-width: 400px;
    min-width: 300px;
}

.success-container {
    text-align: center;
}

.success-container h1 {
    color: #00274c;
}

.success-pic {
    margin-top: 20px;
    width: 75%;
    height: auto;
}

Header (Where navbar lives)

<nav class="navbar navbar-inverse navbar-fixed-top" id="header-template">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <div class="navbar-brand"><a href="index.html">Max Gittelman</a></div>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li><a href="about.html">About</a></li>
        <li><a href="portfolio.html">Portfolio</a></li>
        <li><a href="contact.html">Contact</a></li>
        <li><a href="kili.html">Kilimanjaro</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

It may be more clear if you take a look at the repository based on the layout.

Answer 1

While I would change the path to be absolute from the root vs relative to the page ( <link href="/css/styles.css" rel="stylesheet" /> instead)...this code works fine for me and the css is loaded.

Also, for older versions of HTML, you would want type='text/css' included on said link.

Answer 2

You need to add a / right before the closing > in the CSS link. Also as mentioned above, you may need to add type="text/css"

Navbar doesn't show

Question

2 answers

solution1
2 2017-10-12 01:08:34

solution2
1 2017-10-12 01:16:24

Navbar doesn't show

Question

2 answers

solution1 2 2017-10-12 01:08:34

solution2 1 2017-10-12 01:16:24

solution1
2 2017-10-12 01:08:34

solution2
1 2017-10-12 01:16:24