I'm using Pico CMS. Here is the navigation code
<!-- Navigation -->
<nav class="navbar navbar-default navbar-custom navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapseID">
<span class="sr-only">Toggle navigation</span>
Menu <i class="fa fa-bars"></i>
</button>
<a class="navbar-brand" href="#">Broadstone Services</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="navbar-collapse collapse" id="collapseID">
<ul class="nav navbar-nav navbar-right">
<li>
Home
</li>
<li>
About
</li>
<li>
Solutions
</li>
<li>
Contact
</li>
<li>
Blog
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
When my page is full screen, the menu items look great. However, when the page window is made a lot smaller (or on mobile) the menu doesn't expand.
You are not loading the jQuery and Bootstrap JavaScript libraries that perform the functional uncollapse.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" crossorigin="anonymous"></script>
See http://getbootstrap.com/getting-started/
For functional reference see: https://github.com/twbs/bootstrap/blob/master/dist/js/bootstrap.js#L557
Related
How can I display correctly one existing dropdown-menu near hamburger-menu when it appears?
I tried to find this way, but no success. Can not correctly move it out! Also did not find some examples to do it. To make a new dropdown-menu and hide another is not a problem, but to move this one near hamburger-menu correctly is not so easy. For me, ofcorse :)
But I think after that there will be some other problems. Overlap each other and so on...
Maybe really choose the easiest way and make new one?
Anyway, maybe someone wiser can help and do it if there is nothing to do :)
Maybe for somebody else will be useful...
Here is image how I have imagined
Here is LIVE DEMO
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<ul class="nav navbar-nav" style="display:inline-block;float:right;position:relative;right:70px;">
<li class="dropdown">
Second <span class="caret"></span>
<ul class="dropdown-menu">
<li>Second-1</li>
<li>Second-2</li>
<li>Second-3</li>
</ul>
</li>
</ul>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false" style="right:-60px;">
<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="#">Brand</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">
<li>First</li>
<li class="dropdown">
Second <span class="caret"></span>
<ul class="dropdown-menu">
<li>Second-1</li>
<li>Second-2</li>
<li>Second-3</li>
</ul>
</li>
<li>Third</li>
<li>Fourth</li>
<li class="dropdown">
Fifth <span class="caret"></span>
<ul class="dropdown-menu">
<li>Fifth-1</li>
<li>Fifth-2</li>
<li>Fifth-3</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
This alignment will be ok as long as button is displayed a better behavior of the dropdown, when click it you could change the width property.
I have created a nav bar, and styled it my way. However, when I make the window small, and click in the right corner on the button, the nav bar extends all the options and that's it. Once I click on one of the options, it will not close i.e. it will not collapse back. What am I doing wrong? Ive been exploring with this for a while now and cannot see the mistake.
Here is my code:
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<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>
<!-- use a responsive image option so this logo looks good on devices - recommend using something like retina.js -->
<a class="navbar-brand" href="#/">Test</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav navbar-right">
<li>Home
</li>
<li>About Us
</li>
<li>What We Do
</li>
<li>Examples
</li>
<li>Testimonials
</li>
<li>Contact Us
</li>
</ul>
</div>
</div>
</nav>
In my index.html, I link to the header.html which works fine, and the following styles:
<link rel="stylesheet" href="css/bootstrap.min.css">
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
And the javascript:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> </script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
Clicking the links doesn't automatically collapse/toggle the Bootstrap navbar. This is by design.
If you want them to close after click you can add this to the links..
data-toggle="collapse" data-target=".navbar-collapse.in"
Demo: http://www.codeply.com/go/Ia4LLB8Yyp
You could also use jQuery like this..
$(document).on('click','.navbar-collapse.in',function(e) {
if( $(e.target).is('a') ) {
$(this).collapse('hide');
}
});
The admin bar that appears in top of the window in Django CMS when you log in to make changes on the site overlays the Bootstrap navbar.
This is what it looks like:
As you can see the navbar is being overlapped by the toolbar while the rest of the site moves down to accommodate for the toolbar when it deploys.
Here is the HTML for the navbar:
<nav class="navbar 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" href="index.html"><img src="img/EPG.jpg"></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">
<li>
HOME
</li>
<li>
ABOUT
</li>
<li>
APPLY
</li>
<li class="dropdown">
RESOURCES <b class="caret"></b>
<ul class="dropdown-menu">
<li>
Calander
</li>
<li>
People
</li>
<li>
ETC
</li>
<li>
ETC
</li>
<li>
ETC
</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
How can I make the navbar adjust like the rest of the page when the django CMS toolbar appears?
Since they're both fixed to the top, they're always going to be fighting for that position. According to the docs, the toolbar attaches a .cms-toolbar-expandedclass to the html tag when it's open. You could add a bit of CSS that pushes down your navbar when the CMS toolbar is opened. Something like:
.cms-toolbar-expanded body, .cms-toolbar-expanded .navbar-fixed-top{
top:30px;
}
Edited to add the body tag, because depending on your layout, pushing the navbar down could mess up the symmetry of the rest of your site. It's minor but it would bother me visually.
As title says i'm having trouble with bootstrap navbar menu items not clicking when viewing on iPhone.
I have emulated on chrome and the links work fine.
Any ideas?
<header id="Home" class="header">
<div style="text-align:right; color:#ffffff;">For your FREE mediation consultation** call:<br><strong style="font-size:24px;">XXXXXX</strong></div>
<div class="menu-wrapper">
<nav id="navigation" class="navbar navbar-default" role="navigation">
<div class="navbar-inner">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navigationbar">
<span class="sr-only">Toggle navigation</span>
<i class="fa fa-bars fa-2x"></i>
</button>
<a id="brand" class="navbar-brand" href="index.html" style="color:#ffffff; font-size:24px; line-height:24px;">
Company <br>
Name<br>
Here
</a>
</div>
<div class="navbar-collapse collapse" id="navigationbar">
<ul class="nav navbar-nav navbar-right" id="nav">
<li class="current">Home</li>
<li>About Us</li>
<li>What is Mediation</li>
<li>FAQ</li>
<li>Our Expertise</li>
<li>Our Fees</li>
<li>Contact</li>
</ul>
</div><!-- end navbar-collapse collapse -->
</div><!-- nav -->
</nav><!-- end navigation -->
</div><!-- menu wrapper -->
</header><!-- end header -->
OK... I found the culprit however do not know how to fix
<script type="text/javascript">
// Close the navbar if collapsed (small screen) when clicking on a menu link
// From edit 2 on
// http://stackoverflow.com/questions/14203279/bootstrap-close-responsive-menu-on-click/23171593#23171593
$(function () {
$('.navbar-collapse ul li a:not(.dropdown-toggle)').bind('click touchstart', function () {
$('.navbar-toggle:visible').click();
});
});
</script>
If I remove this code it works but the menu does not disappear. I'd like a solution where the menu items are clicked and the menu then disappears.
Thanks!
Here's what I have, I've tried moving around my section inside the "brand" and do a pull-right, outside the brand and outside the collapse and do a pull-left/right, while also trying to place it before or after the collapse section.
When adding it to the brand section it works, but it goes down to a new line. How do I keep it on the same line?
<body>
<header>
<nav class="navbar navbar-default navbar-inverse" role="navigation" style="font-size: 18px">
<div class="container">
<div class="navbar-header">
<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 class="navbar-brand site-title" style="text-decoration: none; font-size: 24px; font-weight:bold">#Html.ActionLink("Manager", "Index", "Player")</div>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse navbar-right">
<ul class="nav navbar-nav">
#* <li class="active">#Html.ActionLink("Home", "Index", "Player")</li>
<li class="active">#Html.ActionLink("Match", "Index", "Match")</li> <li class="dropdown">
Profile <b class="caret"></b>
<ul class="dropdown-menu">
<li>#Html.ActionLink("Change Password", "ManagePassword", "Account")</li>
<li>#Html.ActionLink("Update Profile Info", "UpdateProfile", "Account")</li>
<li>#Html.ActionLink("Log Off", "LogOff", "Account")</li>
</ul>
</li>
</ul>
</div>
<div>
<!-- I don't want it apart of the collapsible portion -->
<div class="navbar-right">
<ul class="nav navbar-nav">
<li class="active">#Html.ActionLink("Match", "Index", "Match")</li>
</ul>
</div>
</div>
</div>
</nav>
</header>
Below is an example that shows how to have just about any kind of 'vanilla bootstrap' NAVBAR configuration you could want. It includes a site title, both collapsing and non-collapsing menu items aligned left or right, and static text. Be sure to read the comments to get a fuller understanding of what you can change. Enjoy!
Fiddle: http://jsfiddle.net/nomis/n9KtL/1/
Fiddle with clearfix and expanded options on left side like normal: http://jsfiddle.net/jgoemat/u1j8o0n3/1/
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav role="navigation" class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Title -->
<div class="navbar-header pull-left">
GNOMIS
</div>
<!-- 'Sticky' (non-collapsing) right-side menu item(s) -->
<div class="navbar-header pull-right">
<ul class="nav pull-left">
<!-- This works well for static text, like a username -->
<li class="navbar-text pull-left">User Name</li>
<!-- Add any additional bootstrap header items. This is a drop-down from an icon -->
<li class="dropdown pull-right">
<span class="glyphicon glyphicon-user"></span><b class="caret"></b>
<ul class="dropdown-menu">
<li>
Profile
</li>
<li>
Logout
</li>
</ul>
</li>
</ul>
<!-- Required bootstrap placeholder for the collapsed menu -->
<button type="button" data-toggle="collapse" data-target=".navbar-collapse" class="navbar-toggle"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
</button>
</div>
<!-- The Collapsing items navbar-left or navbar-right -->
<div class="collapse navbar-collapse navbar-left">
<!-- pull-right keeps the drop-down in line -->
<ul class="nav navbar-nav pull-right">
<li>News
</li>
<li>Shop
</li>
</ul>
</div>
<!-- Additional navbar items -->
<div class="collapse navbar-collapse navbar-right">
<!-- pull-right keeps the drop-down in line -->
<ul class="nav navbar-nav pull-right">
<li>Locator
</li>
<li>Extras
</li>
</ul>
</div>
</div>
</nav>
You should be able to use pull-left and pull-right in 2 nav-header's to prevent the link from collapsing.
See: http://bootply.com/104747
<nav class="navbar navbar-default navbar-inverse" role="navigation">
<div class="container">
<div class="navbar-header pull-left">
<div class="navbar-brand">Brand</div>
</div>
<!-- I don't want it apart of the collapsible portion -->
<div class="navbar-header pull-right">
<ul class="nav navbar-nav pull-left">
<li class="active">No Collapse </li>
</ul>
<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>
</div>
<div class="collapse navbar-collapse navbar-right">
<ul class="nav navbar-nav">
<li class="dropdown">
Profile <b class="caret"></b>
<ul class="dropdown-menu">
<li>Change Password</li>
<li>Update Profile Info</li>
<li>Log Off</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
Here is my other answer in Jade with some template logic just for fun :). See the other answer for additional info.
//- NOTE: 'navbar-default' styles the 'burger' and navbar text color, so remove it to add your own
nav(class="navbar navbar-default navbar-fixed-top", role="navigation")
.container
//- Title
.navbar-header.pull-left
a.navbar-brand(href='javascript:window.location.replace(window.location.origin);') GNOMIS
//- 'Sticky' (non-collapsing) right-side menu item(s)
.navbar-header.pull-right
ul.nav.pull-left
//- This works well for static text, maybe some initials
li.navbar-text.pull-left User Name
//- User Icon drop-down menu
li.dropdown.pull-right
a.dropdown-toggle(href='#', data-toggle='dropdown', style="color:#777; margin-top: 5px;")
span.glyphicon.glyphicon-user
b.caret
ul.dropdown-menu
li
a(href="/users/id", title="Profile")
| Profile
li
a(href="/logout", title="Logout")
| Logout
//- Required bootstrap placeholder for the collapsed menu
button.navbar-toggle(type='button', data-toggle='collapse', data-target='.navbar-collapse')
span.sr-only Toggle navigation
span.icon-bar
span.icon-bar
span.icon-bar
//- The Collapsing items navbar-left or navbar-right
.collapse.navbar-collapse.navbar-left
//- pull-right keeps the drop-down in line
ul.nav.navbar-nav.pull-right
li
a(href="/news") News
li
a(href="/shop") Shop
//- Additional navbar items
.collapse.navbar-collapse.navbar-right
//- pull-right keeps the drop-down in line
ul.nav.navbar-nav.pull-right
li
a(href="/locator") Locator
li
a(href="/extras") Extras