Zurb Foundation Framework: Fixed Icon Bar as Nav Bar - css
I have been able to position the icon bar how I want it, with the exception that it displaces the entirety of the page. What is there a class or something I could use to prevent this? Also, I have a footer as you might see, but it is not black as it is from the foundation website that I took the code from (yes I plan on editing this code, I am just in the learning phase right now).
My Code:
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Foundation | Welcome</title>
<link rel="stylesheet" href="css/foundation.css" />
<script src="js/vendor/modernizr.js"></script>
</head>
<body>
<nav class="top-bar" data-topbar role="navigation">
<ul class="title-area">
<li class="name">
<h1>My Site</h1>
</li>
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
<li class="toggle-topbar menu-icon"><span>Menu</span></li>
</ul>
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right">
<li class="active">Right Button Active</li>
<li class="has-dropdown">
Right Button Dropdown
<ul class="dropdown">
<li>First link in dropdown</li>
<li class="active">Active link in dropdown</li>
</ul>
</li>
</ul>
<!-- Left Nav Section -->
<ul class="left">
<li>Left Nav Button</li>
</ul>
</section>
</nav>
<div class="row">
<div class="large-12 columns">
<h1>Welcome to Foundation</h1>
</div>
</div>
<ul class="off-canvas-list">
<ul class="side-nav">
<div class="icon-bar vertical five-up" role="navigation">
<a class="item">
<img src="../assets/img/images/fi-home.svg" >
<label>Home</label>
</a>
<a class="item">
<img src="../assets/img/images/fi-bookmark.svg" >
<label>Bookmark</label>
</a>
<a class="item">
<img src="../assets/img/images/fi-info.svg" >
<label>Info</label>
</a>
<a class="item">
<img src="../assets/img/images/fi-mail.svg" >
<label>Mail</label>
</a>
<a class="item">
<img src="../assets/img/images/fi-like.svg" >
<label>Like</label>
</a>
</div>
</ul>
</ul>
<div class="zurb-footer-bottom">
<div class="row">
<div class="medium-4 medium-4 push-8 columns">
<ul class="home-social">
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="medium-8 medium-8 pull-4 columns">
<ul class="zurb-links">
<li>About</li>
<li>Blog</li>
<li>News<span class="show-for-medium-up"> & Events</span></li>
<li>Contact</li>
<li>Sitemap</li>
</ul>
<p class="copyright">© 1998–2014 ZURB, Inc. All rights reserved.</p>
</div>
</div>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
.zurb-links li{
display:inline;
}
.sideBar{
height:100%;
position:fixed !important; /* added !important just for the snippet to work. not needed for live production..
}
<link href="http://cdn.jsdelivr.net/foundation/5.4.3/css/foundation.css" rel="stylesheet"/>
<nav class="top-bar" data-topbar role="navigation">
<ul class="title-area">
<li class="name">
<h1>My Site</h1>
</li>
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
<li class="toggle-topbar menu-icon"><span>Menu</span></li>
</ul>
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right">
<li class="active">Right Button Active</li>
<li class="has-dropdown">
Right Button Dropdown
<ul class="dropdown">
<li>First link in dropdown</li>
<li class="active">Active link in dropdown</li>
</ul>
</li>
</ul>
<!-- Left Nav Section -->
<ul class="left">
<li>Left Nav Button</li>
</ul>
</section>
</nav>
<div class="row ">
<div class="large-12 columns">
<h1>Welcome to Foundation</h1>
</div>
</div>
<div class="row ">
<div class="small-4 medium-2 columns sideBar">
<ul class="side-nav">
<div class="icon-bar vertical five-up" role="navigation"> <a class="item">
<img src="../assets/img/images/fi-home.svg" >
<label>Home</label>
</a>
<a class="item">
<img src="../assets/img/images/fi-bookmark.svg" >
<label>Bookmark</label>
</a>
<a class="item">
<img src="../assets/img/images/fi-info.svg" >
<label>Info</label>
</a>
<a class="item">
<img src="../assets/img/images/fi-mail.svg" >
<label>Mail</label>
</a>
<a class="item">
<img src="../assets/img/images/fi-like.svg" >
<label>Like</label>
</a>
</div>
</ul>
</div>
<div class="small-8 medium-10 small-push-4 medium-push-2 columns">
<p>I have been able to position the icon bar how I want it, with the exception that it displaces the entirety of the page. What is there a class or something I could use to prevent this? Also, I have a footer as you might see, but it is not black as it is from the foundation website that I took the code from (yes I plan on editing this code, I am just in the learning phase right now).I have been able to position the icon bar how I want it, with the exception that it displaces the entirety of the page. What is there a class or something I could use to prevent this? Also, I have a footer as you might see, but it is not black as it is from the foundation website that I took the code from (yes I plan on editing this code, I am just in the learning phase right now).I have been able to position the icon bar how I want it, with the exception that it displaces the entirety of the page. What is there a class or something I could use to prevent this? Also, I have a footer as you might see, but it is not black as it is from the foundation website that I took the code from (yes I plan on editing this code, I am just in the learning phase right now).I have been able to position the icon bar how I want it, with the exception that it displaces the entirety of the page. What is there a class or something I could use to prevent this? Also, I have a footer as you might see, but it is not black as it is from the foundation website that I took the code from (yes I plan on editing this code, I am just in the learning phase right now).I have been able to position the icon bar how I want it, with the exception that it displaces the entirety of the page. What is there a class or something I could use to prevent this? Also, I have a footer as you might see, but it is not black as it is from the foundation website that I took the code from (yes I plan on editing this code, I am just in the learning phase right now).I have been able to position the icon bar how I want it, with the exception that it displaces the entirety of the page. What is there a class or something I could use to prevent this? Also, I have a footer as you might see, but it is not black as it is from the foundation website that I took the code from (yes I plan on editing this code, I am just in the learning phase right now).</p>
<div class="zurb-footer-bottom">
<div class="row">
<div class="medium-4 medium-4 push-8 columns">
<ul class="home-social">
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="medium-8 medium-8 pull-4 columns">
<ul class="zurb-links">
<li>About</li>
<li>Blog</li>
<li>News<span class="show-for-medium-up"> & Events</span></li>
<li>Contact</li>
<li>Sitemap</li>
</ul>
<p class="copyright">© 1998–2014 ZURB, Inc. All rights reserved.</p>
</div>
</div>
</div>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/foundation/5.4.1/js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
Fiddle.
If you want to fix your side bar in your web page you have to go with position:fixed.
The problem that one faces by doing this is that rest of the columns are relatively positioned -they go under the side-bar or on top of it(including the footer if you span to 100% width).
In the fiddle i gave a span of small-4 and medium-2 columns for side-bar , small-8 and medium-10 small-push-4 medium-2-push columns for content and nested footer in to this.
As the side-bar has position:fixed the content column(position:relative) stacks underneath it so i push the columns based on the span of side-bar.
<div class="row ">
<div class="small-4 medium-2 columns sideBar">
<ul class="side-nav">
....
..
</ul>
</div>
<div class="small-8 medium-10 small-push-4 medium-push-2 columns">
<p>Your content</p>
.....
...
<div class="zurb-footer-bottom">
....
..
</div>
</div>
</div>
I had a similar problem. Here is my solution:
HTML-Code:
<body>
<!-- Header content "top-bar" ... -->
<div class="icon-bar vertical side_fixed hide-for-small-only">
<a class="item">
<label>Menuitem 1</label>
</a>
<a class="item">
<label>Menuitem 2</label>
</a>
<a class="item">
<label>Menuitem 3</label>
</a>
</div>
<div class="admin_content">
<!-- Main-Content "row" "column" ... -->
<!-- footer -->
</div>
<!-- scripts -->
</body>
SCSS-Code: (CSS similar)
#media #{$medium-up} {
.side_fixed {
left: 0;
top: $topbar-height;
bottom: 0;
position: fixed;
width: 8rem;
max-width: 8rem;
overflow-x: hidden;
}
.admin_content {
margin-left: 9rem;
}
}
Related
Ignore div class align for navigation
I am trying to create a navigation menu at the top, on top of my full screen background image, the problem is that the way I did it below, will cause the 100vh section to move down so the bottom of the picture will not be visible, I tried to add the navigation in the <div class="section valign-wrapper" id="home"> but this causes the nav to align vertically on the page so it won't be on top anymore, my question is: how can I put the navigation at the top of the page without moving the section down? <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css"> <nav> <div class="nav-wrapper"> Logo <i class="material-icons">menu</i> <ul class="right hide-on-med-and-down"> <li>Sass</li> <li>Components</li> <li>Javascript</li> <li>Mobile</li> </ul> </div> </nav> <!--Landing page--> <div class="section valign-wrapper" id="home"> <div class="container"> <h1 class="big-title"> Mijn naam is <br> Dan <br> en ik bouw websites en <br> applicaties. </h1> </div> </div>
Fixed by adding the nav in the vertical aligned section and added:
nav {
position: absolute;
top: 0;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css"> <div class="navbar-fixed"> <nav> <div class="nav-wrapper"> Logo <i class="material-icons">menu</i> <ul class="right hide-on-med-and-down"> <li>Sass</li> <li>Components</li> <li>Javascript</li> <li>Mobile</li> </ul> </div> </nav> </div> <!--Landing page--> <div class="section valign-wrapper" id="home"> <div class="container"> <h1 class="big-title"> Mijn naam is <br> Dan <br> en ik bouw websites en <br> applicaties. </h1> </div> </div> with materizlize.css you can try wrapping your nav in a div and use class navbar-fixed for the div < div class="navbar-fixed"> to make it permanently stay at top style the div as < div class="navbar-fixed" style="top:0px;position:fixed;">
Multiple bootstrap tabs - vertical & horizontal
In an AngularJS+Bootstrap project, I'm trying to create a vertical nav menu/tabs on the left, while the content of one of the tabs should have its own tabs (secondary tabs), horizontal. My problems: 1. The secondary tabs' contents are displayed outside the desired location 2. Navigation in the secondary tabs doesn't work. You can check out my code here: http://www.bootply.com/vhArvv1N5V The main nav bar (vertical) works fine (as demonstrated at: http://www.bootply.com/74926)
To solve the first problem you need to float that first navigation left. I resolved this by using Bootstrap's col-md-2 and col-md-10 around the navigation and the tab content, plus the obligatory row and container-fluid for layout. To solve the second problem, you missed out some of the data-toggle="tab" and .tab-pane on the second set of tabs. I also changed your first nav from .nav-tabs to just .nav. Nav tabs rounds the corners etc, not really needed here. Plus I removed almost all of your CSS and relied more on Bootstrap. <div class="container-fluid"> <div class="row"> <!-- Nav left --> <ul class="nav col-md-2" id="leftTabs"> <li class="active"> <a href="#a_tab" data-toggle="tab"> <span></span>ItemA </a> </li> <li> <a href="#b_tab" data-toggle="tab"> <span></span>ItemB </a> </li> <li> <a href="#c_tab" data-toggle="tab"> <span></span>ItemC - TABS! </a> </li> </ul> <!-- Nav content --> <div class="tab-content col-md-10"> <div class="tab-pane active" id="a_tab"> <h1>Content of A</h1> </div> <div class="tab-pane" id="b_tab"> <h1>Content of B</h1> </div> <div class="tab-pane" id="c_tab"> <!-- Nav tabs --> <ul class="nav nav-tabs"> <li class="active">First</li> <li>Second</li> <li>Third</li> </ul> <!-- Nav tabs content --> <div class="tab-content"> <div id="first" class="tab-pane active">Content of first</div> <div id="second" class="tab-pane">Content of second</div> <div id="third" class="tab-pane">Content of third</div> </div> </div> </div> </div> </div> DEMO
Bootstrap - Divs in a row are causing shift/jump effect
I have a page developed using twitter bootstrap version 2. I have a row that is divided into span8 and span4. Span8 has some image slider (built with jquery) and span4 has just some links. When the page loads, all the links in the span 4 is displayed first and then when the image loads, the text gets pushed to right. Is there a way to prevent this shift/jump effect? <div class="row-fluid"> <div class="span8" id="imgDiv"> <!-- Image slider goes here --> </div> <div class="span4" id="linksDiv"> <ul> <li>link1</li> <li>link2</li> <li>link3</li> </ul> </div> </div>
I have devised the following solution. Here's a JSFiddle: http://jsfiddle.net/sJq6y/
HTML
<div class="container">
<div class="row-fluid">
<div class="span8">
<div class="imgDiv">
<h1> Image slider goes here </h1>
</div>
</div>
<div class="span4 linksDiv">
<ul>
<li>Link One
</li>
<li>Link Two
</li>
<li>Link Duo
</li>
</ul>
</div>
</div>
</div>
CSS
.linksDiv ul {
list-style:none;
background-color:lightgrey;
width:90px;
height:90px;
padding:10px;
}
.imgDiv h1 {
text-align:center;
color:tomato;
}
Images
Probably due to styling coming from #imgDiv and #linksDiv. Would this option work for you? <div class="row-fluid"> <div class="span8"> <div id="imgDiv"> <!-- Image slider goes here --> </div> <!-- end #imgDiv --> </div> <div class="span4"> <div id="linksDiv"> <ul> <li>link1</li> <li>link2</li> <li>link3</li> </ul> </div> <!-- end #linksDiv --> </div> </div> Good luck!
Bootstrap span's erroneously centered
I'm laying out a navbar and it's coming out all wrong. I want to have a left and right component so I'm using two span6's. But I'm finding that the first span6 is centered on its own line. Chrome's dev tools show the centered div as having the correct dimensions and 20px left-margin -- it's just centered. As if the container is center it? Here's the HTML for the navigation view: <div id="group_and_date_controls" class="container"> <div class="row"> <div id="group_control" class="span12"> <ul> <span id="new_group">New Group</span> <li class="controlItem">hi</li> <li class="controlItem">hi</li> </ul> </div> <div id="date_control" class="span6 navbar pull-right"> <ul id="thing" class="nav pull-right"> <li>Jun 12th</li> <li>Today, Jun 13th</li> <li>Jun 14th</li> </ul> </div> </div> </div>
"I want to have a left and right component so I'm using two span6's." ...Except if your code is the same as the code you posted in your question, you are using one span12, and then one span6. Here's a version that uses two span6 classes. http://jsfiddle.net/FtPZf/ <div id="group_and_date_controls" class="container"> <div class="row"> <div id="group_control" class="span6"> <ul> <span id="new_group">New Group</span> <li class="controlItem">hi</li> <li class="controlItem">hi</li> </ul> </div> <div id="date_control" class="span6 navbar pull-right"> <ul id="thing" class="nav pull-right"> <li>Jun 12th</li> <li>Today, Jun 13th</li> <li>Jun 14th</li> </ul> </div> </div> </div>
Twitter Bootstrap - full width navbar
Following the example of TB, I have a navbar that is marked up as follows: <div class="container"> <div class="navbar"> <div class="navbar-inner"> <!-- nav bar items here --> </div> </div> </div> I'd like this to span the full width of the screen and not have any rounded corners -- similar to static top styling of the navbar. I can't seem to find how to do this in TB. If there isn't a way, what CSS would I need to override TB and not break responsiveness?
Just change the class container to container-fullwidth like this : <div class="container-fullwidth">
Not sure if the navbar-static-top class was available prior to version 2.2.2 but I think you can accomplish your goal with the following: <div class="navbar navbar-static-top"> <div class="navbar-inner"> <ul class="nav"> <li class="active">Test1</li> <li>Test2</li> <li>Test3</li> <li>Test4</li> <li>Test5</li> </ul> </div> </div> <div class="container"> ... </div> I put together a jsFiddle as an example.
Put the navbar out of your container: <div class="navbar"> <div class="navbar-inner"> <!-- nav bar items here --> </div> </div> <div class="container"> </div> EDIT: Here is one that I did with responsive navbar. The code fits the document body: <div class="navbar navbar-fixed-top"> <div class="navbar-inner"> <div class="container"> <!-- .btn-navbar is used as the toggle for collapsed navbar content --> <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a> <!-- Be sure to leave the brand out there if you want it shown --> <a class="brand" href="#">Project name</a> <!-- Everything you want hidden at 940px or less, place within here --> <div class="nav-collapse"> <!-- .nav, .navbar-search, .navbar-form, etc --> <ul class="nav"> <li class="active">Home</li> <li class="divider-vertical"></li> <li>Link</li> <li class="divider-vertical"></li> <li>Link</li> </ul> <ul class="nav pull-right"> <li>Log out</li> </ul> </div> </div> </div> </div> <div class="container"> <div class="row"> <div class="span12"> </div> </div> </div> <!-- end container --> <script type="text/javascript" src="/assets/js/jquery-1.8.2.min.js"></script> <script type="text/javascript" src="/assets/js/bootstrap.min.js"></script>
I'm very late to the party but this answer pulls up top in Google search results. Bootstrap 3 has an answer for this built in, set your container div in your navbar to container-fluid and it'll fall to screen width. Like so: <div class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="container-fluid"> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li>More Stuff</li> </ul> </div> </div> </div>
Put your <nav>element out from the <div class='container-fluid'>. Ex :- <nav> ......nav content goes here <nav> <div class="container-fluid"> <div> ........ other content goes here </div> </div>
You need to push the container down the navbar. Please find my working fiddle here http://jsfiddle.net/meetravi/aXCMW/1/ <header> <h2 class="title">Test</h2> </header> <div class="navbar"> <div class="navbar-inner"> <ul class="nav"> <li class="active">Test1</li> <li>Test2</li> <li>Test3</li> <li>Test4</li> <li>Test5</li> </ul> </div> </div> <div class="container"> </div>
Just replace <div class="container"> with <div class="container-fluid">, which is the container with no margins on both sides. I think this is the best solution because it avoids some useless overriding and makes use of built-in classes, it's clean.
You can override some css
body {
padding-left: 0px !important;
padding-right: 0px !important;
}
.navbar-inner {
border-radius: 0px !important;
}
The !important is needed just in case you link the bootstrap.css after your custom css.
And add your nav html out of a .container
To remove the border-radius on the corners add this style to your custom.css file
.navbar-inner{
-webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0;
}
I know I'm a bit late to the party, but I got around the issue by tweaking the CSS to have the width span 100%, and setting l/r margins to 0px;
#div_id
{
margin-left: 0px;
margin-right: 0px;
width: 100%;
}
You have to add col-md-12 to your inner-navbar. md is for desktop .you can choose other options from bootstrap's list of options . 12 in col-md-12 is for full width .If you want half-width you can use 6 instead of 12 .for e.g. col-md-6. Here is the solution to your question <div class="container"> <div class="navbar"> <div class="navbar-inner col-md-12"> <!-- nav bar items here --> </div> </div> </div>