Menu
I just try to learn about bootstrap, and i have my code write into type php file, like this:
<!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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- 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]-->
</head>
<body>
<style>
padding-top: 70px;
</style>
<div class="navbar navbar-default 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="#">Wisuda </a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Loggin<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Mahasiswa</a></li>
<li><a href="#">Prodi</a></li>
<li><a href="#">bb</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>Bootstrap starter template</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</div>
</div>
</div>
<!-- Fixed Footer -->
<div class="navbar navbar-inverse navbar-fixed-bottom" role="navigation">
<div class="container">
<div class="navbar-text pull-left">
<p>© my</p>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
When i test the preview
Why some of the text ('Bootstrap starter template') hiiden behind my navbar header?any help?
473
Simply, use the z-index attribute. The default is 0, so if the other elements have not been changed, you can just set the z-index of the nav-bar to 1 and it will display above all other elements. ** NOTE: For z-index to work, you must use positioning.
overflow: hidden With the hidden value, the overflow is clipped, and the rest of the content is hidden: You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element's box.
You can easily fix this by adding a margin-bottom: 0; to . navbar ul .
The navbar-collapse refers to the menu that is in the mobile view with the navbar (contains links, and toggle-friendly content). They are in the bootstrap CSS (see here). See this for a full rundown of how the navbar and collapse work together.
It's because of the CSS position of your navbar.
You can add navbar-static-top to your navbar like this:
<nav class="navbar navbar-default navbar-static-top">
or you could add some margin-bottom to your navbar CSS class.
UPDATE
in your case you could replace
<style>
padding-top: 70px;
</style>
with
<style>
.navbar{
margin-bottom: 50px !important;
}
</style>
or add the margin to a custom CSS class of yours.
178
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
