Foundation insert progress bar into top-bar - html

I use the framework Foundation 5, i use the top bar and i want to insert into the top-bar a simple progress bar
The only problem is the progross bar is not horizontal but vertically. It's really strange, i don't know how to correct that.
jsfiddle
<nav class="top-bar" data-topbar="">
<!-- Title -->
<ul class="title-area">
<li class="name"><h1>Sexy Top Bar</h1></li>
<!-- Mobile Menu Toggle -->
<li class="toggle-topbar menu-icon"><span>Menu</span></li>
</ul>
<!-- Top Bar Section -->
<section class="top-bar-section">
<!-- Top Bar Right Nav Elements -->
<ul class="right">
<!-- progess bar bug -->
<li>
<div class="progress">
<span class="meter"></span>
</div>
</li>
<li class="divider"></li>
<!-- Anchor -->
<li>Generic Button</li>
<li class="divider"></li>
<!-- Button -->
<li class="has-form show-for-large-up">
Get Lucky
</li>
</ul>
</section></nav>

It's not vertical, it's just doesn't have width.
fix:
div.progress{
width: 500px;
}

Related

Positioning a header bar next to a sidebar

I'm using bootstrap and want to add a header bar to the right of the sidebar, so it aligns next to it, without sitting on top. The sidebar is also collapsible, so the header would have to extend to the whole page once the sidebar is collapsed.
Sidebar code:
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand">
<a href="#">
Start Bootstrap
</a>
</li>
<li>
Dashboard
</li>
<li>
Shortcuts
</li>
<li>
Overview
</li>
<li>
Events
</li>
<li>
About
</li>
<li>
Services
</li>
<li>
Contact
</li>
</ul>
</div>
<!-- /#sidebar-wrapper -->
Did it with the default navbar by positioning it within the wrapper, but below the side-bar nav div, no extra positioning needed.
Seeing as you're already using bootstrap, why don't you add the already built column classes to your markup. Be sure you have Bootstrap CSS included.
<div id="sidebar-wrapper" class="col-lg-3">
Then on your Header...
<div id="header-wrapper" class="col-lg-9">
Also just did a pen found here
It would be a good idea to take advantage of the column classes as it make responsive design easier.

Zurb foundation drop down menu not works

