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>
Related
I have a navBar with a drop-down. When you select either of the links on the drop-down the menu moves slightly to the left (+- 10px). You can see it a little better in mobile view.
<nav class="navbar navbar-inverse navbar-fixed-top">
<!-- add navbar-fixed-top -->
<div class="container-fluid">
<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=""> <img src="" alt=""> </a> </div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav pull-right">
<li><i class="fa fa-home" aria-hidden="true"></i> </li>
<li> about </li>
<li class="dropdown">
overview <span class="caret"></span>
<ul class="dropdown-menu">
<li>cost breakdown</li>
<li>project progress</li>
</ul>
</li>
<li> photos </li>
<li> faq </li>
<li> news </li>
<li> contact </li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!-- container-fluid -->
</nav>
https://jsfiddle.net/art852/uyg1otg5/12/
The shifting happens because you have a vertical scrollbar due to content overflow. If you add the following it will remove the shift.
#navbar {
overflow-y:hidden;
}
https://jsfiddle.net/uyg1otg5/18/
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 am really a newbie in bootstrap 3.
I have made this menu that will collapse when screen is resized, but nothing happend when I click on the button.
<button type="button" class="btn btn-navbar-highlight btn-lg btn-primary" data-toggle="collapse" data-target=".navbar-collapse" aria-expanded="false">
NAVIGATION <span class="icon-chevron-down icon-white"></span>
</button>
<div class="collapse navbar-collapse">
<ul class="nav nav-pills ddmenu">
<li class="dropdown active">Home</li>
<li class="dropdown">About</li>
<li class="dropdown">
Page <b class="caret"></b>
<ul class="dropdown-menu">
<li>Full Page</li>
<li>Two Column</li>
<li>Three Column</li>
<li>Documentation</li>
<li class="dropdown">
Dropdown Item ยป
<ul class="dropdown-menu sub-menu">
<li>Dropdown Item</li>
<li>Dropdown Item</li>
<li>Dropdown Item</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown">Gallery</li>
<li class="dropdown">Contact</li>
</ul>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
What am I doing wrong?
Bootstrap's JavaScript requires jQuery version 1.9.1 or higher.
You can use version 1.12.0, which is the last one of the 1.X branch at the moment, and it should work :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
Bootstrap should have notified you about this in your browser's javascript console directly, you should enable it as soon as you develop with projects that deal with JavaScript.
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-->