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>
Related
I'm trying to start my own business and looking to save a bit of money by using a bootstrap 3 based template I purchased.
The menu on mobiles doesn't collapse when a menu item is chosen nor when someone clicks outside the menu. Apparently it's not supposed to which strikes me as wildly counterintuitive but there we go. How might I go about getting it to collapse when a subject is chosen OR someone clicks outside the menu, please? There are similar questions here but none of them have worked for me thus far. I'm probably doing something stupid though.
<nav class="navbar navbar-default">
<div class="row">
<div class="navbar-header col-md-3 col-sm-3">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav-res"> <span class="sr-only">Toggle navigation</span> <span class="fa fa-navicon"></span> </button>
<!--======= LOGO =========-->
<div class="logo col-2"><img src="images/pdriving4.png" alt="" ></div>
</div>
<!--======= MENU =========-->
<div class="col-md-9 col-sm-9">
<div class="collapse navbar-collapse" id="nav-res">
<ul class="nav navbar-nav">
<li class="dropdown active"> Home </li>
<li class="dropdown"> About Paul</li>
<li class="dropdown"> Passed Gallery </li>
<li class="dropdown"> Courses </li>
<li>Contact</li>
<li class="dropdown"> FAQs </li>
<li class="dropdown"> Book Now </li>
</ul>
</div>
</div>
</div>
</nav>
My code was working fine, but I decided to add a hamburger button, and now I have an issue.
The button works fine, but when my screen is larger than the breakpoint, I have no navigation showing on my screen. I'm sure it is a matter of missing a tag or something, but I can't see it and could use some help. I have jQuery and Bootstrap 3 and CSS loaded.
<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="#collapsemenu" aria-expanded="false">
<span class="src-only">Menu</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">LORI</a>
</div>
<div class="collapse navbar collapse" id="collapsemenu">
<ul class="nav navbar-nav">
<li>ABOUT</li>
<li>PORTFOLIO</li>
<li>CONTACT</li>
</ul>
</div>
</div>
</nav>
Try this. this code works
<nav class="navbar navbar-inverse">
<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="#">Lori</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</div>
</nav>
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 having problems with links in navbar's using Bootcamp in XPages. I have an Internet Site document for develop.test.com. The Home URL on the page is Web/develop.nsf. I have the launch option of the DB set to the xPage xpHomePage.xsp. When I go to develop.test.com my Bootstrap site with menu displays perfectly. My problem is that the links in the navbar are inconsistent. Sometimes I have the DB name included, sometimes not?
The link Abmelden (near the bottom of the code) converts to http://develop.test.com/web/develop.nsf?logout which would be correct. The dropdown "Anwesenheiten/offen nach Name converts to http://develop.test.com/Web/xpAnwesendOffenNachName ==> somehow the develop.nsf is missing? I just cannot work out why.
I could of course just hardcode the NSF into the link - just doesn't seem right to me :o)
Thanking you for any help given.
=========== here is the code
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
<xp:div id="header" disableTheme="true">
<!-- This is the banner -->
<nav class="navbar-header navbar-inverse navbar-fixed-top" role="navigation" id="header">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="xpHomePage.xsp">
<xp:text escape="true" id="computedField1">
<xp:this.value><![CDATA[#{javascript:#DbTitle()}]]></xp:this.value>
</xp:text>
</a>
<!-- this is the hamburger menu that gets shown when the view is small enough -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Navigation umstellen</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- create a div so the header is collapsed when tiny -->
<div class="collapse navbar-collapse" id="header-menu">
<!-- and now the actual menu -->
<ul class="nav navbar-nav navbar-right navbar-inverse">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
Anwesenheiten
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>
offen nach Name
</li>
<li>
offen nach Standort
</li>
<li role="separator" class="divider"></li>
<li>
freigegeben nach Name
</li>
<li>
freigegeben nach Standort
</li>
<li>
freigegeben nach Monat
</li>
</ul>
</li>
<li>
<a href="?logout">
<span class="glyphicon glyphicon-log-out"></span>
<xp:text>
<xp:this.value><![CDATA[#{javascript:" Abmelden"}]]></xp:this.value>
</xp:text>
</a>
</li>
</ul>
</div>
</div>
</nav>
</xp:div>
</xp:view>
Try computing the whole href. It may be doing different things on different pages within the application, depending on context.
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-->