In my foundation_and_overrides.scss, I have changed the topbar-breakpoint to a particular px width. I'd like to display the hamburger icon when the width is less than the breakpoint.
Right now it removes the menu and leaves it blank until I hit $small-range. I'm not sure where to edit within the foundation_and_overrides.scss to display the hamburger icon/menu when it hits the new breakpoint.
SCSS
$topbar-breakpoint: 1225px; // Change to 9999px for always mobile layout
$topbar-media-query: "only screen and (min-width: #{$topbar-breakpoint})" !default;
HTML
<div class="fixed header" style="border-bottom: 1px solid #000;">
<nav class="top-bar" data-topbar role="navigation">
<ul class="title-area">
<li class="name">
<h1><img src="/assets/logo.png" alt="" id="logo-image"></h1>
</li>
<li class="toggle-topbar menu-icon"><span>Menu</span></li>
</ul>
<section class="top-bar-section">
<ul class="left">
<li><a href='/programs'>Programs</li>
<li><a href='/projects'>Projects</li>
</ul>
</section>
</nav>
</div>
Related
Would really welcome some help with my navbar. I'm trying to achieve what I consider the most obvious setup. Dropdown menus on larger screens and drilldowns on smaller ones. I have a pen here but there are bullet marks that should not be there, and the menu opens horizontally (I want it vertically) on larger screens.
<div class="title-bar" data-responsive-toggle="nav-menu" data-hidefor="medium">
<button class="menu-icon" type="button" data-toggle></button>
<div class="title-bar-title player-controls">Brand
</div>
</div>
<div class="top-bar" id="nav-menu">
<div class="row">
<div class="top-bar-left show-for-medium">
Brand
</div>
<div class="top-bar-right">
<ul class="vertical medium-horizontal menu" data-responsive-menu="drilldown medium-dropdown">
<li class="has-submenu">
Item
<ul class="vertical submenu" data-submenu>
<li role="menuitem">Sub-Item</li>
<li role="menuitem">Sub-Item</li>
<li role="menuitem">Sub-Item</li>
<li role="menuitem">Sub-Item</li>
</ul>
</li>
<li class="">Item</li>
<li class="">Item</li>
<li class="">Item</li>
<li class="">Item</li>
</ul>
</div>
</div>
</div>
Not entirely sure about the vertical menu issue as the pen works fine for me. Regarding the errant bullet points, you are missing some essential classes. For the site title, you're using an li without the surrounding ul element. Add a ul with a class of menu around the title to fix that problem:
<ul class="menu">
<li class="menu-text">Site Title</li>
</ul>
The same menu class is missing for the sub menu:
<ul class="vertical submenu menu" data-submenu>
<li role="menuitem">Sub-Item</li>
<li role="menuitem">Sub-Item</li>
<li role="menuitem">Sub-Item</li>
<li role="menuitem">Sub-Item</li>
</ul>
Here's an updated Pen
I am having a bit of a problem with a form on a drop down in the foundation 5 framework.
Basically I am assigning an input field and button to a dropdown menu, which works fine.
But as I can't firstly see a Back button like I can on the first dropdown, I can't see any reasons why. When basic code is a replication.
After viewing the second dropdown and going back to the menu to view dropdown one the input field and button are visible...
Source code below:
CSS:
.has-form-small {
top: 0rem;
left: 0rem;
min-width: 15rem; }
#media only screen and (max-width: 40em) {
.has-form {
min-width: 10rem;
top: 0 rem; }
.has-form .button {
height: 3rem; } }
</style>
HTML:
Dropdown 1:
<section class='top-bar-section'>
<!-- Right Nav Section -->
<ul class='right'>
<li><a href='#'>Button</a></li>
<li class='has-dropdown'>
<a href='#'>Dropdown</a>
<ul class='dropdown'>
<li><a href='#'>link</a></li>
<li><a href='#'>link</a></li>
</ul>
</li>
</ul>
</section>
Dropdown 2:
<section class='top-bar-section'>
<!-- Right Nav Section-->
<strong class='show-for-small-only'>
<ul class='right'>
<li class='has-dropdown'>
<a href='#'>Dropdown2</a>
<ul class='dropdown'>
<li class='has-form-small'>
<div class='row collapse'>
<div class='large-9 small-9 columns'>
<input type='text' placeholder='Find Stuff'>
</div>
<div class='large-3 small-3 columns'>
<a href='#' class='alert button expand'>Search</a>
</div>
</div>
</li>
</ul>
</li>
</ul>
</strong>
</section>
Managed to fix in the end. Turns out a drop down menu option isn't needed.
Code as below:
CSS:
<style>
.has-form-small {
color: darkslategray;
position: absolute;
top: 0rem;
left: 0rem;
min-width: 26rem;
min-height: 2.7rem;}
#media only screen {
.has-form-small {
color: darkslategray;
min-width: 26rem;
min-height: 2.7rem;
top: 0rem; }
.has-form-small .button {
color: darkslategray;
width: 10rem;}}
</style>
HTML:
<nav class='top-bar' data-topbar role='navigation'>
<ul class='title-area'>
<li class='name'>
<h1><a href='#'>My Site</a></h1>
</li>
<strong class='hide-for-small-only'>
<li class='has-form'>
<div class='row collapse'>
<div class='large-9 small-9 columns'>
<input type='text' placeholder='Find Stuff'>
</div>
<div class='large-3 small-3 columns'>
<a href='#' class='alert button expand'>Search</a>
</div>
</div>
</li>
</strong>
<!-- 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'><a href='#'><span>Menu</span></a></li>
</ul>
<section class='top-bar-section'>
<!-- Right Nav Section -->
<ul class='right'>
<li><a> </a></li>
<li>
<strong class='show-for-small-only'>
<li class='has-form-small'>
<div class='large-12 small-9 columns'>
<input type='text' placeholder='Find Stuff'>
</div>
<div class='large-3 small-3 columns'>
<a href='#' class='alert button expand'>Search</a>
</div>
</li>
</strong>
</li>
</ul>
<ul class='right'>
<li><a href='#'>Button</a></li>
<li class='has-dropdown'>
<a href='#'>Dropdown</a>
<ul class='dropdown'>
<li><a href='#'>link</a></li>
<li><a href='#'>link</a></li>
</ul>
</li>
</ul>
<!-- Left Nav Section -->
<ul class='left'>
</ul>
</section>
</nav>
There may be better ways to do this (e.g. remove blank row with "&nspb") but I was having issues with background colours, and this is supposed to only be a demo site.
I have a top bar that contains a dropdown menu with links for the current user's account (e.g. Dashboard, Sign out, etc). Each menu item wraps a link that points to a relative URL.
Opening the menu works fine, but as soon as I click on an item, the menu closes and nothing happens.
I've looked for click and mousedown event handlers, but can't find anything that looks like it would be causing this.
Anyone have ideas about this?
Here's the relevant HTML code:
<div class="contain-to-grid nav-wrapper">
<nav data-topbar="data-topbar" role="navigation" class="top-bar">
<ul class="title-area">
<li class="name">
<h1>Site name</h1>
</li>
</ul>
<section data-hook="user-info" class="top-bar-section">
<ul class="right">
<li class="has-dropdown">
username
<ul class="dropdown">
<li>Dashboard</li>
<li>Sign out</li>
</ul>
</li>
</ul>
</section>
<section class="top-bar-section">
<ul class="right">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</section>
</nav>
</div>
And its fiddle: https://jsfiddle.net/a3qrhg5a/
You just probably forgot to include jQuery and initialize Foundation JS
For example:
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation/foundation.js"></script>
<script>
$(document).foundation();
</script>
And here is your fiddle. Fixed:
https://jsfiddle.net/bartholomej/nxgjqtw4/5/
Similar to this post
A Top Bar with 2 navigation rows - Zurb Foundation 5
and this example
http://jsfiddle.net/Ty3ZT/6/
I would like to have a search form on the right side with a longer search box (the default is so small). As the screen size is smaller I'd like the second section containing the search form to wrap under the first section so that the top bar becomes twice in height.
Here is how I'd like it to end up:
This is as close as I've gotten it. (unsure why the search input is not the same height as the button, they are on my local install)
http://jsfiddle.net/Ty3ZT/18/
<div class="fixed">
<nav class="top-bar hide-for-small expand" data-topbar>
<ul class="title-area">
<li class="name">
<h1>My Site</h1>
</li>
<li class="toggle-topbar menu-icon">Menu</li>
</ul>
<!--first row-->
<section class="top-bar-section">
<!-- Left Nav Section -->
<ul class="left">
<li class="has-dropdown"><a class="">Account</a>
<ul class="dropdown">
<li><a>Item 1</a></li>
<li><a>Item 2</a></li>
<li><a>Item 3</a></li>
</ul>
</li>
</ul>
</section>
<!--second row-->
<section class="top-bar-section">
<!-- Left Nav Section -->
<ul class="right">
<li class="has-form">
<div class="row collapse">
<div class="large-8 columns">
<input type="text" placeholder="Search here">
</div>
<div class="large-4 columns">
Search
</div>
</li>
</ul>
</section>
</nav>
</div>
How can I achieve this? Whenever I get the second section to wrap the search form is all messed up. button no longer inline.
I'm having problems with Zurb's foundation navigation (I'm new to this and I'm having a steep learning curve and I've hit a wall)
I would like to do a couple of things:
Have the "menu icon" on the left hand side when the topbar is being toggled.
I would like to have three sections when the topbar is being toggled (Title/Middle/Menu)
Any ideas or help would be greatly appreciated!
<nav class="top-bar">
<ul class="title-area">
<!-- Title Area -->
<li class="name"><h1>Title</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 class="divider"></li>
<li></li>
<li class="divider"></li>
<li class="has-dropdown">
<ul class="dropdown">
<li class="divider"></li>
<li class="divider"></li>
<li class="divider"></li>
<li class="divider"></li>
</ul>
</li>
<li class="divider"></li>
<li>Contact</li>
</ul>
</section>
Try with this code :
<nav class="top-bar" data-topbar>
<ul class="title-area">
<li class="name">
<h1>My Site</h1>
</li>
<li class="toggle-topbar menu-icon">Menu</li>
</ul>
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right">
<li class="has-dropdown">
Menu
<ul class="dropdown">
<li>First link in dropdown</li>
<li>Second link in dropdown</li>
</ul>
</li>
</ul>
</section>
</nav>
Go on : http://foundation.zurb.com/docs/components/topbar.html#