zurb foundation 5 top bar with asp net mvc 4 - css

I work on an asp net mvc 4 solution working (well) with Zurb foundation 4.
I have to update it to the version 5 of the framework (the current version offers by Zurb is 5.3).
No problem for the moment^^.
But I have an issue with the top bar element with this new version (and the same with sub-nav).
The top-bar appears on my page but the dropdown lists don't work, in full screen as in responsive.
I already check some topics on it and add the "famous" data-topbar on the nav class="top-bar" but it still doesn't work.
I suspect that we won't make the upgrade on the solution if i can't fixed this problem, so I cracked on it for many hours...
Here is a sample of my HTML:
<nav class="top-bar" data-topbar>
<ul class="title-area">
<!-- Title Area -->
<li class="name">
<h1><i class="general foundicon-home"></i>TDB </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">
#if (Request.IsAuthenticated && (! ViewUtils.UtilisateurCourant.IsInfi()))
{
<li class="divider"></li>
<li class="#classMandats">Mandats</li>
<li class="divider"></li>
<li class="#classContacts">Contacts</li>
<li class="divider"></li>
}
#if (Request.IsAuthenticated && (ViewUtils.UtilisateurCourant.IsSuperAdmin() || ViewUtils.UtilisateurCourant.IsAdmin()))
{
<li class="#classAdmin">Administration
<ul class="dropdown">
#*<li><label>Actions</label></li>*#
<li>#*<img src="~/Areas/Admin/Content/Utilisateurs/icons/group.png" class="MenuIcon" />*#Utilisateurs</li>
<li class="divider"></li>
<li class="has-dropdown">#*<img src="~/Areas/Admin/Content/Utilisateurs/icons/services.png" class="MenuIcon" />*#Prospect / Client
<ul class="dropdown">
<li>Statuts</li>
<li>Perte</li>
<li>Origines</li>
</ul>
</li>
<li class="divider"></li>
<li>Import prospects ImmoInversé</li>
<li class="divider"></li>
#{
//string urlProspectsClient = string.Concat(ViewUtils.GetBaseUrlSiteWeb(), "/Areas/Admin/Content/ReportingService/RapportV2.aspx?rapport=1");
string urlProspectsClient = Url.Action("Index", "MarketingStats", new {area = "Admin"});
}
<li>Rapp. Prospects/Clients</li>
#if (Request.IsAuthenticated && ViewUtils.UtilisateurCourant.IsSuperAdmin())
{
<li class="divider"></li>
<li>Moteur</li>
<li class="divider"></li>
<li>Nettoyage de la base de données</li>
}
</ul>
</li>
<li class="divider"></li>
}
If someone can help me it will be nice.

Related

CSS selector within stacked lists

I am trying to style the nav in a template theme that I neither wrote nor picked. The nav uses lists in its structures and the children at various levels have the same class. I'm hoping someone can help me find the right CSS selector to pick the third level down. Here is the basic structure:
<nav class="nonbounce desktop vertical">
<ul>
<li class="item sub active">
<a class="itemLink" href="https://sitename/tools/" title="Tools">Tools</a>
<ul class="subnav">
<li class="subitem">
<a class="subitemLink" href="https://sitename/tools/outdoors/" title="Outdoors">Outdoors</a>
<ul class="subnav">
<li class="subitem">
<a class="subitemLink" href="https://www.safenready.net/tools/outdoors/mowers/" title="mowers">Mowers</a> THIS ONE!!!
</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
What I need to do is grab the 3rd level down (called Mowers in example).
My ultimate goal is to style this level and move it vertically but first I need to be able to modify only that level with CSS.
This is a new site but I can provide the real site URL if that would help.
jc
You can try this
.subitemLink[title~="mowers"] {
font-size:20px;
}
<nav class="nonbounce desktop vertical">
<ul>
<li class="item sub active">
<a class="itemLink" href="https://sitename/tools/" title="Tools">Tools</a>
<ul class="subnav">
<li class="subitem">
<a class="subitemLink" href="https://sitename/tools/outdoors/" title="Outdoors">Outdoors</a>
<ul class="subnav">
<li class="subitem">
<a class="subitemLink" href="https://www.safenready.net/tools/outdoors/mowers/" title="mowers">Mowers</a> THIS ONE!!!
</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>

Foundation 5 top-bar menu (with icons) breaks in two lines

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

Bootstrap Pull Right Sub-Navigation

Basically my issue is that I'm trying to pull this to the right of the page and have no idea how this would be done;
<ul class="nav nav-tabs">
<li role="presentation" class="active">Home</li>
<li role="presentation">1</li>
<li role="presentation">2</li>
<li role="presentation">3</li>
<li role="presentation">4</li>
<li role="presentation">5</li>
<li role="presentation">6</li>
! - This is the one that i need aligned to the right - !
<li role="presentation">Admin Panel</li>
</ul>
This is the sub-menu under the navigation bar I use the default bootstrap CSS.
Add the class "pull-right" i'm making a fiddle for you.
https://jsfiddle.net/7Lwa0mky/
<ul class="nav nav-tabs">
<li role="presentation" class="active">Home</li>
<li role="presentation">1</li>
<li role="presentation">2</li>
<li role="presentation">3</li>
<li role="presentation">4</li>
<li role="presentation">5</li>
<li role="presentation">6</li>
<!--This is the one that i need aligned to the right -->
<li role="presentation" class="pull-right">Admin Panel</li>
Have you actually tried
<li role="presentation pull-right">Admin Panel</li>
:P

Foundation 5 Simple Navigation

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

ZURB Foundation Topbar Bug, Onclick highlights other link Mobile

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

Resources