I'm new to bootstrap I'm having trouble with my navbar I don't want to display the collapsed heading when the page is first opened on a mobile is there any way to do this? I have tried searching the web and have had no luck.
My code is:
<!-- Menu -->
<div class="navbar navbar-default navbar-fixed-top navbar-inverse">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
The CO-OP Couch
</div>
<div class="collpase navbar-collapse" id="example">
<ul class="nav navbar-nav navbar-right">
<li>PodCasts</li>
<li>Facebook</li>
<li>Community</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
It was all good just the typo error in your class "collapse".
<div class="navbar navbar-default navbar-fixed-top navbar-inverse">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
The CO-OP Couch
</div>
<div class="collapse navbar-collapse" id="example">
<ul class="nav navbar-nav navbar-right">
<li>PodCasts</li>
<li>Facebook</li>
<li>Community</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
Related
I want to create two columns in my navbar. I use Bootstrap css.
All buttons are now lined out to the left. I would like to have the two last buttons to line out to the right... Is this possible and how do I do it ?
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top" background-color: #eb8d22>
<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="index.html"></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">HOME</li>
<li>FOOD</li>
<li>FOTO'S</li>
<li>ARCHIEF</li>
<li>PETER</li>
<li>VAKANTIEWONING</li>
</ul>
</div>
</nav>
The second <ul> list with 2 items is on the right side. Groet uit regio den haag.
<nav class="navbar navbar-default navbar-fixed-top" style="background-color: #eb8d22;">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbarList" aria-expanded="false">
<span class="sr-only">Toggle menu</span>
<span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">My Site</a>
</div>
<div class="collapse navbar-collapse" id="navbarList">
<ul class="nav navbar-nav">
<li class="active">HOME</li>
<li>FOOD</li>
<li>FOTO'S</li>
<li>ARCHIEF</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>PETER</li>
<li>VAKANTIEWONING</li>
</ul>
</div>
</div>
</nav>
the following code does not show the list items when I press the button instead the list items appear as header in navbar.
<nav id="header-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="#collapsable-nav">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<h1>Food,LLC</h1>
</div>
<div id="collapsable-nav" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Sandwich</li>
<li>Pizza</li>
<li>Pasta</li>
</ul>
</div>
</div>
</nav>
This is my code for navbar it works with desktop but when i go with responsive the menu links does't work . i click on menu and nothing happen please help.
<header class="header">
<div class="header-nav">
<nav role="navigation" class="navbar navbar-default navbar-fixed-top navbar-slide show-menu" style="background-color:#7c3a1c;">
<div class="container">
<div class="navbar-header">
<button aria-controls="navbar" data-target="#navbar" data-toggle="collapse" class="navbar-toggle collapsed" type="button"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
<a id="header-logo" href="index.php" class="navbar-brand"><img class="margin-top" src="images/logo.jpg" alt=""></a> </div>
<div class="navbar-collapse collapse" id="navbar" aria-expanded="false" role="menu" style="height: 1px;">
<ul class="nav navbar-nav style2 navbar-right">
<li>Home</li>
<li>About Us</li>
<li>Gallery</li>
<li>Contact</li>
<li style="background-color: #cc1b47;">805-305-2630</li>
</ul>
</div>
</div>
</nav>
</div>
</header>
`
Check this snippet..
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<header class="header">
<div class="header-nav">
<nav role="navigation" class="navbar navbar-default navbar-fixed-top navbar-slide show-menu" style="background-color:#7c3a1c;">
<div class="container">
<div class="navbar-header">
<button aria-controls="navbar" data-target="#navbar" data-toggle="collapse" class="navbar-toggle collapsed" type="button"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span>
</button>
<a id="header-logo" href="index.php" class="navbar-brand">
<img class="margin-top" src="images/logo.jpg" alt="">
</a>
</div>
<div class="navbar-collapse collapse" id="navbar" aria-expanded="false" role="menu" style="height: 1px;">
<ul class="nav navbar-nav style2 navbar-right">
<li>Home
</li>
<li>About Us
</li>
<li>Gallery
</li>
<li>Contact
</li>
<li style="background-color: #cc1b47;">805-305-2630
</li>
</ul>
</div>
</div>
</nav>
</div>
</header>
I am trying to learn bootstrap and so far it has been very fun. I have been stuck on this problem for a while, I want to space my navbar just two fifths of the screen. I think it will look a lot nicer if it is spaced that way but I haven't been able to find a solution. I was wondering if there is any way of doing that.
<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="index.html"><strong>Website</strong></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Products</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
You can create a css class:
.adjust-margins-container{
margin-left: 30%;
}
and then add the class to:
<div class="container-fluid adjust-margins-container">
bootply example
I have a navbar-brand with a logo and button and they stretch out when viewed on an iPhone while the menu is collapsed.
How can I prevent this?
<header id="header">
<nav class="navbar navbar-inverse navbar-fixed-top" role="banner">
<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="index.html"><img src="images/logo.png" alt="logo"></a>
<div class="slogan"><p> PERTAMA DI INDONESIA : </p><div class="slogs">Dengan Formula Plastik Baja</div><p></p></div>
</div>
<div class="collapse navbar-collapse navbar-right">
<ul class="nav navbar-nav">
<li class="active">HOME</li>
<li>PRODUCTS</li>
<li>HOW IT WORKS</li>
<li>OUR PROJECTS</li>
<li>CONTACT</li>
</ul>
</div>
</div><!--/.container-->
</nav><!--/nav-->
</header>
Try to add class="img-responsive" to img.
<a class="navbar-brand" href="index.html">
<img class="img-responsive" src="images/logo.png" alt="logo">
</a>