I am trying to center a sentance in my Nav Bar (which uses bootstrap). The navbar so far looks like this:
Centered Navbar title
What I would like to do is have the "|" centered, with the text around it next to it, instead of just having the sentence centered. This is quite hard to explain, but I hope you understand what I mean - the "|" is centered, with text to the left and right, instead of the whole sentance being centered, where the middle letter is in the middle. I want the "|" to be in the middle.
I have tried centering the "|" and floating the text on the left to the right and the text to the right to the left, but that just made the text go completely to the right instead of stopping before the "|".
Use the snippet to view the code, but please use "Full Page" so it works properly...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<link href="https://www.fontify.me/wf/da96db5dc1f0db255a8e71edaa0ace2d" rel="stylesheet" type="text/css">
<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="description" content="">
<meta name="author" content="">
<title>
<?php echo $album_nm; ?>
</title>
<!-- Bootstrap Core CSS -->
<link href="https://blackrockdigital.github.io/startbootstrap-scrolling-nav/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="https://blackrockdigital.github.io/startbootstrap-scrolling-nav/css/scrolling-nav.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesnt work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
<!-- -------------------------------------------------------------NAV BAR------------------------------------------------------ -->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation" style="background-color: #1a1a1a;">
<div class="container" style="text-align: center;">
<div class="container" class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div style="font-family: font71888;" class="navbar-brand page-scroll" href="#page-top">
<div style="display:inline-block; text-align: right;">
CHLOE
</div>
<div style="display:inline-block; float: none; margin: 0 auto;">
|
</div>
<div style="display:inline-block; text-align: left;">
<?php echo $album_nm; ?>
</div>
</div>
<!-- <a style="font-family: font71888;" class="navbar-brand page-scroll navbar-middle" href="#page-top"><br>CHLOE | <?php echo $album_nm; ?></a> -->
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav" style="align: center; float: center; text-align: center;">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="hidden">
<a class="page-scroll" href="#page-top"></a>
</li>
<li>
<a class="page-scroll" href="#buy">Buy</a>
</li>
<li>
<a class="page-scroll" href="#story">My Story</a>
</li>
<li>
<a class="page-scroll" href="#about">About Me</a>
</li>
<li>
<a class="page-scroll" href="#warchild">War Child</a>
</li>
<li>
<a class="page-scroll" href="#listen">Listen</a>
</li>
<li>
<a class="page-scroll" href="#thanks">Thanks</a>
</li>
<li>
<a class="page-scroll" href="#contact">Contact</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
</body>
</html>
Edit:
Thanks to Andrei Gheorghiu for his answer, this worked for me and looked really nice! I have marked his answer as correct and it is the one with the most upvotes at the moment...
Here's how I'd do it:
.navbar-brand {
display: flex;
}
.navbar-brand > div{
flex: 1 1 0;
padding: 0 4px;
}
.navbar-brand > div:first-child,
.navbar-brand > div:last-child{
flex-basis: 50%;
}
.navbar-brand > div:first-child {
text-align: right;
}
<div class="navbar-brand page-scroll" href="#page-top">
<div>CHLOE</div>
<div>|</div>
<div>This is a long album name</div>
</div>
P.S.: Don't forget to autoprefix your CSS before deploying.
And stop using inline style! How are you going to wrap your declarations in a #media query if they're inlined?
Here.
Note: If you don't want to count mobile menu button when centering text, just remove overflow: hidden property from div that wraps the text
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<link href="https://www.fontify.me/wf/da96db5dc1f0db255a8e71edaa0ace2d" rel="stylesheet" type="text/css">
<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="description" content="">
<meta name="author" content="">
<title>
<?php echo $album_nm; ?>
</title>
<!-- Bootstrap Core CSS -->
<link href="https://blackrockdigital.github.io/startbootstrap-scrolling-nav/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="https://blackrockdigital.github.io/startbootstrap-scrolling-nav/css/scrolling-nav.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesnt work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
<!-- -------------------------------------------------------------NAV BAR------------------------------------------------------ -->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation" style="background-color: #1a1a1a;">
<div class="container" style="text-align: center;">
<div class="container" class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div style="font-family: font71888; float: none; overflow: hidden" class="navbar-brand page-scroll" href="#page-top">
<div style="display:block; text-align: right; width: 50%">
CHLOE |
</div>
<div style="display:block; text-align: left; width: 50%" >
<?php echo $album_nm; ?>
</div>
</div>
<!-- <a style="font-family: font71888;" class="navbar-brand page-scroll navbar-middle" href="#page-top"><br>CHLOE | <?php echo $album_nm; ?></a> -->
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav" style="align: center; float: center; text-align: center;">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="hidden">
<a class="page-scroll" href="#page-top"></a>
</li>
<li>
<a class="page-scroll" href="#buy">Buy</a>
</li>
<li>
<a class="page-scroll" href="#story">My Story</a>
</li>
<li>
<a class="page-scroll" href="#about">About Me</a>
</li>
<li>
<a class="page-scroll" href="#warchild">War Child</a>
</li>
<li>
<a class="page-scroll" href="#listen">Listen</a>
</li>
<li>
<a class="page-scroll" href="#thanks">Thanks</a>
</li>
<li>
<a class="page-scroll" href="#contact">Contact</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
</body>
</html>
Related
I tried to make top navbar left side logo and center text and right text as size of logo. i able to make left left side logo on top navbar and text on right side of the top navbar but unable to make some text in the center other top navbar, even facing the problem to make right side text(i tried to add clearflex) size as logo.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Theme CSS -->
<link
href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css"
rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- Favicon -->
<link rel="shortcut icon" href="img/favicon.ico">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.bs-example {
margin: 20px;
font-weight: 700px;
}
</style>
</head>
<body>
<!------Top navbar------------->
<div class="navbar navbar-default navbar-fixed-top">
<div class="container fluid">
<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>
<a class="navbar-brand" href="#"><img src="img/logo1.jpg"
height="48" width="202" class="pull-left"></a>
</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 class="active"><a href="#"
style="color: blue; margin-left: 6em">Ticket top displaying
important things/ messages/ reminders/ tax dates/ Times
reminders </a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><div class="navbar-brand">Experiencing </div></li>
<!-- <li class="dropdown">
First Name Last name <span class="caret"></span>
<ul class="dropdown-menu">
<center> <li>Logout</li></center>
</ul>
</li>-->
</ul>
<!-- /.navbar-collapse -->
</div>
</div>
</div>
</body>
</html>
I tried to do like this image:
Add these styles
.navbar-default .navbar-brand {
padding: 0;
display: flex;
align-items: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Theme CSS -->
<link href="css/style.css" rel="stylesheet">
<!-- Favicon -->
<link rel="shortcut icon" href="img/favicon.ico">
<script
src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.bs-example {
margin: 20px;
font-weight: 700px;
}
.navbar-default .navbar-brand {
padding: 0;
display: flex;
align-items: center;
}
</style>
</head>
<body>
<!------Top navbar------------->
<div class="navbar navbar-default navbar-fixed-top">
<div class="container fluid">
<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>
<a class="navbar-brand" href="#"><img src="img/logo1.jpg"
height="48" width="202" class="pull-left"></a>
</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 class="active"><a href="#"
style="color: blue; margin-left: 6em">Ticket top displaying
important things/ messages/ reminders/ tax dates/ Times
reminders </a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><div class="navbar-brand">Experiencing </div></li>
<!-- <li class="dropdown">
First Name Last name <span class="caret"></span>
<ul class="dropdown-menu">
<center> <li>Logout</li></center>
</ul>
</li>-->
</ul>
<!-- /.navbar-collapse -->
</div>
</div>
</div>
</body>
</html>
I am using Dreamweaver CC 2017 Bootstrap Starter Templates to re-design a site I designed at least 12 years ago. I used the Starter Template Bootstrap E-Commerce and created a test page from it to test the collapsing menu with the hamburger icon appearing, no problem.
I proceeded to create the site and everything is fine except for the hamburger icon not appearing.
I have searched through the answers here and checked against what I have done but cannot find the anomaly. I have placed my site and the template side by side and still cannot see it.
I have tested it on Android as well as Windows.
I have not included the CSS in case it is in the code below but I will of course supply it on request.
Here is the page:
`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- TemplateBeginEditable name="doctitle" -->
<title>Fine Antique Clocks, Barometers & Marine Chronometers - Archives</title>
<!-- TemplateEndEditable -->
<!-- Bootstrap -->
<link rel="stylesheet" href="../css/bootstrap.css">
<style type="text/css">
body {
width: 100%;
background-image: url(../images/ancient_clock_2048_pl.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-color: rgba(229,207,111,0.7);
background-size: cover;
}
</style>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
</head>
<body>
<nav>
<div class="container">
<div class="bada"><img src="../images/BADA-logo-colour_round.jpg" class="img-circle img-responsive" alt="British Antique Dealers Association"></div>
<!-- Brand and toggle get grouped for better mobile display --><br>
<br>
<img src="/images/patriccapon_antique_clocks.jpg" class="img-rounded img-responsive" alt="Placeholder image">
<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>
<a class="navbar-brand" href="../index.html"><span class="glyphicon glyphicon-home" aria-hidden="true"></span> </a> </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 class="active">Stock <span class="sr-only">(current)</span> </li>
<li class="active">Archives <span class="sr-only">(current)</span> </li>
<li class="active">Services <span class="sr-only">(current)</span> </li>
<li>News </li>
</ul>
<ul class="nav navbar-nav navbar-right hidden-sm">
<li>Contact Us </li>
<ul class="nav navbar-nav navbar-right hidden-sm">
<li>About Us </li>
<ul class="nav navbar-nav navbar-right hidden-sm">
<li>Links </li>
<li class="dropdown"> Dropdown <span class="caret"></span>
</li></ul>
</ul></ul></div>
<!-- /.navbar-collapse -->
<!-- /.container-fluid -->
</nav><br>
I am receiving the error:
To help protect the security of information you enter into this website, the publisher of this content does not allow it to be displayed in a frame. I just want to embed a YouTube video to my site and I've added the tags
<meta http-equiv="X-Frame-Options" content="allow">
But the error is still occurring. Here is the entire code down to where I added the iframe tags.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="shortcut icon" href="/img/favicon.jpg">
<meta charset="utf-8">
<meta http-equiv="X-Frame-Options" content="allow">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>DroneDaddy</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/business-casual.css" rel="stylesheet">
<!-- Fonts -->
<link href="http://fonts.googleapis.com/css? family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,7 00,800" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css? family=Josefin+Slab:100,300,400,600,700,100italic,300italic,400italic,600italic, 700italic" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"> </script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<body>
<p> </p>
<p> </p>
</body>
</head>
<body>
<div class="brand">Welcome to DroneDaddy</div>
<div class="address-bar">Lawton, Ok</div>
<!-- Navigation -->
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- navbar-brand is hidden on larger screens, but visible when the menu is collapsed -->
<a class="navbar-brand" href="index.html">DroneDaddy</a>
</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>
Home
</li>
<li>
About
</li>
<li>
Contact
</li>
<li>
<a href="realestate.html" class="dropdown-toggle" data- toggle="dropdown">services
<b class="caret"> </b>
</a>
<ul class="dropdown-menu">
<li>Real Estate</li>
<li class="divider"></li>
<li>Aerial Inspection</li>
<li class="divider"></li>
<li>Advertisement</li>
<li class="divider"></li>
<li>Aerial Photography</li>
<li class="divider"></li>
<li>Police/Tactical Response </li>
</ul>
</li>
<li>
News
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<div class="container">
<div class="row">
<div class="box">
<div class="col-lg-12 text-center">
<div id="carousel-example-generic" class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators hidden-xs">
<li data-target="#carousel-example-generic" data- slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data- slide-to="1"></li>
<li data-target="#carousel-example-generic" data- slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="jumbotron col-lg-12">
<h1>Featured Video</h1>
<p>
Hello, Ok.
</p>
<iframe width="420" height="315"
src="https://www.youtube.com/watch?v=e2od1FBOCU8">
</iframe>
</div>
To embed with Iframe, you need to use different url for your video - https://www.youtube.com/embed/e2od1FBOCU8
More info on how to embed a YouTube video to your site - http://www.w3schools.com/html/html_youtube.asp
The X-FRAME-OPTIONS is not to be defined by you, but YouTube sends it in video viewing page HTML response header and denies any page from embedding it. When you define the header on your page, it means your page cannot be embedded.
More on the X-FRAME-OPTIONS - https://developer.mozilla.org/en-US/docs/Web/HTTP/X-Frame-Options
I am trying to build a website. I have a menu and I want it to be included in all my other files. I have tried PHP and JS and failed. What is wrong with the code and what is happening?
Index.html (Yes I tried Index.php)
<!DOCTYPE html>
<html lang="en">
<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="description" content="">
<meta name="author" content="">
<title>Bare - Start Bootstrap Template</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<style>
body {
padding-top: 70px;
/* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
}
</style>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- ADD MENU HERE -->
<!-- Page Content -->
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h1>Text</h1>
<h3>Text</h3>
<li>© 2014 Text.</li>
</ul>
</div>
</div>
<!-- /.row -->
</div>
<!-- /.container -->
<!-- jQuery Version 1.11.1 -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Menu.html
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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="index.html">stuff
</a>
</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 role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">Help<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li>hi</li>
<li>text</li>
</ul>
</li>
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">HIIIII<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li>Food</li>
<li>Other</li>
</ul>
</li>
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">Tools<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li>Google</li>
<li>Hellp</li>
<li>Link</li>
</ul>
</li>
<li>
uh
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
So what should I do?
Edit: I changed them the extension .php and added the line <?php include 'Menu.php'; ?> into and there still is no menu.
Rename index.html to index.php
And in index.php, add a line:
<?php
Include 'menu.hml';
?>
Save Menu.html as Menu.php. Then use
<?php include 'Menu.php'; ?>
to include it in your web files.
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.