bootstrap navigation not working - css

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>

Related

Divide Bootstrap navbar into two columns

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>

Modal not displaying

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>

collapsible navigation bar become invisible on mobile screen

I am trying to implement twitter bootstrap collapsible navigation bar. On Desktop navigation bar is visible but on mobile screen it's not visible.
Here is View Part
<div class="masthead clearfix">
<div class="inner">
<h3 class="masthead-brand"><img src="/x/img/X.png" style="width:80px; position:relative; top:-20px;"></img></h3>
<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="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-top:15px;background-color:rgba(255,255,255,.4)">
<li class="active"><a class="call_us btn btn-default no-rounded btn-hollow" th:text="${'+91 444}" style="cursor:default; pointer-events:none;"> Call Us 555</a></li>
<li ><a th:href="#{/X}" href="#">X</a></li>
<li><a th:href="#{/Y}" href="#">Y</a></li>
<li><a th:href="#{/Z}" href="#">Z</a></li>
<li><a th:href="#{/T}" href="#">C</a></li>
<li class="active"><a th:href="#" href="#">Blog</a></li>
<!--li>Help</li-->
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
Can some one help me to fix this issue. I have included collapse.js in my path.

You're missing the navbar class which is the first line of the default navigation in Bootstrap. See Docs.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="masthead clearfix">
<div class="inner">
<h3 class="masthead-brand"><img src="http://placehold.it/350x150" style="width:80px; position:relative; top:-20px;"></img></h3>
<nav class="navbar navbar-default">
<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="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-top:15px;background-color:rgba(255,255,255,.4)">
<li class="active"><a class="call_us btn btn-default no-rounded btn-hollow" th:text="${'+91 444}" style="cursor:default; pointer-events:none;"> Call Us 555</a>
</li>
<li><a th:href="#{/X}" href="#">X</a>
</li>
<li><a th:href="#{/Y}" href="#">Y</a>
</li>
<li><a th:href="#{/Z}" href="#">Z</a>
</li>
<li><a th:href="#{/T}" href="#">C</a>
</li>
<li class="active"><a th:href="#" href="#">Blog</a>
</li>
<!--li>Help</li-->
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>
</div>
</div>

Changing the color of navbar-brand to two colors

I want to change the navbar-brand so that the two words are two separate colors. I am having trouble doing that at the moment as no matter what CSS I use it doesn't seem to change the color. The padding I used does take effect so it is targeting it, just not changing the color. Could anyone help me with what I need to do?
<nav class="navbar navbar-inverse navbar-fluid" 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="#"><div class="translation">TRANSLATION</div><div class="commons">COMMONS</div></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav nav pull-right">
<li>
Home
</li>
<li>
Register
</li>
<li>
Log In
</li>
<li>
About
</li>
<li>
Contact
</li>
<li>
Donate
</li>
</ul>
</div>
</div>

Use SPAN and assign a color.
.red {
color: red;
}
.white {
color: white;
}
<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.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-inverse navbar-fluid" 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="#"><span class="red">TRANSLATION</span> <span class="white">Commons</span></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav nav pull-right">
<li>Home
</li>
<li>Register
</li>
<li>Log In
</li>
<li>About
</li>
<li>Contact
</li>
<li>Donate
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>

Prevent logo stretching in a navbar-brand on iPhone

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>

Resources