Copy/Paste .. Totally different result.

I am trying to create the design for my new website and it's these little things that drive me nuts in web design, granted I didn't REALLY analyze it but I can't understand how this problem happens in the first place.

http://jasny.github.io/bootstrap/ - Modified Bootstrap

I downloaded Bootstrap right from their site and copy and pasted the body code from this example page

http://jasny.github.io/bootstrap/examples/navmenu/

Legitimately Copy and pasted. Except, mine treats the nav as if it's not there and half of the text is hidden behind it, it isn't pushing right like it should.

I should mention, yes I didn't blindy copy and paste. I made sure Bootstrap.min.css and Bootstrap.min.js were properly linked, as well as jQuery.

There are some other JS files called at the end of the page to "help loading", are these included in the package originally?

Also, the listed page links to hosted Jquery, are you linking a potentially outdated version that is included in the release, or is Jquery referenced externally in the release?

In my copy I was linking directly to the jQuery CDN link. I will have to try this again and see if I can't get a different result.

The reason is there is an additional css which is custom created.

Create a new file call navmenu.css with the following content and save it to the same directory where your html or php file is

html, body {
height: 100%;
}
body {
padding: 50px 0 0 0;
}

.navmenu {
padding-top: 50px;
}

.navbar {
text-align: center;
}
.navbar-brand {
display: inline-block;
float: none;
}
.navbar-toggle {
float: left;
margin-left: 15px;
position: absolute;
}

@media (min-width: 992px) {
body {
padding: 0 0 0 300px;
}
.navmenu {
padding-top: 0;
}
}

Click to expand...