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.
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>
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
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 am designing a website using twitter bootstrap. Everything is working fine except the header area.
Screenshot
I have used .container-fluid to set the full-width background. And used .container to put the contents within 960px. But the problem is with the logo background. I want logo background area to fill out the left area outside the .container class. Is it possible?
Here is my markup -
<div class="container-fluid full-width">
<div class="row-fluid header-top">
<div class="container">
<div class="span4 logo-area">
<div class="logo">
<h1> hello.</h1>
</div>
</div>
<div class="menu span8">
<div class="navbar">
<ul class="nav" id="nav">
<li> Home </li>
<li> Menu Item2 </li>
<li> Menu Item3 </li>
<li> Menu Item4 </li>
<li> Menu Item5 </li>
<li> Menu Item6 </li>
</ul>
</div>
</div>
</div>
</div>
</div>
Thanks in advance.
It is, but you will need to remove it from the flow of the container either by placing it outside of it, or using CSS to control it by giving it position:absolute etc.
Something like:
<div class="logo">
<h1> hello.</h1>
</div>
<style>
.logo {
position:absolute;
top:100px;
left:100px;
}
</style>
<div class="container-fluid full-width">
<div class="row-fluid header-top">
<div class="container">
<div class="menu span8">
<div class="navbar">
<ul class="nav" id="nav">
<li> Home </li>
<li> Menu Item2 </li>
<li> Menu Item3 </li>
<li> Menu Item4 </li>
<li> Menu Item5 </li>
<li> Menu Item6 </li>
</ul>
</div>
</div>
</div>
</div>
</div>
I think you don't want to use position:absolute property.However you can't make your logo background area to fill out the left area outside the .container class.Because whatever you do it will remain inside .container class. The only way is to either you make the position:absolute or move the your .logo class outside of .container class(just above the the .container class).
A picture tells a thousand words..
I want rid of that nasty bit of padding on the left. How can I do it? Here's the HTML:
<div class="container">
<div class="navbar navbar-inverse">
<div class="navbar-inner">
<ul class="nav">
<li class="li-home active">
Home
</li>
<li class="li-abc">
Abc
</li>
<li class="li-def">
Def
</li>
<li class="li-ghi">
Ghi
</li>
</ul>
</div>
</div>
</div>
Put your navbar into a row because row has a margin-left: -20px that's why your content looks like this.