My menu works perfectly on a PC but when it shows on mobile i can click and it will go away as if its taking me somewhere but then nothing happens ... not sure what is happening can someone please lend me a hand
also had to post my code as an answer
here this is my current code
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>apis Sanctum</title>
<!-- Bootstrap core CSS -->
<link href="css/bg.css" rel="stylesheet">
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/blog.css" rel="stylesheet">
<link href="css/custom-styles.css" rel="stylesheet">
<link href="css/image-effects.css" rel="stylesheet">
<link href="css/normalize.css" rel="stylesheet">
<link href="css/component.css" rel="stylesheet">
<link rel="stylesheet" href="css/font-awesome.css">
<link rel="stylesheet" href="css/font-awesome-ie7.css">
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<script src="js/modernizr.custom.js"></script>
</head>
<body>
<div class="container page-styling">
<div class="header-wrapper">
<div class="site-name">
<img src="img/title1.png" alt="" class=""><img src="img/title2.png" alt="" class="">
</div>
<!--------------------------------------------------------------------------------- Menu Bar --------------------------------------------------------------------->
<div class="menu">
<div class="navbar">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav ">
<li>Home</li>
<li class="dropdown ">
About<b class="caret"></b>
<ul class="dropdown-menu">
<li>Apis Mellifera</li>
<li>The Sanctum Way</li>
<li>Sanctum Alvarium</li>
</ul>
</li>
<li class="dropdown ">
News<b class="caret"></b>
<ul class="dropdown-menu">
<li>Buzz Blog</li>
<li>Bee News</li>
</ul>
</li>
<li class="dropdown ">
Donate<b class="caret"></b>
<ul class="dropdown-menu">
<li>Donate</li>
<li>Join Our Cause</li>
</ul>
</li>
<li>Contact</li>
</ul>
</div><!--/.navbar-collapse -->
</div>
<div class="mini-menu">
<label>
<select class="selectnav">
<option value="#" selected="">Home</option>
<option value="#">About</option>
<option value="http://entnemdept.ufl.edu/creatures/MISC/BEES/euro_honey_bee.htm">→ Apis Mellifera</option>
<option value="Sanctum_Way.html">→ The Sanctum Way</option>
<option value="construction.html">→ Sanctum Alvarium</option>
<option value="#">News</option>
<option value="Blog.html">→ Buzz Blog</option>
<option value="https://www.google.com/search?biw=2560&bih=1292&tbm=nws&sxsrf=ACYBGNSmV-AkRf4x_HTd8CxClP41MOAg0A%3A1571337867589&ei=i7aoXZbAI8645gKwqbrIBQ&q=Honey+Bee&oq=Honey+Bee&gs_l=psy-ab.3..0l10.7127.7127.0.8117.1.1.0.0.0.0.285.285.2-1.1.0....0...1c.1.64.psy-ab..0.1.284....0.Fa7EiqCeuBY">→ Bee News</option>
<option value="#">Donate</option>
<option value="construction.html">→ Donate</option>
<option value="construction.html">→ Join Our Cause</option>
<option value="Contact.html">Contact</option>
</select>
</label>
</div>
</div>
</div>
Related
I'm trying to make the user profile icon clickable to show the user info (email address) and logout in bootstrap/html. Does anyone know how to do this in bootstrap or html like it is done here in an example using angular materials.
User Profile Icon Screenshot
Here is a codepen and snippet of what I currently
Codepen
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width">
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache,no-store" />
<meta http-equiv="expires" content="0" />
<title>AZDOE: Core Demo</title>
<link rel="stylesheet" href="https://design.linq.com/10.4.0/vendors/angular-material-
theme.css">
<link rel="stylesheet" href="https://design.linq.com/10.4.0/storybook/angular/assets/linq-
snackpaq-core.css">
<link rel="stylesheet" href="https://design.linq.com/10.4.0/theme/blueberry-muffin.css">
<link rel="stylesheet" href="../css/design-system-overrides/stylesheet.min.css">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700,900" rel="stylesheet">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.12.1/css/all.css"
integrity="sha384-TxKWSXbsweFt0o2WqfkfJRRNVaPdzXJ/YLqgStggBVRREXkwU7OKz+xXtqOU4u8+"
crossorigin="anonymous">
<link rel="stylesheet" href="../styles/master_common.css">
<link rel="stylesheet" href="../styles/master_760.css">
<link rel="stylesheet" href="../css/select2.css">
<link rel="stylesheet" href="../css/core2.css">
</head>
<body class="loggedin">
<div class="site-wrapper">
<!-- HEADER -->
<header id="header">
<nav class="navbar navbar-expand-lg mb-2">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-
target="#sidebar-
wrapper" aria-controls="sidebar-wrapper" aria-expanded="false" aria-label="Toggle
navigation">
<span class="material-icons">menu
</span>
</button>
<a href='/' class="navbar-brand">
<img id="headerLogo" src="../images/AZ-DOE.svg" class="header-logo" alt="State Logo" />
</a>
<div class="vl"></div>
<div class="nav-container">
<ul class="nav-items">
<!-- Navigation -->
<!-- Dropdown menu -->
<li class="nav-item-select nav-item-dropdown">
<a class="dropdown-trigger" href="#">Select SFA</a>
<ul class="dropdown-menu">
<li class="dropdown-menu-item">
Dropdown Item 1
</li>
<li class="dropdown-menu-item">
Dropdown Item 2
</li>
<li class="dropdown-menu-item">
Dropdown Item 3
</li>
</ul>
</li>
</ul>
</div>
<div class="vl"></div>
<div class="nav-container">
<ul class="nav-items">
<!-- Navigation -->
<!-- Dropdown menu -->
<li class="nav-item-select nav-item-dropdown">
<a class="dropdown-trigger" href="#">Select Program Year</a>
<ul class="dropdown-menu">
<li class="dropdown-menu-item">
Dropdown Item 1
</li>
<li class="dropdown-menu-item">
Dropdown Item 2
</li>
<li class="dropdown-menu-item">
Dropdown Item 3
</li>
</ul>
</li>
</ul>
</div>
<div class="navbar-collapse collapse" id="Div1">
<ul class="nav navbar-nav ml-auto">
<li class="nav-item">
<i class="fas fa-search"></i>
</li>
<li class="nav-item rounded-icon">
<a href="#" class="nav-link" title="Settings"><i class="fas fa-user"></i><b
class="caret"></b></a>
</li>
</ul>
</div>
</nav>
</header>
<!-- SPONSOR INFO SECTION -->
<main role="main" id="main">
<div id="wrapper">
<!-- SIDEBAR -->
<div id="sidebar-wrapper" class="sb-wrapper collapse">
<i class="fas fa-chevron-circle-left"></i>
<div class="list-wrapper">
<div class="nav-wrapper">
<ul class="sidebar-nav">
<li>
<a href="#" v-b-tooltip.hover.right title="Entity Manager">
<div> Entity Manager</div>
</a>
</li>
.....
</div>
</div>
<!-- CONTENT -->
<div class="container-fluid">
<div class="row">
<div class="col">
<div id="midcol-nslp" class="p-3">
</div>
</div>
</div>
</div>
</div>
<div class="clearfix"></div>
</main>
<footer class="mt-auto fixed-bottom">
<div class="container-fluid py-2">
<div class="row">
<div class="col text-center small">
© 2020 Colyar Technology Solutions, LLC. All rights reserved.
</div>
<div class="text-sm-center text-md-right d-flex justify-content-end align-items-center">
<ul class="nav">
<li class="nav-item">
<a href="mailto:info#colyar.com?subject=Website Test"><i class="fas fa-envelope-
open-text" data-toggle="tooltip" data-placement="top" title="Contact Support"></i></a>
</li>
</ul>
</div>
</div>
</div>
</footer>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js">
</script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js">
</script>
<script src="../JS/app.js"></script>
<script>
$("#menu-toggle").click(function (e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
document.getElementById("datetime").innerHTML = formatAMPM();
function formatAMPM() {
var d = new Date(),
minutes = d.getMinutes().toString().length == 1 ? '0'+d.getMinutes() :
d.getMinutes(),
hours = d.getHours().toString().length == 1 ? '0'+d.getHours() : d.getHours(),
ampm = d.getHours() >= 12 ? 'pm' : 'am',
months =
['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
days = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'];
return days[d.getDay()]+' '+months[d.getMonth()]+' '+d.getDate()+'
'+d.getFullYear()+' '+hours+':'+minutes+ampm;
}
</script>
</body>
</html>
Hopefully this is enough to help with what I'm trying to do.
You would want a single button dropdown, but and put your userinfo and logout inside the div and set the image icon style in the button instead.
https://getbootstrap.com/docs/4.0/components/dropdowns/#single-button-dropdowns
Here is some sample code to get you started with.
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="user-icon"></i></button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<div class="info-header">Profile</div>
<div class="user-email">richard.belding#bayside-hs.com</div>
<button class="btn btn-primary>Logout</button
</div>
</div>
I'm new to HTML and im trying to use bootstrap.
I made a dropdown menu, but it works only on the index.html Page.
I also tried using following code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<html>
<head>
<title>Tutorials</title>
<meta charset="utf-8">
<link rel="icon" type="image/png" href="img/coding.png"><!-- Favicon-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/tutorials.css" rel="stylesheet">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
</head>
<body>
<!-- Menu which is on every page -->
<nav class="navbar navbar-fixed-top" id = "s">
<div class="container">
<div class="row">
<div class="col-md-7"> <!-- Bootstrapov grid sistem-->
<div class="navbar-header"> <img src="img/coding.png" width="50" height="50" /> </div> <!-- Web Application Vulnerabilities-->
<!-- Hyperlinks to the sites -->
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><span style="color:white">About Us</span></li>
<li><span style="color:white">Contact</span></li>
<li><span style="color:white">Registration</span></li>
<li class="dropdown">
Tutorials<span class="caret"></span>
<ul class="dropdown-menu">
<li><span style="color:black">XSS</span></li>
<li><span style="color:black">CSRF</span></li>
<li><span style="color:black">SQL Injection</span></li>
<li><span style="color:black">RCE</span></li>
<li><span style="color:black">Exploit</span></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
So i've tried to use it on other page too, e.g. about.html
Following Code:
<!DOCTYPE html>
<html>
<head>
<title>About Us</title>
<meta charset="utf-8">
<link rel="icon" type="image/png" href="img/coding.png"><!-- Favicon-->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/about.css" rel="stylesheet">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
</head>
<body>
<!-- Menu which is on every page -->
<nav class="navbar navbar-fixed-top" id = "s">
<div class="container">
<div class="row">
<div class="col-md-7"> <!-- Bootstrap grid system-->
<div class="navbar-header"> <img src="img/coding.png" width="50" height="50" /> </div> <!-- Web Application Vulnerabilities-->
<!-- Hyperlinks to the sites -->
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><span style="color:white">About Us</span></li>
<li><span style="color:white">Contact</span></li>
<li><span style="color:white">Registration</span></li>
<li class="dropdown">
Tutorials<span class="caret"></span>
<ul class="dropdown-menu">
<li><span style="color:black">XSS</span></li>
<li><span style="color:black">CSRF</span></li>
<li><span style="color:black">SQL Injection</span></li>
<li><span style="color:black">RCE</span></li>
<li><span style="color:black">Exploit</span></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
It doesn't work it redirects me to the Tutorial Page, and dropdown menu won't open. I don't know how to fix it .
It seems you are having problem with the anchor used for dropdown:
Tutorials<span class="caret"></span>
in this as href you have added tutorials.html thats why whenever clicking on it redirecting to tutorial.html
change it to :
Tutorials<span class="caret"></span>
just change href=# instead of href=tutorial.html in that anchor tag
also add:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
to load jquery.
All the code work so far but whenever i try and input bootstrap elements after the header its not displaying properly? Anyone know what going on here? Not sure why because the code all works so far? Anything after the header-main div is not displaying correctly!
<!DOCTYPE html>
<html>
<head>
<title>The Beckwood - Scunthorpe</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Montserrat"
rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=satisfy"
rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Satisfy"
rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
</head>
<body>
<div class="header-main">
<nav class="navbar navbar-default">
<div class="container">
<a class="navbar-brand" href="#" >
<img src="assets/img/logo.png">
</a>
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li>HOME</li>
<li>MENU</li>
<li>GALLERY</li>
<li>ABOUT</li>
<li>BOOK A TABLE</li>
<li>CONTACT</li>
</ul>
</div>
</div>
</nav>
<div class="hero">
<h1 id="welcome">Welcome to The Beckwood.</h1>
<p>The Beckwood is a family run pub located in scunthorpe offering quality homemade food, carverys, events and live sports.</p>
<div class="btn btn-primary">View Menu</div>
<div class="btn btn-primary">Book a table</div>
</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
I am trying to create a bootstrap css navbar that shows a black navigation bar at the top and it is mobile responsive. Instead the toggle navigation button shows and no navbar. Why does the toggle navigation button show?
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html";
charset="utf- 8">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="">
<title>Local Web Hosting</title>
<!--Bootstrap core CSS-->
<link href="assets/css/bootstrap.min.js" rel="stylesheet">
<link rel="stylesheet" href="style_4.css" type="text/css">
<link rel="stylesheet" type="text/css" href="normalize.css">
<!-- Meta Description. For Search Engines. For more about
<meta> tags: w3schools.com/tags/tag_meta.asp-->
<meta name="description" content="A web hosting website.">
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"
> </script>
<!--[endif]-->
</head>
<body>
<!--HEADER
===================================-->
<header class="site-header" role="banner">
<!--NAVBAR
===================================-->
<div class="navbar-wrapper">
<div class="navbar navbar-inverse
navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle"
data- toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">
<img src="images/logo.png" alt="Web Hosting Company"></a>
</div><!--navbar-header-->
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">HOME</li>
<li>ABOUT</li>
<li>HOSTING PLANS</li>
<li>FEATURES</li>
<li>CONTACT US</li>
</ul><!--nav-->
</div><!--navbar-collapse-->
</div><!--container-->
</div><!--navbar-->
</div><!--navbar-wrapper-->
</header>
It looks like you aren't accessing the Bootstrap dependencies: See working example of you code in the Snippet below.
<link rel="stylesheet" type="text/css" href="path/to/bootstrap.css">
<script src="path/to/jquery.js"></script>
<script src="path/to/bootstrap.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<body>
<!--HEADER ===================================-->
<header class="site-header" role="banner">
<!--NAVBAR ===================================-->
<div class="navbar-wrapper">
<div class="navbar navbar-inverse
navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">
<img src="images/logo.png" alt="Web Hosting Company">
</a>
</div>
<!--navbar-header-->
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">HOME
</li>
<li>ABOUT
</li>
<li>HOSTING PLANS
</li>
<li>FEATURES
</li>
<li>CONTACT US
</li>
</ul>
<!--nav-->
</div>
<!--navbar-collapse-->
</div>
<!--container-->
</div>
<!--navbar-->
</div>
<!--navbar-wrapper-->
</header>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
Best Approach That You Make It With Your Skill Like
Java Script Code
$("#btn_toggle").click(function(e) {
$(this).toggleClass('on');
$(".main_nav").slideToggle("normal");
});
Css Code
.btn_toggle{position:absolute;width:30px;height:30px;right:5px;top:3px;display:none;cursor:pointer;border:none;z-index:2000;-webkit-transition:all 0.4s ease;
transition:all 0.4s ease;background:none;}
.btn_toggle span{position:absolute;background-color:#4e4751;height:5px;border-radius:2px;display:block;bottom:0;left:0;width:100%}
.btn_toggle span::before,.btn_toggle span::after{position:absolute;content:"";left:0;width:100%;height:5px;border-radius:2px;background-color:#4e4751;display:block;
transition:all 0.3s;backface-visibility:hidden;
}
.btn_toggle span::before{bottom:8px;right:0;}
.btn_toggle span::after{bottom:16px;left:0;}
.btn_toggle.on span{background-color:transparent;}
.btn_toggle.on span::before{transform: rotate(45deg) translate(-1px, 2px)!important;
}
.btn_toggle.on span::after{transform: rotate(-45deg) translate(1px, 2px)!important;
}
Html Code
<button class="btn_toggle" id="btn_toggle" title="Menu"><span></span></button>
<ul class="main_nav">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6 </li>
<li>7</li>
</ul>
i'm updating my site to bootstrap 3 and i have a problem i have added my navbar and header but when i try to add a jumbotron it appears under the bs-header dono why it does that i check every thing if my div are closed and they are sow if some one can tel me what i'm doing wrong ?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="HyperGainZ">
<title> My Mod Pack · MMP </title>
<!-- Bootstrap core CSS -->
<link href="assets/css/bootstrap-simplex.css" rel="stylesheet">
<link href="assets/css/bootstrap-simplex.min.css" rel="stylesheet">
<!-- Documentation extras -->
<link href="assets/css/docs-index.css" rel="stylesheet">
<link href="assets/css/pygments-manni.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="../../assets/js/html5shiv.js"></script>
<script src="../../assets/js/respond.min.js"></script>
<![endif]-->
<!-- Favicons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72.png">
<link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57.png">
<link rel="shortcut icon" href="../assets/ico/favicon.png">
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
MMP
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse" id="navbar-main">
<ul class="nav navbar-nav">
<li class="active">
Home
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" id="download">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" aria-labelledby="download">
<li><a tabindex="-1" href="#">1</a></li>
<li><a tabindex="-1" href="#">2</a></li>
<li class="divider"></li>
<li><a tabindex="-1" href="#">3</a></li>
<li><a tabindex="-1" href="#">4</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Sign Up</li>
<li class="divider"></li>
<li>Sign In</li>
</ul>
</div>
</div>
<div class="bs-header" id="content">
<div class="container">
<br />
<img src="assets/img/index.jpeg" class="img-circle" width="125px" height="125px"alt="Sevadus" align="left">
<h1>MMP</h1>
<p class="lead">My Mod Pack</p></img>
<div id="carbonads-container">
<div class="carbonad">
<div id="azcarbon">
<h4>Site Version : <span class="badge badge-success">Alpha</span></h4>
<h4>Head Of Project : <span class="badge badge-info">HyperGainZ</span></h4>
<h4>acepting Beta's : <span class="badge badge-success">Yes</span></h4>
<h4>Public Launcher : <span class="badge badge-primary">Not Yet</span></h4>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-12 jumbotron">
<h1>Pack Assembler</h1>
<p>Managing Mods, Packs, and Servers easily and efficiently.</p>
<p>
Get Started <i class="icon-double-angle-right"></i>
</p>
</div>
</div>
</div>
<!-- Placed at the end of the document so the pages load faster -->
<script src="assets/js/jquery.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
</body>
Because you're containing .bs-header within .navbar-fixed-top you'll need to use top padding equal to the static height of your navbar, on the body.
From the bootstrap documentation:
The fixed navbar will overlay your other content, unless you add
padding to the top of the . Tip: By default, the navbar is 50px
high.