I am fairly new to using Zurb so I was wondering if someone could shed some light for me.
http://www.bitandpiecesvape.co.uk/
This is my website currently (not running Zurb). I am trying to remake this in Zurb but I am having trouble creating two top bars.
As you can see in the link I have the 5 links in the dark blue bar under the banner, and then the categories in the lighter blue area below it. How can I make it so that these will display as they do in the link, but on resizing the browser to small they should all compile into a dropdown menu.
I have tried with the code below, and it does work... But the second menu just floats a little below it. I have tried seperating the two menus using a div row class but it stops the whole thing working... Obviously I need it to be on two rows so I can position the second menu properly below it.
I apologise that I can't upload a current version of my Zurb template, but I am running all this offline on my laptop at the moment because I am having trouble with my FTP.
Any thoughts???
Thank you.
<div style="width: 100%; height: 100px; background: #0d233c">
<div class="row">
<nav class="top-bar" data-topbar role="navigation">
<ul class="title-area">
<li class="name">
<h1>
<span class="show-for-small-only"><B>Bitandpieces Vape</B></span>
</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="left" style='height: 100%'>
<li class="active">Home</li>
<li class="active">Shipping & Postage</li>
<li class="active">Product Support</li>
<li class="active">Contact Us</li>
<li class="active">About Us</li>
</ul>
</section>
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="left" style='height: 100%'>
<li class="active">Home</li>
<li class="active">Shipping & Postage</li>
<li class="active">Product Support</li>
<li class="active">Contact Us</li>
<li class="active">About Us</li>
</ul>
</section>
</nav>
</div>
</div>
Create the two top bars with separate instances of topbar rather than adding sections should solve the issue with the navs stacking properly if that is ultimately what you choose to use for this.
<nav class="top-bar" data-topbar role="navigation">
<li class="toggle-topbar menu-icon"><span>Menu</span></li>
</ul>
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="left" style='height: 100%'>
<li class="active">Home</li>
<li class="active">Shipping & Postage</li>
<li class="active">Product Support</li>
<li class="active">Contact Us</li>
<li class="active">About Us</li>
</ul>
</section>
</nav>
<nav class="top-bar" data-topbar role="navigation">
<li class="toggle-topbar menu-icon"><span>Menu</span></li>
</ul>
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="left" style='height: 100%'>
<li class="active">Home</li>
<li class="active">Shipping & Postage</li>
<li class="active">Product Support</li>
<li class="active">Contact Us</li>
<li class="active">About Us</li>
</ul>
</section>
</nav>
I would also suggest sticking with the foundation grid system and separating out the top banner section completely in it's own row and avoiding those height:100 styles. The site will be responsive and behave well as long as you use all of he built in classes for Foundation.
Related
I have some strange behaviour for the dropdown that I decided to transfer to multicolumn.
<!-- language-all: lang-html -->
<li class='dropdown'>
<a href='#ExtRep' class='dropdown-toggle' data-toggle='dropdown'>Extended reports <b class='caret'></b></a>
<ul class='dropdown-menu multi-column columns-3'>
<div class='row'>
<div class='col-sm-3'>
<ul class='multi-column-dropdown'>
<li class='disabled' disabled>Server 1</li>
<li class='divider'></li>
<li><a href='#tabl1' data-toggle='tab'>Report 1</a></li>
<li><a href='#tabl2' data-toggle='tab'>Report 2</a></li>
</ul>
</div>
<div class='col-sm-3'>
<ul class='multi-column-dropdown'>
<li class='disabled' disabled>Server 2</li>
<li class='divider'></li>
<li><a href='#tabl3' data-toggle='tab'>Report 3</a></li>
</ul>
</div>
<div class='col-sm-3'>
<ul class='multi-column-dropdown'>
<li class='disabled' disabled>Server 3</li>
<li class='divider'></li>
<li><a href='#tabl5' data-toggle='tab'>Report 5</a></li>
</ul>
</div>
</div>
</ul>
</li>
Here is the sample: https://jsfiddle.net/Meeshka/0fazzvdh/9
When selecting each line in dropdown for the first time all is working like a charm. But trying to return to report 3 or 5 I see that I can't do that. While inspecting the code I saw that although I switch to Report 1 or 2, the li element of previous report remains with class="active".
<li class='active'><a href='#tabl3' data-toggle='tab'>Report 3</a></li>
This happens only when I switch between reports in different columns.
Reports in the same drop-down column are working OK.
If I add to each column at least 2 lines, I can manage to switch but not in 100% cases, behavior is unpredictable.
Like in this example: https://jsfiddle.net/Meeshka/0fazzvdh/1/
Is the only way to make it wor correctly is to manually trigger class attribute for the element when I switch to another one?
Is it a bug at all or something I miss in the code?
So far I guess there is no "correct" solution to the bug.
If somebody wants a ready and a very straight forwarded solution, here is how I solved it:
<script type='text/javascript'>
$('a[data-toggle="tab"]').on('click', function(event) {
$(this).closest('div.row').find('li').each(function(){
//console.log($(this).attr('class'));
$(this).removeClass('active');
});
});
</script>
Here's how it looks like in fiddle:
https://jsfiddle.net/Meeshka/0fazzvdh/10/
I'm using the getbootstrap code for default navbar.
I want the title name of Drop-down (Test2) also to link to a html page. I added the linkage for the href, however when I'm running the page and clicking on the Drop-down text (Text2) nothing happened
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<a class="navbar-brand">Test</a>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="navbar-header" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Home <span class="sr-only">(current)</span></li>
<li>test1</li>
<li class="dropdown">
Test2 <span class="caret"></span>
<ul class="dropdown-menu">
<li>Test21</li>
<li>Create Test22</li>
<li>Test23</li>
</ul>
</li>
<li>Test3</li>
<li>Test4</li>
</ul>
</div>
</div><!-- /.container-fluid -->
</nav>
please help me i cant make my drop down list vertical. when I hover over a list it is horizontal.
my html code
<div id="header">
<div>
<img src="logo.png" alt="LOGO" height="115" width="115px" />
<ul id="navigation">
<li class="active">
Home
</li>
<li>
What We Offer
</li>
<li>
Solutions
<ul>
<li>
Inbound
</li>
<li>
Outbound
</li>
</ul>
</li>
<li>
About
</li>
<li>
Contact Us
</li>
</ul>
</div>
</div>
css
I can't see your CSS, but did you apply display: inline to both the top-level AND sub-level menu items? This will cause the problem you describe.
The top-level li items should be display: inline, but their children should be display: block.
See this example: https://jsfiddle.net/tLqrrfy0/
Using gumby CSS framework, when in mobile layout, the top level anchors with dropdowns are clickable. When clicked, the anchor loads a new page instead of showing the dropdowns. Has anyone encountered this problem and found a solution?
<div class="row navbar pretty" id="nav1">
<!-- Toggle for mobile navigation, targeting the <ul> -->
<a class="toggle" gumby-trigger="#nav1 > .row > ul" href="#"><i class="icon-menu"></i></a>
<h1 class="four columns logo">
<a href="#">
<img src="/img/gumby_mainlogo.png" gumby-retina />
</a>
</h1>
<ul class="eight columns">
<li>Features</li>
<li>
<!-- This link opens dropdown but also redirects to the href -->
Documentation
<div class="dropdown">
<ul>
<li>The Grid</li>
<li>UI Kit</li>
<li>Sass</li>
<li>JavaScript</li>
<li>Demo</li>
</ul>
</div>
</li>
<li>Customize</li>
</ul>
</div>
Your anchor was pointing to google.com instead of itself "#"
Also I would try and avoid opening a div inside of a list for your css to use, instead add aclass to your lists
should be:
<div class="row navbar pretty" id="nav1">
<!-- Toggle for mobile navigation, targeting the <ul> -->
<a class="toggle" gumby-trigger="#nav1 > .row > ul" href="#"><i class="icon-menu"></i></a>
<h1 class="four columns logo">
<a href="#">
<img src="/img/gumby_mainlogo.png" gumby-retina />
</a>
</h1>
<ul class="eight columns">
<li>Features</li>
<li>
<!-- This link opens dropdown but also redirects to the href -->
Documentation
<ul class="dropdown">
<li>The Grid</li>
<li>UI Kit</li>
<li>Sass</li>
<li>JavaScript</li>
<li>Demo</li>
</ul>
</li>
<li>Customize</li>
</ul>
</div>
I'm building a site with Bootstrap 2, and I'd like to add a dropdown menu to one item in the navbar.
Simple enough. However, when the dropdown is expanded, it appears underneath the incorrect item in the navbar:
Notice in the above screenshot that the dropdown renders underneath "Admin" (the leftmost navbar element) instead of "Locator" (the element that activates the dropdown).
How do I fix this so that the dropdown appears underneath the correct navbar element?
Here is the HTML for the navbar:
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="...">Dashboard</a>
<div class="nav-collapse collapse pull-right">
<ul class="nav">
<li>Admin</li>
<li>Find Trips</li>
<!-- Locator Dropdown -->
<li>
<a id="nav-locator-dropdown" class="dropdown-toggle" href="..."
data-toggle="dropdown" data-target="#">
Locator
<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="nav-locator-dropdown">
<li>My Trips</li>
<li>Create Trip</li>
</ul>
</li>
<li>My Profile</li>
<li>Log Out</li>
</ul>
</div>
</div>
</div>
</div>
Your dropdown is appearing on the wrong spot because you're missing the class that defines the relative position for your dropdown. To fix this, just add the .dropdown class to your menu item with a submenu like so:
<li class="dropdown"> ... </li>
Here is your fixed markup:
HTML
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="...">Dashboard</a>
<div class="nav-collapse collapse pull-right">
<ul class="nav">
<li>Admin</li>
<li>Find Trips</li>
<!-- Locator Dropdown -->
<li class="dropdown">
<a id="nav-locator-dropdown" class="dropdown-toggle" href="..."
data-toggle="dropdown" data-target="#">
Locator
<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="nav-locator-dropdown">
<li>My Trips</li>
<li>Create Trip</li>
</ul>
</li>
<li>My Profile</li>
<li>Log Out</li>
</ul>
</div>
</div>
</div>
</div>