I want to create button like menu using navbar. I want to do this because it's collapsible interface for small devices.
I write this HTML markup:
<div class="container">
<nav class="navbar" style="background-color: transparent;">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar" style="background-color: black;">
<span class="icon-bar" style="background-color: white;"></span>
<span class="icon-bar" style="background-color: white;"></span>
<span class="icon-bar" style="background-color: white;"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
<li>Page 4</li>
</ul>
</div>
</div>
</nav>
</div>
and this styles:
nav ul {
width: 100%;
text-align:center;
}
nav ul li {
text-align: center;
width: 17%;
background-color: #dbd9d9;
margin: 10px;
}
but there is some problem:
this menu items isn't center in ul. How I can center all li in ul?
If I resize the window in some width this menu broke in 2 line. How I can fix this that my menu being 1 line for md an lg sizes?
Demo
Thanks
Using white-space: no-wrap will stop items wrapping within the ul
Bootstrap puts float: left on nav.li elements which we need to override
Change your css to this:
nav ul {
width: 100%;
text-align: center;
white-space:nowrap /* <-- changed */
}
nav ul li {
text-align: center;
width: 17%;
background-color: #dbd9d9;
/*padding: 10px;*/
margin: 10px;
display: inline-block !important; /* <-- changed */
float: none !important; /* <-- changed */
}
Have to use !important to override bootstrap
Updated bootply
With Changes in your HTML and removing width of li, I got this working as you wanted.
<ul class="row nav navbar-nav">
<li class="active col-xs-3 col-sm-2 col-ms-2 col-lg-2">Home</li>
<li class="col-xs-3 col-sm-2 col-ms-2 col-lg-2">Page 1</li>
<li class="col-xs-3 col-sm-2 col-ms-2 col-lg-2">Page 2</li>
<li class="col-xs-3 col-sm-2 col-ms-2 col-lg-2">Page 3</li>
<li class="col-xs-3 col-sm-2 col-ms-2 col-lg-2">Page 4</li>
</ul>
Here is a working Bootply
Dont worry about setting the width to the li manually, use the bootstrap inbuilt classes. Also the above HTML could be rewritten like below.
<li class="col-xs-3 col-sm-2">Page 1</li>
You dont have to specify col-ms-2 col-lg-2 because by default bootstrap framwework will carry forward styles to all the devices untill a specific rule for that device is given. Here the rule col-sm-2 will be carried out to md device and lg device. But its always good practice to be as detailed as possible.
Related
I have such a layout:
I would like that when one clicks the orange button, the sidebar shrinks and leaves only the icons visible. And for the mobile should totally shrink and when one clicks the button only the icons should be visible. The behaviour should be like this but I don't understand how to make it work.
For now I have my header:
<div class="navbar-header">
<a class="navbar-minimalize minimalize-styl-2 btn btn-primary " href="#menu-toggle" onclick="toggle()"><i class="fa fa-bars"></i></a>
<a class="navbar-brand" href="#">...</a>
</div>
But I don't know how to make it collapse when one clicks.. Thanks
In a rough way you could assign 2 classes (one for the icon, one for the relative text) for example, class "icon" and class "text", and on button click, toggle (hide and show) the element with the class "text". Then in a callback you could animate the resizing of the sidebar.
Edit2: Improved example
$('#togglebutton').click(function() {
if ($(window).width() > 500) { //your chosen mobile res
$('.text').toggle(300);
} else {
$('.menu').animate({
width: 'toggle'
}, 350);
}
});
.wrapper { width: 100% }
.menu {
background: #222;
float: left;
display: block;
}
.icon { max-width: 1em }
.menu ul {
list-style-type: none;
margin: 0;
padding: 0.2em 0.5em;
}
.menu li { margin: 0 }
.menu a, .menu a:visited {
color: white;
text-decoration: none;
}
.text {
display: inline;
margin: 0;
}
.content { display: block; }
button { margin: 1em; }
#media only screen and (max-width: 500px) {
.text {
display: none;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="menu">
<ul>
<li>
<a href="#">
<img class="icon" src="http://bit.do/iconUrl">
<p class="text">Text 1</p>
</a>
</li>
<li>
<a href="#">
<img class="icon" src="http://bit.do/iconUrl">
<p class="text">Text 2</p>
</a>
</li>
</ul>
</div>
<div class="content">
<button id="togglebutton">☰</button>
</div>
</div>
Hope it was useful to have a general idea of my suggestion.
Update 2019
Bootstrap 4
This is also possible in Bootstrap 4, but still requires extra CSS to handle the sidebar state.
https://www.codeply.com/p/e5IcpodgE2
Bootstrap 3
You can create an "off canvas" sidebar, and then use Bootstrap's responsive utility classes to toggle display of the icons.
<div class="wrapper">
<div class="row row-offcanvas row-offcanvas-left">
<!-- sidebar -->
<div class="column col-sm-3 col-xs-1 sidebar-offcanvas" id="sidebar">
<ul class="nav" id="menu">
<li><i class="glyphicon glyphicon-list-alt"></i> <span class="collapse in hidden-xs">Link 1</span></li>
<li><i class="glyphicon glyphicon-list"></i> <span class="collapse in hidden-xs">Stories</span></li>
<li><i class="glyphicon glyphicon-paperclip"></i> <span class="collapse in hidden-xs">Saved</span></li>
<li><i class="glyphicon glyphicon-refresh"></i> <span class="collapse in hidden-xs">Refresh</span></li>
</ul>
</div>
<!-- main right col -->
<div class="column col-sm-9 col-xs-11" id="main">
<i class="fa fa-navicon"></i>
<p>
content...
</p>
</div>
</div>
</div>
https://www.codeply.com/p/uunNOeQAqo
2 problems when trying to implement this:
Putting it in the body breaks the sticky nav.
Scroll bar on div.
If i try to do http://keithclark.co.uk/articles/pure-css-parallax-websites/ in a div. It causes a scrollbar in that div.
Trying to counter it by putting it in the body directly breaks the sticky nav (made using bootstrap).
Here is the pen http://codepen.io/dam0/pen/zviHr that I tried to do also. Similar concept.
I only need a parallax on a div. The different element speed type. Any help?
Here's the html structure i have. Please take a look. I already some put comments there.
I'm trying to make it Pure CSS as long as possible. But if it can't be done, help me with js.
EDIT: Added a Pen
http://codepen.io/anon/pen/qZVEgM
Adding the .parallax to the div i want to have a parallax effect causes it to have scrollbar. Putting the parallax class to the body will break the position:fixed of the sticky nav.
EDIT 2: Moved the pen code here
HTML:
<div class="parallax holder">
<div id="carousel" class="parallax__layer parallax__back carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel" data-slide-to="0" class="active"></li>
<li data-target="#carousel" data-slide-to="1"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="http://loremflickr.com/1920/1080/vegetable,healthy,plate" class="img-responsive center-block">
</div>
<div class="item">
<img src="http://loremflickr.com/1920/1080/vegetable,healthy,plate" class="img-responsive center-block">
</div>
</div>
</div>
<div id="headerCaption" class="parallax__layer parallax__layer--base">
<img src="http://healthyaxcess.ph/img/CaptionBg.png" id="curve" class="img-responsive center-block">
</div>
</div>
<div id="nav-wrapper">
<nav class="navbar navbar-inverse navbar-static-top" id="navbar-main">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false">
<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="http://healthyaxcess.ph/img/logo.png"></a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-shopping-cart"></i> Cart</li>
<li><i class="fa fa-user"></i> Sign Up/Login</li>
</ul>
<!-- Nav links -->
<div class="collapse navbar-collapse navbar-right" id="navbar-collapse">
<ul class="nav navbar-nav" id="nav-section">
<li class="current active">
First Section
</li>
<li>
Second Section
</li>
<li>
Third Section
</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Dropdown link 1</li>
<li>Dropdown link 2</li>
<li>Dropdown link 3</li>
</ul>
</li>
</ul>
</div><!-- End of navbar collapse -->
</div><!-- End of Container Fluid -->
</nav>
</div>
<div class="container main">
<div class="text-center" id="section-2">
<h1>Sample Title</h1>
<p>The sample title's description here.</p>
</div>
CSS:
.navbar-inverse {
background: #303030;
}
#navbar-main {
margin: 0;
}
/* To override the static-top */
#navbar-main.affix {
position: fixed;
top: 0;
width: 100%;
}
#media (min-width: 992px) {
#navbar-main .navbar-nav {
position: relative;
margin-top: 16px;
}
}
.main {
/* for example only */
min-height: 200px;
}
.navbar-brand {
padding: 0;
/* firefox bug fix */
height: 80px;
}
.navbar-brand>img {
height: 100%;
padding: 8px;
/* firefox bug fix */
width: auto;
position: relative;
}
#footerBox {
background-color: #303030;
color: #FAFAFA;
}
.holder {
display: none;
}
#headerCaption {
position: relative;
}
#headerCaption img {
z-index: 3;
position: absolute;
width: 100%;
}
.carousel {
position: relative;
}
.parallax {
perspective: 1px;
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
}
.parallax__layer {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.parallax__layer--base {
transform: translateZ(0);
}
.parallax__layer--back {
transform: translateZ(-1px);
}
JS:
$('#carousel img').on("load", function(){
$('body').scrollspy({ target: '#navbar-collapse' });
$('.holder').css('display', 'block');
$('#nav-wrapper').height($("#navbar-main").height());
$('#navbar-main').affix( { offset:{ top:$('#navbar-main').offset().top } } );
$('.carousel').carousel({pause: false});
})
This is a little funny that same code doesn't produce the same behavior.
http://jsfiddle.net/5n3ygvhe/
This is the jsfiddle code.
It is a good demo of spyscroll.
So I copy the codes into my local html file.
Here is my local html file. I am holding the file with appengine. I have checked that jquery, bootstrap.min.css and bootstrap.min.js is loaded correctly. And the version of jquery is 2.1.3 and bootstrap is 3.0.0.
I have tried other jsfiddle for spyscroll, exact same thing happens. Not working on local but working in jsfiddle.
When I scroll the page, the nav li doesn't reflect that and always stick to the last item.
<html>
<script src="bower_components/jquery/dist/jquery.js"></script>
<!-- <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css"> -->
<!-- <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script> -->
<link rel="stylesheet" href="bower_components/bootstrap.min.css">
<script src="bower_components/bootstrap.min.js"></script>
<style>
.group {
background: yellow;
width: 200px;
height: 500px;
}
.group .subgroup {
background: orange;
width: 150px;
height: 200px;
}
#sidebar.affix {
top: 20px;
}
/* sidebar */
.bs-docs-sidebar {
padding-left: 20px;
margin-top: 20px;
margin-bottom: 20px;
}
/* all links */
.bs-docs-sidebar .nav>li>a {
color: #999;
border-left: 2px solid transparent;
padding: 4px 20px;
font-size: 13px;
font-weight: 400;
}
/* nested links */
.bs-docs-sidebar .nav .nav>li>a {
padding-top: 1px;
padding-bottom: 1px;
padding-left: 30px;
font-size: 12px;
}
/* active & hover links */
.bs-docs-sidebar .nav>.active>a,
.bs-docs-sidebar .nav>li>a:hover,
.bs-docs-sidebar .nav>li>a:focus {
color: #563d7c;
text-decoration: none;
background-color: transparent;
border-left-color: #563d7c;
}
/* all active links */
.bs-docs-sidebar .nav>.active>a,
.bs-docs-sidebar .nav>.active:hover>a,
.bs-docs-sidebar .nav>.active:focus>a {
font-weight: 700;
}
/* nested active links */
.bs-docs-sidebar .nav .nav>.active>a,
.bs-docs-sidebar .nav .nav>.active:hover>a,
.bs-docs-sidebar .nav .nav>.active:focus>a {
font-weight: 500;
}
/* hide inactive nested list */
.bs-docs-sidebar .nav ul.nav {
display: none;
}
/* show active nested list */
.bs-docs-sidebar .nav>.active>ul.nav {
display: block;
}
</style>
<!-- Top Navbar -->
<body>
<div class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<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>
<a class="navbar-brand" href="#">
Bootstrap 3.0 Skeleton
</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
<div class="row">
<!--Nav Bar -->
<nav class="col-xs-3 bs-docs-sidebar">
<ul id="sidebar" class="nav nav-stacked">
<li>
Group A
<ul class="nav nav-stacked">
<li>Sub-Group 1</li>
<li>Sub-Group 2</li>
</ul>
</li>
<li>
Group B
<ul class="nav nav-stacked">
<li>Sub-Group 1</li>
<li>Sub-Group 2</li>
</ul>
</li>
<li>
Group C
<ul class="nav nav-stacked">
<li>Sub-Group 1</li>
<li>Sub-Group 2</li>
</ul>
</li>
</ul>
</nav>
<!--Main Content -->
<div class="col-xs-9">
<section id="GroupA" class="group">
<h3>Group A</h3>
<div id="GroupASub1" class="subgroup">
<h4>Group A Sub 1</h4>
</div>
<div id="GroupASub2" class="subgroup">
<h4>Group A Sub 2</h4>
</div>
</section>
<section id="GroupB" class="group">
<h3>Group B</h3>
<div id="GroupBSub1" class="subgroup">
<h4>Group B Sub 1</h4>
</div>
<div id="GroupBSub2" class="subgroup">
<h4>Group B Sub 2</h4>
</div>
</section>
<section id="GroupC" class="group">
<h3>Group C</h3>
<div id="GroupCSub1" class="subgroup">
<h4>Group C Sub 1</h4>
</div>
<div id="GroupCSub2" class="subgroup">
<h4>Group C Sub 2</h4>
</div>
</section>
</div>
</div>
</body>
<script>
$('body').scrollspy({
target: '.bs-docs-sidebar',
offset: 40
});
$("#sidebar").affix({
offset: {
top: 60
}
});
</script>
Add <!DOCTYPE html> on top of page.
And use $(function() {} wrapper for jQuery
Ive been trying to find out how to do this for a week and have been unable to do it. My html navbar looks like this.
<div class="maincontainer">
<!--Navbar-->
<div data-spy="affix" data-offset-top="60" data-offset-bottom="200">
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header" >
<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>
<a class="navbar-brand" href="#">Pixoweb</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>About</li>
<li class="dropdown">
Examples<b class="caret"></b>
<ul class="dropdown-menu">
<li>Example 1</li>
<li>Example 2</li>
<li>Example 3</li>
<li>Example 4</li>
</ul>
</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
Js
$('#myAffix').affix({
offset: {
top: 100,
bottom: function () {
return (this.bottom = $('.footer').outerHeight(true))
}
}
})
css
.affix {
position: fixed !important;
top: 0 !important;
width: 100% !important;
background-color: #957595 !important;
}
So far this has made it so that the navbar goes behind the the context and images. I would like it if someone can help me
Navbar has not gone behind the text/images, it has been 3d transformed by bootstrap affix so that it looks like it has gone behind. I assume that you want to change the background color of the navbar when it is pinned (affixed). You can use following CSS. Note: you don't need JavaScript.
.affix .navbar-default {
position: fixed !important;
top: 0 !important;
width: 100% !important;
background-color: #957595 !important;
}
.affix {
width: 100% !important;
}
I also struggled with my menu displaying behind my images, I fixed it by adding "z-index: 1;" to my nav class. eg:.navbar-inverse in the style sheet
.navbar-default {
background-color: #201f1f;
border-color: #f47d20;
border-bottom:#f47d20 5px solid;
padding-bottom:0px;
z-index: 1;
}
Is it possible to make Bootstrap change the navbar list from text to icons from the browser re-sizing instead of making it into a collapse drop down?
For example, make example 1 turn into example 2 just from the browser re-sizing.
Example 1:
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
Example 2:
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><span class="glyphicon glyphicon-home"></span></li>
<li><span class="glyphicon glyphicon-info-sign"></li>
<li><span class="glyphicon glyphicon-envelope"></li>
</ul>
Sure, add some css like this:
.nav .glyphicon {
display: none;
}
#media screen and (max-width: 300px){
.nav .text {
display: none;
}
.nav .glyphicon {
display: inline;
}
}
Then update your lis to have a span for both text and the icon:
<li>
<span class="text">Home</span><span class="glyphicon glyphicon-home"></span>
</li>
The #media styles specify that when the screen width is 300px or less, then hide the text and show the icon. The icon is hidden by default.
EDIT:
I've updated your fiddle to have the switch working. Here's what I did:
http://jsfiddle.net/cPa6b/
Removed the button in your navbar header
Removed the collapse styles on your navbar div
Added 2 new styles in the media query to counteract bootstrap's style (also changed the max-width to 768 to match bootstrap's default):
.navbar-header, .navbar-nav, .navbar-nav > li { float: left; }
.navbar-nav { margin: 5px; }
You may also consider customizing the #grid-float-breakpoint variable in bootstrap as mentioned here http://getbootstrap.com/components/#navbar