I'm trying to get a navbar-brand setup on my navbar, but the link's just get pushed to the left and a navbar-brand is nowhere to be seen.
<nav class="navbar navbar-default navbar-fixed-top" id="override">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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 navbar navbar-default navbar-fixed-top" href="#">Alpha Creations</a>
</div>
<div id="navbar navbar-default navbar-fixed-top">
<ul class="navbar-default navbar-fixed-top navbar-nav nav" id="override">
<li><i class="fa fa-home"></i>Home</li>
<li><i class="fa fa-cogs"></i>Services</li>
<li><i class="fa fa-briefcase"></i>Portfolio</li>
<li><i class="fa fa-money"></i>Pricing & Packages</li>
<li><i class="fa fa-comments-o"></i>Customer Reviews</li>
</ul>
</div>
</nav>
Edit:
The links were just a matter of CSS but the branding still doesn't show up
Thanks Xufox, i'm not entirely sure how to properly post the markup
Related
When I press the menu item on the top right side of my webpage it doesn't collapse. I have checked my code and it seems to be okay.
The website with the problem is: www.kemnet.be
I have tried putting everything in the block and made minor changes to my jquery and CSS.
I have this from a theme and added the original code to my site for testing but the dropdown still doesn't show.
<header class="navbar navbar-inverse navbar-fixed-top opaqued" 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>
<i class="fa fa-bars"></i>
</button>
<a class="bounce-in no-display animated bounceIn appear" href="index.html"></a> <img src="images\white.png">
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>Praktisch </li>
<li>Onze Visie</li>
<li>Ons Team</li>
<li>Ons Aanbod </li>
<li>Nieuws</li>
<li>Contact</li>
<li><a class="border" href="https://www.mtc-it4.be/patient/index.html#/appointments/day/bjNkcWkyQmFRMkpDVTRFNndleFgzSlRvdC9TSU1YOXdJWklnQ2ZtMDhjcEJCYWl6RlREMWxyOGlZY2FSUk10WQ==" target="_blank">Maak een afspraak</a></li>
</ul>
</div>
</div>
</header>
I don't receive any error messages tho.
I just replaced <i class="fa fa-bars"></i> with classic way.
<header class="navbar navbar-inverse navbar-fixed-top opaqued" 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="bounce-in no-display animated bounceIn appear" href="index.html"></a> <img src="images\white.png">
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>Praktisch </li>
<li>Onze Visie</li>
<li>Ons Team</li>
<li>Ons Aanbod </li>
<li>Nieuws</li>
<li>Contact</li>
<li><a class="border" href="https://www.mtc-it4.be/patient/index.html#/appointments/day/bjNkcWkyQmFRMkpDVTRFNndleFgzSlRvdC9TSU1YOXdJWklnQ2ZtMDhjcEJCYWl6RlREMWxyOGlZY2FSUk10WQ==" target="_blank">Maak een afspraak</a></li>
</ul>
</div>
</div>
</header>
https://jsfiddle.net/v61aeg5r/1/
I try to align my navbar placed at the top of my webpage, but somehow one of items appears straight down "Kontakt".
I would like all items i have to be in same line. Second issue is i cannot make my logo when click on it redirect to my page at the top again.
Code:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img src="img/ico2.png" class="img-responsive" alt="logo">
</div>
<div class="collapse navbar-collapse text-center" id="bs-example-navbar-collapse-1">
<div class="col-md-8 col-xs-12 nav-wrap">
<ul class="nav navbar-nav">
<li><i class="fa fa-windows"></i> Witamy</li>
<li><i class="fa fa-dropbox"></i> Usługi</li>
<li><i class="fa fa-user"></i> Realizacje</li>
<li><i class="fa fa-user"></i> Etapy </li>
<li><i class="fa fa-stack-exchange"></i> O nas</li>
<li><i class="fa fa-whatsapp"></i> Kontakt</li>
</ul>
</div>
<!-- <div class="social-media hidden-sm hidden-xs">
<ul class="nav navbar-nav">
<li>
<i class="fa fa-facebook"></i>
</li>
</ul>
</div> -->
</div>
</div>
</nav>
You don't need the wrapping div#bs-example-navbar-collapse-1s for a navbar to work.
And wrap a link tag around the image to redirect it to your homepage.
Update:
Issue 1) There are limitations to how many items Bootstrap can show in a navigation bar. Please check the docs and read the limitations.
Issue 2) I have fixed the code. Please ensure that jQuery and bootstrap JS files are loaded.
Issue 3) I cannot recreate the issue. It seems related to the logo size. Can you post a jsFiddle?
Updated Here is the fixed code:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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="//www.your-any-webste.com/"><img src="img/ico2.png" class="img-responsive" alt="logo"></a>
</div>
<ul class="nav navbar-nav collapse navbar-collapse text-center" id="bs-example-navbar-collapse-1">
<li><i class="fa fa-windows"></i> Witamy</li>
<li><i class="fa fa-dropbox"></i> Usługi</li>
<li><i class="fa fa-user"></i> Realizacje</li>
<li><i class="fa fa-user"></i> Etapy </li>
<li><i class="fa fa-stack-exchange"></i> O nas</li>
<li><i class="fa fa-whatsapp"></i> Kontakt</li>
</ul>
</div>
</nav>
I am currently experiencing an issue with Bootstrap where the toggle navbar button does not want to work when it is clicked.
I have searched around trying to find a solution yet none of these seem to be working.
<nav class="navbar navbar-inverse navbar-fixed-top">
<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="#">PC Service Manager</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><i class="fa fa-home fa-fw navfa"></i>Home</li>
<li>About</li>
<li>Contact</li>
<li><i class="fa fa-sign-in navfa"></i>Login</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
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>
[noob alert] I am using bootstrap 3 alongside with a bought theme. When using on smaller viewport size, the nav button doesn't work. Which part of it am I missing? Thanks a lot!
<header class="page-header">
<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>
<i class="fa fa-bars"></i>
</button>
<a class="navbar-brand" href="#">Hello World!</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">That</li>
<li>This</li>
</ul>
</div>
</div>
</div>
</header>
i works on me, maybe you forgot to add the jquery, script
http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js