I am starting to learn ember and try to incorporate some navigation bar using zurb foundation framework. I have a problem with dropdown menu. Check this link
<ul class="title-area">
<li class="name">
<h1>Home</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">
<ul class="left">
<li class="has-dropdown">
{{#linkTo "about"}}About{{/linkTo}}
<ul class="vertical dropdown menu" data-dropdown-menu>
<li click>{{#linkTo "about.team"}}Team{{/linkTo}}</li>
</ul>
</li>
<li click>{{#linkTo "about.team"}}About/Team again{{/linkTo}}</li>
<li>{{#linkTo "contact"}}Contact{{/linkTo}}</li>
</ul>
</section>
I can not achive to trigger route when clicking on About/Team. When clicking on "About/Team again" then route works.
Any idea why this happens?

Foundation: Problems combining responsive top-bar and tab-bar Menus

I am trying to create a new site template based on Zurb's Foundation 5 that has two menus - a top menu and a left menu. That is working for medium and large sizes, but for 'small' I'm trying to hide the top menu with a top-right "hamburger", and then the left menu to work in a similar manner but from the top-left. This is what it looks like at the moment:
The top right works fine, except only the 'hamburger' menu-icon is clickable. The "MENU" text next to it, is not.
The top left has a couple of problems. Only the text that I add appears and is clickable ("TOG" here). The menu-icon does not appear. I guess I could replace "TOG" with "PAGES" as a workaround.
Second, when I click on it to open the menu, it pushes the top bar down one row to cover the title and leaving a white space at the top. Ie.:
Here's my code (very much work in progress - logos will be replaced with images, etc):
<div class="off-canvas-wrap" data-offcanvas>
<div class="inner-wrap">
<div class="fixed">
<nav class="top-bar " data-topbar role="navigation">
<section class="left-small hide-for-medium-up">
<a class="left-off-canvas-toggle menu-icon" href="#"><span>TOG</span></a>
</section>
<section class="middle tab-bar-section hide-for-medium-up">
<h1>LOGO</h1>
</section>
<ul class="title-area">
<li class="name">
<h1 class="hide-for-small">Logo</h1>
</li>
<li class="toggle-topbar menu-icon"><span>Menu</span></li>
</ul>
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right">
<li>Search</li>
<li>Facebook</li>
<li>Twitter</li>
</ul>
<!-- Left Nav Section -->
<ul class="left">
<li>Articles</li>
<li>Constituents</li>
<li>Engineers</li>
<li>Shipping</li>
<li>Locomotives</li>
<li>Rolling Stock</li>
<li>References</li>
<li>Forums</li>
</ul>
</section>
</nav>
</div>
<!-- Off Canvas Menu -->
<aside class="left-off-canvas-menu">
<ul class="off-canvas-list">
<li><label>LNER</label></li>
<li>Gresley</li>
<li>Thompson</li>
<li>Peppercorn</li>
</ul>
</aside>
<section class="main-section">
<div class="row">
<div class="large-2 medium-3 columns">
<div class="hide-for-small">
<div class="sidebar">
<nav>
<ul class="side-nav">
<li><label>LNER</label></li>
<li><a class="active" href="gresley.shtml">Gresley</a></li>
<li>Thompson</li>
<li>Peppercorn</li>
<li class="divider"></li>
</ul>
</nav>
</div>
</div>
</div>
<!-- Main body content starts here -->
<div class="large-10 medium-9 columns">
<h1>Sir Nigel Gresley</h1>
Does anyone have any thoughts as to what is causing my problems?
As far as i do understand you're trying to use Foundation's Off-canvas (menus) in a manner it is not intended.
It seems you are looking for a mobile menu which can be toggled.
Off-canvas (menus) are a layout structure. When the menu shows up the complete layout moves to the left / right. For that reason you content should be wrapped in the Off-canvas (menus) structure:
From http://foundation.zurb.com/docs/components/offcanvas.html:
<div class="off-canvas-wrap" data-offcanvas>
<div class="inner-wrap">
<a class="left-off-canvas-toggle" href="#" >Menu</a>
<!-- Off Canvas Menu -->
<aside class="left-off-canvas-menu">
<!-- whatever you want goes here -->
<ul>
<li>Item 1</li>
...
</ul>
</aside>
<!-- main content goes here -->
<!-- close the off-canvas menu -->
<a class="exit-off-canvas"></a>
</div>
</div>
See the <!-- main content goes here --> in the above. You can try to rebuild your example as follows:
<!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</title>
<link rel="stylesheet" href="css/app.css" />
<script src="bower_components/modernizr/modernizr.js"></script>
</head>
<body>
<div class="off-canvas-wrap" data-offcanvas>
<div class="inner-wrap">
<div class="fixed">
<nav class="top-bar " data-topbar role="navigation">
<section class="left-small hide-for-medium-up">
<a class="left-off-canvas-toggle menu-icon" href="#"><span>TOG</span></a>
</section>
<section class="middle tab-bar-section hide-for-medium-up">
<h1>LOGO</h1>
</section>
<ul class="title-area">
<li class="name">
<h1 class="hide-for-small">Logo</h1>
</li>
<li class="toggle-topbar menu-icon"><span>Menu</span></li>
</ul>
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right">
<li>Search</li>
<li>Facebook</li>
<li>Twitter</li>
</ul>
<!-- Left Nav Section -->
<ul class="left">
<li>Articles</li>
<li>Constituents</li>
<li>Engineers</li>
<li>Shipping</li>
<li>Locomotives</li>
<li>Rolling Stock</li>
<li>References</li>
<li>Forums</li>
</ul>
</section>
</nav>
</div>
<div class="off-canvas-wrap" data-offcanvas>
<div class="inner-wrap">
<a class="left-off-canvas-toggle hide-for-medium-up" href="#" >Menu</a>
<!-- Off Canvas Menu -->
<aside class="left-off-canvas-menu hide-for-medium-up">
<!-- whatever you want goes here -->
<ul class="off-canvas-list">
<li><label>LNER</label></li>
<li>Gresley</li>
<li>Thompson</li>
<li>Peppercorn</li>
</ul>
</aside>
<!-- main content goes here -->
<section class="main-section">
<div class="row">
<div class="large-2 medium-3 columns">
<div class="hide-for-small">
<div class="sidebar">
<nav>
<ul class="side-nav">
<li><label>LNER</label></li>
<li><a class="active" href="gresley.shtml">Gresley</a></li>
<li>Thompson</li>
<li>Peppercorn</li>
<li class="divider"></li>
</ul>
</nav>
</div>
</div>
</div>
<!-- Main body content starts here -->
<div class="large-10 medium-9 columns">
<h1>Sir Nigel Gresley</h1>
</div>
<!-- close the off-canvas menu -->
<a class="exit-off-canvas"></a>
</div>
</div>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/foundation/js/foundation.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
Possible also how to make bootstrap off canvas nav overlap content instead of move it will help you further.

text on top of image from bootstrap nav-pills

I am using nav-pills from bootstrap 3 to display my image banner on the corresponding tab. I want to have an unordered list on the "#contact-us" (Corporate, americas/caribbean, africa/middle east, europe, asia/australia) on top of the banner image and have both the text and image to be responsive. I can get the list on top of the image, but once I shrink the browser the list would run out of the banner image.
What do I need to do in my css so that my text would stay within the banner even when i am shrinking the image?
Below is my html.
Thanks in advance!
<div class="banner-tabs">
<div class="container">
<ul class="nav nav-pills tab-titles" id="pills-first">
<li>About Us</li>
<li>Careers</li>
<li class="active">Contact Us</li>
</ul> <!-- nav nav-pills -->
</div> <!-- container -->
<!-- Content -->
<div class="tab-content">
<div class="tab-pane" id="about-us">
<img src="../images/delete-1.png" class="tab-banner" />
</div> <!-- about us -->
<div class="tab-pane" id="careers">
<img src="../images/delete-2.png" class="tab-banner" />
</div> <!-- careers -->
<div class="tab-pane active" id="contact-us">
<img src="../images/delete-1.png" class="tab-banner">
<div class="continents">
<p>Click to view:</p>
<ul>
<li id="corporate"><a>Corporate</a></li>
<li id="americas-caribbean"><a>Americas/Caribbean</a></li>
<li id="africa-middle-east"><a>Africa/Middle East</a></li>
<li id="europe"><a>Europe</a></li>
<li id="asia-australia"><a>Asia/Australia</a></li>
</ul>
</div> <!-- continents -->
</div>
</div> <!-- row -->
</div> <!-- corporate-content -->
perhaps you can provide something like a codepen example ?
Use this as a base : http://codepen.io/alogonzac/pen/vOKELp
<div class="banner-tabs">...</div>

Foundation 5: sticky Nav for Mobile

I have a simple one page site. Im using the "top-bar" wrapped in a "fixed" div, which works fine on every size but mobile. On mobile the nav is in fact fixed until the menu icon is clicked/tapped. then it opens the menu at the top of the page and nav is no longer fixed.
Here is my code:
<div class="fixed">
<nav class="top-bar" data-topbar>
<ul class="title-area">
<!-- Title Area -->
<li class="name">
<h1>
Page Title
</h1>
</li>
<li class="toggle-topbar menu-icon"></li>
</ul>
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right">
<li class="divider"></li>
<li>Process</li>
<li class="divider"></li>
<li>Bookshelf</li>
<li class="divider"></li>
<li>Brands</li>
<li class="divider"></li>
<li>Looking for</li>
<li class="divider"></li>
<li>Contact</li>
</ul>
</li>
</ul>
</section>
</nav>
</div>
Thanks in advance.