I've tried a few tricks to try and move the menu on the left, but none of the regular classes appears to be fit to toggle this option, especially on mobile devices (which is what I'm designing for).
Is there a mobile device CSS fix for this? (note I've already got "class='left'" on the menu area).
<nav class="top-bar" data-topbar role="navigation" data-options="is_hover: false">
<ul class="title-area">
<li class="toggle-topbar menu-icon"><span></span></li>
<li class="name">
<h1><img style="width: 150px;"src="yourmomslogo.png"></h1>
</li>
</ul>
<section class="top-bar-section">
<ul class="left">
<li class="active">Login</li>
<li>Your Cats</li>
</ul>
</section>
</nav>
Let see the doc
If you change left by right in this code
<ul class="left">
<li>Left Nav Button</li>
</ul>
You can see the link goes to the right, so the left class changes the position of the link (so the menu for you)
Related
I'm using the Foundation 5-Framework. I want to create a navigation with a panel under it. When im adding the panel, the navigationbar is always on top the panel.
This is my Code:
<div id="content">
<div class="row">
<div class="contain-to grid fixed">
<nav class="top-bar" data-topbar role="navigation">
<ul class="title-area">
<li class="name">
<h1>MySite</h1>
</li>
<li class="toggle-topbar menu-icon">
<span></span>
</li>
</ul>
<section class="top-bar-section">
<ul class="right">
<li class="active">
Index
</li>
<li>
Contact
</li>
<li>
About me
</li>
<li class="has-dropdown">
Sign up
<ul class="dropdown">
<li>
Log in
</li>
</ul>
</li>
</ul>
</section>
</nav>
</div>
</div>
<div class="row">
<div class="small-12 columns panel">
<p>This is a panel.</p>
</div>
</div>
</div>
</div>
You can either remove the class "fixed" from your third row (if you don't need a fixed positioned top bar),
or add margin-top to the second (panel) row (with the same height as the top-bar) if you wish to keep the top-bar fixed.
When an element is position fixed (like absolute and float) it is not actually on the page in the sense that static elements are not relative to it. so your panel was anchoring to the top of the page, because there was no block above it.
I am simplifying it a bit, but I hope that helps.
I'm trying to highlight navbar items that are active as shown below on Medium.com. I have added the zimme:iron-router-active package but I still am not reaching my desired effect. What's the easiest way to accomplish the bold highlighting and the bar on the bottom when the item is pressed?
This is what I have so far:
<div class="navSecondary">
<div class="menu" align="center">
<ul class="menu-items">
<li class="{{ isActiveRoute home }}"> HOME </li>
</ul>
</div>
</div>
Is there a better way to do this?
<nav>
<ul>
<li class="{{isActiveRoute regex='home'}}"> HOME </li>
</ul>
</nav>
I am having a problem with Foundation 5 where I am trying to get the columns in a row div to have collapsed gutters. More specifically, I am interested in collapsing the outer column gutters so that my nav bar and header div will line up nicely. I tried applying the .collapse class to the containing row div as well as to each column element, to no avail.
If anyone could help me figure out what I am missing, I would really appreciate it! Below is the code for the problem section of the page and a screen cap so you can see what I am trying to accomplish.
Ultimately I want to create a narrow vertical strip on either side of the page with a transitional gradient (blue to grey). If it is possible to do this in in the gutter, that would be a good solution to my problem as well. Thanks in advance!
<!-- Header Image and Left Side Nav Links -->
<div class="row collapse">
<div class="header-image">
<nav class="top-bar-z top-bar large-12 medium-12 small-12 columns" data-topbar role="navigation" data-options="is_hover:false">
<ul class="title-area">
<li class="name">
<h1>
Lacmhacarh
</h1>
</li>
<li class="toggle-topbar menu-icon"><span>menu</span></li>
</ul>
<!-- Right Side Nav Links -->
<section class="top-bar-section">
<ul class="right">
<li class="divider"></li>
<li class="has-dropdown">
Blog
<ul class="dropdown">
<li>Archive</li>
<li>Resources</li>
<li class="divider"></li>
<li>See all →</li>
</ul>
</li>
<li class="divider"></li>
<li class="has-dropdown">
Portfolio
<ul class="dropdown">
<li class="divider"></li>
<li>Résumé<i class="fi-play"></i></li>
<li>GitHub</li>
<li>LinkedIn</li>
<li>Twitter</li>
<li class="divider"></li>
<li><label>Special Projects</label></li>
<li>The Abh Nation</li>
<li>Something Cool Here</li>
</ul>
</li>
<li class="divider"></li>
<li>Contact</li>
<li class="divider"></li>
</ul>
</section>
</nav>
<!-- Header Foreground Image -->
<div class="large-4 columns">
<div class="header-logo-left">
</div>
</div>
<div class="large-4 columns">
<div class="header-logo-center">
</div>
</div>
<div class="large-4 columns">
<div class="header-logo-right">
</div>
</div>
</div>
</div>
After re-examining the code I figured out that the column gutters are not the problem causing the apparent offset in the right edge of the nav-bar. I had placed an extra divider after the "Contact" button, which was adding 10px of space.
Here is the original HTML for that part of the nav-bar:
<li class="divider"></li>
<li>Contact</li>
<li class="divider"></li>
And the new code:
<li class="divider"></li>
<li>Contact</li>
I believe that in order for .collapse to work, the .columns must be the first child div of the row.
<div class="row collapse">
<div class="large-12 columns"> <!--gets collapsed-->
Collapsed?
</div>
</div>
I want to put the menu-icon on the left hand side of the nav bar when it goes into mobile. For the life of me, I can't find any documentation how to do this. If tried putting the code in different place and using floats with custom CSS but can't get it to budge, is it possible?
Here is my code:
</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="left">
<li class="active">Home</li>
<li class="divider"></li>
<li class="active">Archives</li>
<li class="divider"></li>
<li class="active">Contact Us</li>
</ul>
</section>
add this to your css
.top-bar .toggle-topbar{
left:0px
}
Default css has right:0px
I added a simple <nav class="top-bar"> element to my page. It's displaying properly on computers, but on the iPhone I just get a solid black bar with no menu items. This is the top part of my nav.
<nav class="top-bar" style="">
<ul class="title-area">
<li class="name"></li>
</ul>
<section class="top-bar-section">
<ul class="left">
<li class="has-dropdown not-click">Orders
<ul class="dropdown"><li class="title back js-generated"><h5>« Back</h5></li>
<li class="">Create New</li>
</ul>
</li>
</ul>
</section>
</nav>
Just remove the height in your CSS:
.top-bar .name {
height: 45px;
}
Specifying a height was causing the <li> to render below <nav>, and since overflow:hidden was set, the <li> was not being displayed.