My drop down menu is not aligning. Also, it is constantly showing dark yellow, the color it's only supposed to show when I am hovering on it.
Would be great if someone could point me in the right direction
<div class="top">
</div>
<div class="white_line"></div>
<div id="navi li">
<ul id="navi">
<li id="navi01">
<div class="dropdown">
STARTSEITE
<div class="dropdown-content">
<ul>
<li>HOMÖOPATHIE</li>
<li><a href="wirbelsaeulentherapie.html">WIRBELSÄULEN-</b>BEHANDLUNG</li>
</ul>
</div>
</div>
</li>
<li id="navi02">ÜBER MICH</li>
</ul>
</div>
Thanks
Anu
Related
i have boostrap3 carosal. i have horizantal menu over the carosal . how can i make it vertical right side of the slider without right margin.
<section>
<div class="container">
<div class="row">
<div class="wed-hom-ser">
<ul>
<li>
Contact Us
</li>
<li>
Share
</li>
<li>
Call Us
</li>
<li>
<img src="images/icon/h-ic3.png" alt=""> Whats App
</li>
</ul>
</div>
</div>
</div>
</section>
Using foundations menu (http://foundation.zurb.com/sites/docs/menu.html) I'm having the problem that adding links to the li tags means the menu is no longer horizontal but vertical. Can anyone point me in the right direction please.
<div class="row">
<div class="small-12 columns">
<ul class="menu">
<li class="li1">Home</li>
<li class="li2">About</li>
<li class="li3">Products</li>
<li class="li4">Services</li>
<li class="li5">Contact</li>
</ul>
</div>
</div>
li {
display: inline;
}
or
.specific-li-class{
display: inline;
}
For completeness and as mentioned by Jan P, the code with the a tags in the right position
<div class="row">
<div class="small-12 columns">
<ul class="menu">
<li class="li1">Home</li>
<li class="li2">About</li>
<li class="li3">Products</li>
<li class="li4">Services</li>
<li class="li5">Contact</li>
</ul>
</div>
</div>
Your code is wrong, it is not allowed to have a as direct children of ul. Your code MUST be like this:
<div class="row">
<div class="small-12 columns">
<ul class="menu">
<li class="li1">Home</li>
<li class="li2">About</li>
<li class="li3">Products</li>
<li class="li4">Services</li>
<li class="li5">Contact</li>
</ul>
</div>
</div>
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 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>
To build nav tabs via Bootstrap, it's simple, I just add code:
<ul class="nav nav-tabs">
<li class="active">
Home
</li>
<li>Tab1</li>
<li>Tab2</li>
</ul>
http://jsfiddle.net/M4YZ6/
but it's only top part of the tabs, who knows how to build bottom part using bootstrap like on picture below:
Thanks a lot!
try this
http://jsfiddle.net/M4YZ6/5/
HTML
<div class="tabbable">
<ul class="nav nav-tabs" id="myTab">
<li class="active">
<a data-original-title="" rel="tooltip" href="#tab1" data-toggle="tab">Home</a>
</li>
<li><a data-original-title="" rel="tooltip" href="#tab2" data-toggle="tab">Profile</a></li>
<li><a data-original-title="" rel="tooltip" href="#tab3" data-toggle="tab">Message</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="tab1">
Home
</div>
<div class="tab-pane" id="tab2">
Profile
</div>
<div class="tab-pane" id="tab3">
Message
</div>
</div>
</div>
I believe Tabbable nav is what you are looking for,
<div class="tabbable"> <!-- Only required for left/right tabs -->
<ul class="nav nav-tabs">
<li class="active">Section 1</li>
<li>Section 2</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<p>I'm in Section 1.</p>
</div>
<div class="tab-pane" id="tab2">
<p>Howdy, I'm in Section 2.</p>
</div>
</div>
</div>
Markup taken from the nav component documentation
===Edit===
Js fiddle