I have the following code for navbar.
<div style="margin-bottom:60px; background-color:lightblue" class="navbar-header navbar-light navbar-fixed-top">
<a class="navbar-brand" style="color:white;" rel="home" href="#" title="">
<img style="max-width:60px; margin-top: -7px;" class="img-circle"
src="~/Content/Images/Logo.jpeg"> <em>JOM</em>
</a>
<div id="navbar5" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>#Html.ActionLink("Students", "Index", "Student")</li>
<li>#Html.ActionLink("Books", "Index", "Book")</li>
<li>#Html.ActionLink("Checkout", "Index", "Checkout")</li>
<li>#Html.ActionLink("Checkin", "Index", "Checkin")</li>
</ul>
</div>
</div>
The list items (i.e, Students, Books, Checkout, Checkin) appear on desktop but not on mobile. Can someone point out what I am doing wrong here?
As you can see, the mobile version does not have the 4 links.
Do you have the nav bar wrapped in a .navbar.
<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.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default">
<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="#">JOM</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>#Html.ActionLink("Students", "Index", "Student")</li>
<li>#Html.ActionLink("Books", "Index", "Book")</li>
<li>#Html.ActionLink("Checkout", "Index", "Checkout")</li>
<li>#Html.ActionLink("Checkin", "Index", "Checkin")</li>
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container-fluid -->
</nav>
Related
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 :)
My Bootstrap collapsible menu isn't working. I can't figure out where is my problem?
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#top">the company</a>
<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="menu" id="#myNavbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right" data-toggle="collapse" data-target="myNavbar">
<li class="scrollable">About me</li>
<li class="scrollable">Portfolio</li>
<li class="scrollable">Contact Me</li>
</ul>
</div>
</div>
</nav>
You have duplicate attributes for class in multiple divs as well as multiple data-toggle="collapse" & data-target="myNavbar".
Also your target ID has the # in it, it should not: id="#myNavbar" should be id="myNavbar"
Validate your HTML and refer to the refer to the Docs
Working Example:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#top">the company</a>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="myNavbar" class="collapse navbar-collapse menu">
<ul class="nav navbar-nav navbar-right">
<li class="active scrollable">About me
</li>
<li class="scrollable">Portfolio
</li>
<li class="scrollable">Contact Me
</li>
</ul>
</div>
</div>
</nav>
<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>
The problem was with:
Your collapse navbar hierarchy.
The div where you used menu class.
Syntax
The anchor tag: <a class="navbar-brand" href="#top">the company</a> should come after button tag.
And the menu class should be used along with other classes: <div id="myNavbar" class="menu collapse navbar-collapse">, instead of <div class="menu" id="#myNavbar" class="collapse navbar-collapse">
<div id="#myNavbar" should be changed to <div id="myNavbar". Remove the #, you don't need it while adding id to the div.
And final issue: Don't use data-toggle="collapse" data-target="myNavbar"> again in the ul tag. Just use <ul class="nav navbar-nav navbar-right">
Try running the code snippet below and don't forget to include Bootstrap and jQuery libraries in your webpage. Cheers!
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<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>
<a class="navbar-brand" href="#top">the company</a>
</div>
<div id="myNavbar" class="menu collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="scrollable">About me</li>
<li class="scrollable">Portfolio</li>
<li class="scrollable">Contact Me</li>
</ul>
</div>
</div>
</nav>
<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>
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>
I was wondering if someone would help me correct my html using bootstrap so that when the window is minimised the navbar automatically collapses into a hamburger icon.
Here is my HTML:
<nav class="navbar navbar-inverse navbar-fixed-top" id="my-navbar">
<div class="container-fluid">
<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>
Hemsley Fraser
</div>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav">
<li>Topics</li>
<li>About</li>
<li>Contact Us</li>
</ul>
</div>
</div>
Thank you very much! :)
It's working fine please add both bootstrap files and jquery file.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<nav class="navbar navbar-inverse navbar-fixed-top" id="my-navbar">
<div class="container-fluid">
<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>
Hemsley Fraser
</div>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav">
<li>Topics</li>
<li>About</li>
<li>Contact Us</li>
</ul>
</div>
</div>
I'm using Bootstrap and I have a problem with the collapsing Navbar, it shows wrong on Chrome for Android, I tried stock navbar's without modifying and still happens (www.tasqueo.com)
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div 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>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a class="page-scroll" href="#page-top">Inicio</a></li>
<li><a class="page-scroll" href="#contact">Contacto</a></li>
</ul>
</div>
</div>
</nav>
Yes Drip is correct,
So I came to understand one thing.
we have to use https for secured links especially for maxcdn.bootstrapcdn.com
or
If you give http:// in this code the output is coming like above.
MY CODE:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div 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>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a class="page-scroll" href="#page-top">Inicio</a></li>
<li><a class="page-scroll" href="#contact">Contacto</a></li>
</ul>
</div>
</div>
</nav>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>