You can find the navbar and jumbotron divs below. I have used bootstrap, however after several efforts of trying to correct the code I could not find the issue.
<body>
<div>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="#">Ankur Chavda</a>
</div>
<div id="navbar" class="navbar-collapse navbar">
<ul class="nav navbar-nav">
<li class="active"><span class="glyphicon glyphicon-home" aria-hidden="true"></span> Home</li>
<li class=""><span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span> About</li>
<li class=""><i class="fa fa-envelope-o"></i> Contact</li>
</ul>
</div>
</div>
</nav>
</div>
>Jumbotron
<div class="jumbotron"> //jumbotron
<div class="container">
<div class="row">
<p>hello</p>
</div>
</div>
</div>
</body>
Elements with the class .navbar have a 20px bottom margin. Remove it with:
.navbar {
margin-bottom:0;
}
bootply example
I cleaned up your code and added space between navigation bar and the jumbotron.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
<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="#">Ankur Chavda</a>
</div>
<div id="navbar" class="navbar-collapse navbar">
<ul class="nav navbar-nav">
<li class="active"><span class="glyphicon glyphicon-home" aria-hidden="true"></span> Home</li>
<li class=""><span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span> About</li>
<li class=""><i class="fa fa-envelope-o"></i> Contact</li>
</ul>
</div>
</div>
</nav>
</div><br><br><br>
<!--Here <br> is used for giving space between the navigation bar and jumbotron-->
<!-- Jumbotron -->
<div class="container">
<div class="jumbotron">
<div class="row">
<p>hello</p>
</div>
</div>
</div>
</body>
</html>
Related
I want to align the button links and the "Donate" button, i.e. make them begin at the same position. I've tried using the grid system, but the result was not satisfactory.
Here is the fiddle.
<head>
<title>
Test
</title>
<!-- Bootstrap -->
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="header">
<nav class="navbar navbar-default navbar-static-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right" style="margin: 0">
<li>Log In
</li>
<li>
<p class="navbar-btn">
Donate
</p>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>
</div>
</body>
If by "make them begin at the same position" you mean make both buttons left aligned, then all you have to do is simply apply text-align: left to the button (.navbar-btn .btn-danger).
.navbar-btn .btn-danger {
text-align: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="header">
<nav class="navbar navbar-default navbar-static-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right" style="margin: 0">
<li>Log In
</li>
<li>
<p class="navbar-btn">
Donate
</p>
</li>
</ul>
</div>
</div>
</nav>
</div>
https://jsfiddle.net/azizn/mou33Lkz/
I don't know what exactly you are trying to ask here. I mean do you want "donate" to align with the link text. If that's what you want you can apply this css-
.navbar-btn a{
text-align:left;
}
.navbar-nav li>a:first-child{
padding-left:0px;//you can adjust this accordingly
}
I have a navigation bar and when I make the screen size smaller, the list items overlap into the left of the navigation where there is the logo instead of keeping to their positions. Here is the HTML code:
<header>
<div class="navbar navbar-default navbar-static-top">
<div class="container-fluid">
<div class="navbar-header">
<button class="navbar-toggle" data-target="navbar-collapse" data-toggle="collapse" type="button">
<span class="icon-bar"></span> <span class="icon-bar"> </span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">
<img id="indexlogo" width="20%" alt="logo" src="img/siluxLogo1.png" >
</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right" >
<li >
<a>hello and welcome</a>
</li>
<li >
<a id="date"></a> <!-- JS which displays date and year -->
</li>
<li >
<a id="feed"></a> <!-- RSS feed ticker -->
</li>
<li class="active">
Home
</li>
<li>
About Us
</li>
<li>
Contact
</li>
</ul>
</div>
</div>
</div>
</header><!-- end header -->
Can someone please point out where I am going wrong or what I am missing. I have the viewport meta tag and the other parts of the page are responsive.
Coppy code below and paste your editor.
You try it work fine.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> </script>
</head>
<body>
<header>
<div class="navbar navbar-default navbar-static-top">
<div class="container-fluid">
<div class="navbar-header">
<button class="navbar-toggle" data-target=".navbar-collapse" data-toggle="collapse" type="button">
<span class="icon-bar"></span> <span class="icon-bar"> </span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">
<img id="indexlogo" width="20%" alt="logo" src="img/siluxLogo1.png" >
</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right" >
<li >
<a>hello and welcome</a>
</li>
<li >
<a id="date"></a> <!-- JS which displays date and year -->
</li>
<li >
<a id="feed"></a> <!-- RSS feed ticker -->
</li>
<li class="active">
Home
</li>
<li>
About Us
</li>
<li>
Contact
</li>
</ul>
</div>
</div>
</div>
</header><!-- end header -->
</body>
</html>
adding an id just before the unordered list would also fix it.
<div id="navbar" class="navbar-collapse collapse">...</div>
and then set data-target="#navbar"
also, you should add this class to your button. class="collapsed"
Here is an example from my own site, which works
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
You also don't need container-fluid
// DROP IN THIS AND TELL ME IF IT WORKS
<!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top mega navbar-trans navbar-fw">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Navbar Links -->
<div id="navbar" class="navbar-collapse collapse page-scroll navbar-right">
<ul class="nav navbar-nav">
<li>Home<span class="sr-only"></span></li>
<li>About<span class="sr-only"></span></li>
<li>Services<span class="sr-only"></span></li>
<li>Portfolio<span class="sr-only"></span></li>
<li>Pricing<span class="sr-only"></span></li>
<li>Contact<span class="sr-only"></span></li>
</ul>
</div>
</nav>
I'm having problems extending the navbar-right in Bootstrap. I need it to fit all the elements in it. Here is what's going on:
I can't get the profile image and the username to display separately. I've tried "clear: both" and the normal stuff. When I extend the size of the UL, it breaks the parent DIV. When I try to extend the size of the LI, it doesn't do anything. Here is my code:
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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" class="logo"> <span class="site-title">Privy Personal</span></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Files</li>
<li class="active">Sharing</li>
<li>Recent</li>
<li>Deleted</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><img src="images/Search.svg"> </li>
<li><img src="images/Notification.svg"> </li>
<li><span class="username">Tony Stark</span><img src="http://placehold.it/25x25" class="profile"></li>
</ul>
</div><!--/.nav-collapse -->
</nav> <!-- End Fixed Nav -->
Can anyone help me?
Add <div class="container-fluid"> after <nav> and adjust the name and picture alignment with margin.
Try this
check demo here
HTML:
<!-- Fixed navbar -->
<nav 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="#navbar" aria-expanded="false" aria-controls="navbar">
<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="#"><span class="site-title">Privy Personal</span></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Files</li>
<li class="active">Sharing</li>
<li>Recent</li>
<li>Deleted</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-user"></i> </li>
<li><i class="fa fa-user"></i> </li>
<li><span class="username">Tony Stark</span><img src="http://placehold.it/25x25" class="profile img-circle"></li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>
<!-- End Fixed Nav -->
CSS:
.username {
margin-right: 5px;
}
.profile {
margin-top: -7px;
}
I hope it helps you :)
The links do not appear on the button when the compact page.
The button is dead, does not respond.
This is my code:
<div id="geral" class="container">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!--Navbar header-->
<div class="navbar-header">
<!--Button-->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar1" aria-expanded="false"
aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!--Nome do projeto-->
<a class="navbar-brand" href="#">Project name</a>
</div>
<!--navbar collapse-->
<div id="navbar1" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Link </li>
<li>Link2 </li>
<li>Link3 </li>
</ul>
</div>
</nav>
</div>
The problem is that the left content in the navigation bar gets disappeared when reducing the window size. I tried using the row and column (column-sm and column-xs-) class the fix the problem but it is still there.
I am also attaching the images of the bar.
In the First image the screen size is maximized
In the Second image the screen size is reduced
So I want that the content XYZ should be seen always irrespective of the screen size.
I am also giving the navigation bar html code:
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse">
<div class="row row-content">
<div class="col-xs-11 col-sm-4">
<ul class="nav navbar-nav navbar">
<li> <b> XYZ </b></li>
</ul>
</div>
<div class="col-xs-1 col-sm-8">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#"><span class="glyphicon glyphicon-home"
aria-hidden="true"></span> Home</a></li>
<li><a href="aboutus.html"><span class="glyphicon glyphicon-info-sign"
aria-hidden="true"></span>About</a></li>
<li> <span class="glyphicon glyphicon-envelope" aria-hidden="true"></span> Contact</li>
</ul>
</div>
</div>
</div>
</div>
</nav>
Any help will be greatly appreciated. Thank You.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="#"><b> XYZ </b></a></li>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#"><span class="glyphicon glyphicon-home"
aria-hidden="true"></span> Home</a></li>
<li><a href="aboutus.html"><span class="glyphicon glyphicon-info-sign"
aria-hidden="true"></span>About</a></li>
<li> <span class="glyphicon glyphicon-envelope" aria-hidden="true"></span> Contact</li>
</ul>
</div>
</div>
</div>
</div>
</nav>
</body>
</html>
Try this.
The thing is you are using the link with class navbar-brand in the navbar-collapse so that's why it is also collapsing.
I hope the problem is solved.
Well, you just misplaced your brand anchor tab 'XYZ'. And use navbar-brand to your brand.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="#"><b> XYZ </b></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<div class="row row-content">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#"><span class="glyphicon glyphicon-home"
aria-hidden="true"></span> Home</a>
</li>
<li><a href="aboutus.html"><span class="glyphicon glyphicon-info-sign"
aria-hidden="true"></span>About</a>
</li>
<li>
<span class="glyphicon glyphicon-envelope" aria-hidden="true"></span> Contact
</li>
</ul>
</div>
</div>
</div>
</nav>