Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
I need my vavbar to display to be like
I could not find any options for this in Bootstrap documents.
is there any way to do this?
use below bootstrap code
<nav class = "navbar navbar-inverse navbar-static-top">
<div class = "container-fluid">
<!-- logo -->
<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>
Application Name
</div>
<!-- menu items -->
<div class="collapse navbar-collapse" id="myNavbar">
<ul class = "nav navbar-nav navbar-right">
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
</div>
</div>
Add navbar-inverse class to your nav to see a dark nav bar.
Here is code snippet
<nav class="navbar navbar-default navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>Contact</li>
<li>About</li>
</ul>
</div>
</nav>
Demo: https://codepen.io/karthikdivi/pen/qXOwoL
Related
So I'm running into an issue with my navbar and media queries. I can get it to switch from regular logo to a smaller logo with no problems. The visible-sm class is giving me issues as for the life of me, I cannot get the text links to the right to reduce the margin forcing the smaller logo up and making the navigation a horror. Did I miss something in the documentation? It seems like something really simple to reduce the rela estate the links are using when hitting the 767px media query. I apologize in advance if this has already been answered I couldn't find a question specific to this issue.
Here be a picture
Here be the Bootply
Here be my HTML
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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 visible-xs" href="#"><img src="images/logobug.jpg" alt="" /></a>
<a class="navbar-brand visible-sm" href="#"><img src="images/logosm.jpg" alt=""></a>
<a class="navbar-brand visible-md" href="#"><img src="images/logomd.jpg" alt=""/></a>
<a class="navbar-brand visible-lg" href="#"><img src="images/logolg.jpg" alt=" Logo" /></a>
</a>
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right pull-right">
<li>HOME</li>
<li> EVENTS</li>
<li>CONTACT US</li>
<li>DIRECTIONS</li>
<li>SPONSERS</li>
<li>VENUES</li>
<li>ABOUT</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
Here be my CSS:
.navbar-right {
float: right;
margin-right: -25 px;
}
I think that's what you want , I removed pull right because navbar right do the same
a forked bootply
i put a collapsing navbar on my website.
the problem is that on mobile the navbar isnt collapsing
what is the problem?
<nav class="navbar navbar-inverse 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="#main"><?php bloginfo ('name') ?></a>
</div>
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li>צור קשר</li>
<li>פרויקטים</li>
<li>שירותים</li>
<li>אודות</li>
<li>ראשי</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</nav>
In your code a <ul><li> added mistake.
Delete it.
Then your code is working properly.
I am new to bootstrap and am trying to learn it using the excellent W3schools website. I am basing my page on http://www.w3schools.com/bootstrap/bootstrap_theme_company.asp. I have tried changing the hrefs in the navbar to offpage links but nothing works. I click the menu and nothing happens. Onpage links work fine.
How do i do offpage links?
TIA
Sample code:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<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="#myPage">Logo</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Home<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>example</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
Can you please post the snippet of the navbar code in question.
My guess are you are not adding http to the href of the navbar. Try something like the on below:
<a href='http://example.com'>example</a>
I've just started learning Boostrap and I'm having a couple of problems with the navigation bar toggle. I've checked up answers from here (like this: Bootstrap 3.0 nav responsive toggle button not working) but I still can't find a solution to what the problem might be.
I'll be glad if someone can help me look into the code and tell me what the problem is. I've linked to the relevant script files (both bootstrap and jquery js files) but I have no with the problem.
here is my code,
<!-- Nav Bar Starts-->
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<a class="navbar-brand text-muted" href="#"> eLeanr</a>
<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>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"> Home
</li>
<li> About eLeanr
</li>
<li> Contact
</li>
</ul>
</div>
</div>
</div>
<!-- Nav Bar Ends-->
Can anyone help me please how to make the unordered list display in grid widths ?
<div class="navbar" role="navigation">
<div class="container">
<div class="row">
<div class="navbar-header col-md-4">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#topmenu">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a rel="home" class="logo" href="{$baseUri}">
<img src="img/layout/portfolio-2014-logo.png" alt="" class="img-responsive logo" />
</a>
</div>
<div class="navbar-collapse collapse" id="topmenu">
<ul class="nav navbar-nav">
<li class="active">blog</li>
<li class="col-md-2">works</li>
<li class="col-md-2">about</li>
<li class="col-md-2">contact</li>
</ul>
</div>
</div>
</div>
<div class="container">
<hr>
</div>
</div>
I've tried something like this but it is not workiing :/
Well that's not part of default Bootstrap in the navbar because navbar-nav does it's own width based on the width of the text and the padding, but you can just remove the navbar-nav and just use nav:
DEMO: http://jsbin.com/kiyiye/1/
<ul class="nav">
And it will work with col-*-classes but you'll need to likely address the smaller viewport margins and such. Get intimately familiar with Bootstrap's css if you decide to use something never demonstrated in their docs.