I'm trying to tweak an existing Twitter Bootstrap navigation bar to include a sign-out item, which is implemented as a form:
<div class='navbar'>
<div class='navbar-inner'>
<div class='container'>
<a class='brand'>Test</a>
<ul class='nav'>
<li><a>Item 1</a></li>
<li><a>Item 2</a></li>
<li><form >Sign Out</form></li>
</ul>
</div>
</div>
The logout link gets rendered differently than the rest of the navigation items. I'm sure this is a simple fix for someone knowledgeable in Twitter Bootstrap, but I'm pretty lost and would appreciate a push in the right direction.
I have a JSFiddle demonstrating the issue here.
The <form> tag is disrupting the bootstrap CSS if you inspect the bootstrap code you can see the selector for the a styles are only targeting direct descendants of the <li> in the nav
.navbar .nav > li > a
I am not sure the indended application of the form is but a real easy fix is to wrap the entire navbar with the form.
<form>
<div class='navbar'><div class='navbar-inner'>
<div class='container'>
<a class='brand'>Test</a>
<ul class='nav'>
<li><a>Item 1</a></li>
<li><a>Item 2</a></li>
<li>Sign Out</li>
</ul>
</div>
</div>
</form>
Try This
<li>Sign Out</li>
remove the form tags
Check here JSFiddle
Related
Hope somebody can see what's going on with this, it's got me beat.
I have an issue with the tag text elements inside a drop-down menu extending beyond the li element for the mobile version of the navigation in the footer. The li element has a width restriction (is shaded orange to see clearly), you can see the problem on this page when browser is mobile width wide https://www.mcveaghfleming.co.nz/nav-issues.html There are some long link names and instead of flowing under the line above they are extending past the end of the li element.
Here's the relevent html
<div class="footer">
<div class="blockfooter">
<div class="row ft-low-nav ">
<style>
.foot-mobile-on .dropdown-menu li{float:left; width:100%; background:orange; word-wrap: break-word !important;}
.foot-mobile-on .dropdown-menu li,
.foot-mobile-on .dropdown-menu li a{display:inline-block;}
</style>
<span class="foot-mobile-on">
<div class="col-md-12">
<div id="navbar" class="navbar-collapse collapse dropdown">
<ul class="nav navbar-nav" >
<li><a href="#" class="dropdown-toggle make-b" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Business & Corporate <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li class="make-b">Business & Corporate </li>
<li>Anti-Money Laundering and Countering Financing of Terrorism Act 2009 Compliance and Advice
</li>
</ul>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</span>
<!-- end-->
</div>
</div>
</div>
<!--end-->
Be sure to set position:relative or anything different than the static default to the UL.
Adding up, this is to prevent the 100% width to be referring to an upper parent. My guess is that a lack of position declaration on the parent is scaling up the DOM to the entire body width. A quick inspect on the code should give you a hint about this, but is hard without seeing the actual code in action.
I have the following code for a side-nav:
<ul id="slide-out" class="side-nav">
<li><a class="subheader">Last Updated:</a></li>
<li><a>Text Here</a></li>
<li><div class="divider"></div></li>
<li><a class="subheader">Subheader</a></li>
<li><a class="waves-effect" href="#!">Third Link With Waves</a></li>
</ul>
I also have the following header code:
<header>
<div class="navbar-fixed">
<nav>
<div class="nav-wrapper blue darken-1">
<a class="brand-logo center" href="#">Website Name</a>
<ul class="right">
<li><a data-activates="slide-out" class="button-collapse" href="#"><i class="material-icons">menu</i></a></li>
</ul>
</div>
</nav>
</div>
</header>
So why is the menu item not coming up in my nav bar and why is it not triggering the side nav?
Also, if i remove the button-collapse class, I am able to see the menu but clicking on it does not trigger side-nav
Here is my jsFiddle
Edit: My problem is not the icon, it's the fact that clicking on the menu icon/text does not activate the side navigation menu.
How do I make the side-nav work on mobile AND DESKTOP
Class button-collapse was setting display:none in CSS due to following for desktop:
#media only screen and (min-width: 993px)
nav a.button-collapse {
display: none;
}
Not sure the reason of it.
However you can use other class than button-collapse and it will work.
HTML:
<header>
<div class="navbar-fixed">
<nav>
<div class="nav-wrapper blue darken-1">
<a class="brand-logo center" href="#">Website Name</a>
<ul class="right">
<li><a data-activates="slide-out" class="my-btn" href="#"><i class="material-icons">menu</i></a></li>
</ul>
</div>
</nav>
</div>
</header>
JS:
(function($){
$(function(){
$('.my-btn').sideNav({
edge: 'left', // Choose the horizontal origin
closeOnClick: true, // Closes side-nav on <a> clicks, useful for Angular/Meteor
draggable: true // Choose whether you can drag to open on touch screens
}
);
}); // end of document ready
})(jQuery); // end of jQuery name space
Fiddle: https://jsfiddle.net/6hfrw33n/
If you want the menu to be accessible on all screensizes you just have
to add a simple helper class show-on-large to the .sidenav-trigger.
<header>
<div class="navbar-fixed">
<nav>
<div class="nav-wrapper blue darken-1">
<a class="brand-logo center" href="#">Website Name</a>
<ul class="right">
<li><a data-activates="slide-out" class="button-collapse show-on-large" href="#"><i class="material-icons">menu</i></a></li>
</ul>
</div>
</nav>
</div>
</header>
as shown here: https://materializecss.com/sidenav.html
Add this line in you js file $('.button-collapse').sideNav();
I am using bootstrap 3.2.0. I have some content in the tabs and I want to create an anchor link to this content in the tabs to different websites. Here is my code:
<div class="bs-docs-example">
<div class="tabbable tabs-left">
<ul class="nav nav-tabs">
<li> Sample#1 </h1></li>
<li> Sample#2 </h1></li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="1A">
<li id="ndf_35"></li>
</div>
<div class="tab-pane" id="2A">
<li id="ndf_36"></li>
</div>
</div>
</div>
</div>
I create the link like this :
some text
But it's not working. Does anyone have an idea how to fix this?
Demo
Its working fine.
Check that
You have included jquery (you need jquery for bootstrap.js)
You have included bootstrap.js
open <h1> tags
I am new Bootstrap and have been trying to get my head around documentation but finding it a bit confusing.
My page has three blocks: a main header, a side navigation, and a main content.
I could easily do a layout with CSS but I am using Bootstrap and wanted to use this to do a responsive layout.
On a regular screen I would like it to be as follows (where header takes full width):
[HEADER]
[NAV][MAIN]
Then on a small screen:
[HEADER]
[NAV]
[MAIN]
But on a smallscreen I would like nav to be collapsed. My nav is "nav nav-list bs-docs-sidenav" and I am not sure how to get that effect with this.
Thanks very much for any help.
Here is the html. Not that it gives you much more info.
<body>
<header>
<h1>title</h1>
</header>
<nav>
<ul id="nav" class="nav nav-list bs-docs-sidenav" >
<li><a class="parent">item 1</a>
<ul class="bs-docs-sidenav" style="display:none;">
<li>
<a href="#">
subitem 1
</a>
</li>
</ul>
</li>
<li>item 2</li>
</ul>
</nav>
<main class="content">
<p>content</p>
</main>
</body>
The answer is to use col--
This tells you how many columns the block should take up on different size screens.
Still would like the menu box to shrink into 1 item on a small screen, but this is good enough.
<header class="row col-xs-12">
</header>
<nav class="row col-xs-12 col-sm-4 ">
</nav>
<main class="row col-xs-12 col-sm-8">
</main>
i need
at this moment code look
Css
ul#content {height:1%;overflow:hidden;list-style:none;margin:0;padding:0;max-width: 1020px;}
ul#content li{vertical-align:top;display:inline-block;margin:0 2% 26px 0;width:auto;}
* html ul#content li{display:inline;}
*+ html ul#content li{display:inline;}
Html
<ul id="content" >
<li>
<div style="height: 420px;width: 740px;" ></div>
</li>
<li>
<ul>
<li>
<div style="min-width: 220px;">
text
</div>
</li>
<li>
<div style="min-width: 220px;">
text
</div>
</li>
<li>
<div style="min-width: 220px;">
text
</div>
</li>
</ul>
</li>
</ul>
Maybe css media queries are something you want to look in to:
http://css-tricks.com/6731-css-media-queries/
This specific tutorial explains how to make changes to the layout/styles based on screen width.
Basically it allows to conditionally set styles on elements, in this case you could make seperate styles for the ul depending on screen width. Browser support is pretty decent, and as a fallback you could supply some pretty simple js code to handle the not supporting browsers.
I'm guessing you need something like the following for it to look like the second image...
html:
<div id="content"></div>
<ul id="contentList">
<li>Text</li>
<li>Text</li>
...
</ul>
css:
#content {width:740px; height:420px}
#contentList {margin:10px 0; overflow:hidden}
#contentList li {min-width:220px; float:left; list-style:none}