how is possible to make simple top menu in foundation 5? Is needed to use topbar or is there any other possibility? My actual code is:
<nav class="top-bar" data-topbar role="navigation">
<ul class="title-area">
<li class="name">
<h1>Site Name</h1>
</li>
<li class="toggle-topbar menu-icon"><span></span></li>
</ul>
<section class="top-bar-section">
<ul class="right">
<li class="active">Domov</li>
<li>Home</li>
<li>Menu item</li>
<li>Menu item</li>
<li>Menu item</li>
<li>Menu item</li>
<li>Contact</li>
</ul>
</section>
</nav>
But i have problem with mobile version. Navigation is broken and jumps under menu not collapse in simple button. Can someone tell me why? and how to fix it, or make more simple navigation? Thanks.
This is a standard foundation .top-bar navigation. Don't forget to include the necessary js files and initialize them as well.
<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>
Just add this
.top-bar {
overflow: visible;
}
DEMO
I think , instead of using topbar , you can use iconbar which will easily meet your requirement . UI will be same for mobile as well as for desktop version .
Check below link:
http://foundation.zurb.com/docs/components/icon-bar.html
Related
I'm migrating a website from Bootstrap 3.7 to Bootstrap 4. In my site, I have a banner across the top that looks like this:
+-----------------------------------------------------------+
| Item 1 Item 2 Item A Item B [note] |
+-----------------------------------------------------------+
The items in the left are dynamic. The items on the right are dynamic. The [note] piece shows occasionally. I had this working correctly with Bootstrap 3.7. However, when migrating to Bootstrap 4, the content is all left aligned. You can see the result in this Bootply. The code looks like this:
<nav class="navbar">
<div class="d-inline-flex" style="width:100%;">
<ul class="nav navbar-nav d-inline-flex">
<li class="nav-item">
<ul class="list-inline-mb-0">
<li class="list-inline-item">Item 1</li>
<li class="list-inline-item">Item 2</li>
</ul>
</li>
</ul>
<ul class="nav list-inline justify-content-end">
<li class="list-inline-item pt-0 pr-1 pb-0 pl-0">Aug.</li>
<li class="list-inline-item">29th</li>
</ul>
<div class="nav-item sub-nav-title float-md-right pr-0">[note]</div>
</div>
</nav>
I don't understand why the items are all left-aligned instead of filling the width of the page. What am I missing?
As explained here float won't work in the navbar since it's now flexbox. Use ml-auto to push the items to the right.
<nav class="navbar">
<div class="d-inline-flex" style="width:100%;">
<ul class="nav navbar-nav d-inline-flex">
<li class="nav-item">
<ul class="list-inline-mb-0">
<li class="list-inline-item">Item 1</li>
<li class="list-inline-item">Item 2</li>
</ul>
</li>
</ul>
<ul class="nav list-inline ml-auto">
<li class="list-inline-item pt-0 pr-1 pb-0 pl-0">Aug.</li>
<li class="list-inline-item">29th</li>
</ul>
<div class="nav-item sub-nav-title float-md-right pr-0">[note]</div>
</div>
</nav>
https://www.codeply.com/go/CGBAvf8r1q
Or, you can use mr-auto on the first nav.
Could you put your [note] item in with your second unordered list and and use justify-content-between in your wrapping div element? It would look something like this...
<nav class="navbar">
<div class="d-inline-flex justify-content-between" style="width:100%;">
<ul class="nav navbar-nav d-inline-flex">
<li class="nav-item">
<ul class="list-inline-mb-0">
<li class="list-inline-item">Item 1</li>
<li class="list-inline-item">Item 2</li>
</ul>
</li>
</ul>
<ul class="nav list-inline">
<li class="list-inline-item pt-0 pr-1 pb-0 pl-0">Aug.</li>
<li class="list-inline-item">29th</li>
<li class="list-inline-item">[note]</li>
</ul>
</div>
</nav>
I am using Foundation 5 (latest, as of time of writing: v5.5.3)
I have set up top-bar menu with some icons for each element.
Basically: top-bar menu works fine unless page width
is more than [640px] and less than [828px]!
I created a screenshot to better illustrate the problem:
screenshot of broken top-bar menu
I prepared a Fiddle illustrating my problem.
(https://jsfiddle.net/sLk0jf4L/146/)
Top-Bar HTML:
<div class="contain-to-grid">
<nav class="top-bar" data-topbar role="navigation" data-options="'Back'">
<ul class="title-area">
<li class="name">
<h1>My super homepage</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">
<!-- Left Nav Section -->
<ul class="left">
<li class="active">
<a class="link-item-exclusive" href="#"><span class="lnr lnr-star menu-item"></span> Exclusive goods</a>
</li>
<li class="">
<a class="link-item-new" href="#"><span class="lnr lnr-download menu-item"></span> New arrivals</a>
</li>
<li class="">
<a class="link-item-about" href="#"><span class="lnr lnr-warning menu-item"></span> About</a>
</li>
</ul>
<!-- Right Nav Section -->
<ul class="right">
<li class="has-dropdown">
<a class="link-item-flag" href="#"><span class="lnr lnr-flag menu-item"></span> Choose language</a>
<ul class="dropdown">
<li>Language 1</li>
<li class="active">Language 2</li>
<li>Language 3</li>
</ul>
</li>
</ul>
</section>
</nav>
</div>
Additional CSS to position icons
span.menu-item
{
font-size:1.25rem;
font-weight:500;
line-height:1.25rem;
}
a.link-item-new span.menu-item,
a.link-item-exclusive span.menu-item
{
position:relative;
top:0.1rem;
}
a.link-item-about span.menu-item
{
position:relative;
top:0.15rem;
}
a.link-item-flag span.menu-item
{
position:relative;
top:0.2rem;
}
What CSS rules I need to apply to remove this breakage?
It would be fine if menu just showed up as hamburger
icon instead of braking up.
Thank you for your time and knowledge.
I've made a slight modification to your html in that I've added a span around the "Choose language" text with a class of .lang-text so I can manipulate the content using #media queries.
The idea is that when the viewport size reaches the breaking point, only the "Choose language" text is hidden, retaining the flag icon (and the dropdown options with it).
Html:
<div class="contain-to-grid">
<nav class="top-bar" data-topbar role="navigation" data-options="'Back'">
<ul class="title-area">
<li class="name">
<h1>My super homepage</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">
<!-- Left Nav Section -->
<ul class="left">
<li class="active">
<a class="link-item-exclusive" href="#"><span class="lnr lnr-star menu-item"></span> Exclusive goods</a>
</li>
<li class="">
<a class="link-item-new" href="#"><span class="lnr lnr-download menu-item"></span> New arrivals</a>
</li>
<li class="">
<a class="link-item-about" href="#"><span class="lnr lnr-warning menu-item"></span> About</a>
</li>
</ul>
<!-- Right Nav Section -->
<ul class="right">
<li class="has-dropdown">
<a class="link-item-flag" href="#"><span class="lnr lnr-flag menu-item"></span><span class="lang-text"> Choose language</span></a>
<ul class="dropdown">
<li>Language 1</li>
<li class="active">Language 2</li>
<li>Language 3</li>
</ul>
</li>
</ul>
</section>
</nav>
</div>
#media queries:
#media only screen and (min-width: 40em) {
a.link-item-flag span.lang-text {
display: none;
}
}
#media only screen and (min-width: 46.5em) {
a.link-item-flag span.lang-text {
display: inline-block;
}
}
Updated Fiddle
I want to have a foundation top-bar with one left and one right section.
The problem i am getting is when it collapses with a small screen i want the right nav (the one with the topbar) to still show and not collapse into the menu with the left nav section.
<nav class="top-bar" data-topbar role="navigation">
<ul class="title-area">
<li class="name">
<h1>My Site</h1>
</li>
<li class="toggle-topbar menu-icon"><span></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>
</ul>
</li>
</ul>
<!-- Left Nav Section -->
<ul class="left">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</section>
</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>
Im using the ZURB Foundation Topbar, I like it apart from a bug I've found. On 2nd level drop downs, if you highlight then click on the link (li elements) just before it takes you to the page you clicked on, the active highlight flicks to one of the above elements and back.
---[The reason its flicking to one of the above elements, is due to it being the 1st level dropdown to be selected, for some reason it flicks to the previous level drop down then back the the 2nd level choice]---Still No idea to fix it though.
<!-- Nav Section Mobile-->
<div class="top-bar-container hide-for-large-up">
<nav class="top-bar">
<ul class="title-area">
<li class="name"></li>
<li class="toggle-topbar menu-icon"><span>Menu</span></li>
</ul>
<section class="top-bar-section">
<!-- Nav Section -->
<ul class="">
<li class="divider hide-for-small"></li>
<li class=""><a title="" href="/page.html">page</a></li>
<li class="divider hide-for-small"></li>
<li class=""><a title="" href="/page.html">page</a></li>
<li class="divider hide-for-small"></li>
<li class=""><a title="" href="/page.html">page</a></li>
<li class="divider hide-for-small"></li>
<li class="has-dropdown">pages
<ul class="dropdown">
<li class="divider hide-for-small"></li>
<li><a href="/page.html" >page</a></li>
<li><a href="/page.html" >page</a></li>
<li>page</li>
<li>page</li>
<li>page</li>
<li>page</li>
</ul>
<li class="divider hide-for-small"></li>
<li class="has-dropdown">More
<ul class="dropdown">
<li class="divider hide-for-small"></li>
<li>page</li>
<li>page</li>
<li>page</li>
</ul>
<li class="divider hide-for-small"></li>
</ul>
</section>
</nav>
</div>
In Foundation 4 there is a bug because of a pseudo class being used with a colon :. It should be a period . after the li:
.top-bar-section ul li:hover > a {
It should read:
.top-bar-section ul li.hover > a {
That'll fix it right up