I added a simple <nav class="top-bar"> element to my page. It's displaying properly on computers, but on the iPhone I just get a solid black bar with no menu items. This is the top part of my nav.
<nav class="top-bar" style="">
<ul class="title-area">
<li class="name"></li>
</ul>
<section class="top-bar-section">
<ul class="left">
<li class="has-dropdown not-click">Orders
<ul class="dropdown"><li class="title back js-generated"><h5>« Back</h5></li>
<li class="">Create New</li>
</ul>
</li>
</ul>
</section>
</nav>
Just remove the height in your CSS:
.top-bar .name {
height: 45px;
}
Specifying a height was causing the <li> to render below <nav>, and since overflow:hidden was set, the <li> was not being displayed.
Related
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'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've tried a few tricks to try and move the menu on the left, but none of the regular classes appears to be fit to toggle this option, especially on mobile devices (which is what I'm designing for).
Is there a mobile device CSS fix for this? (note I've already got "class='left'" on the menu area).
<nav class="top-bar" data-topbar role="navigation" data-options="is_hover: false">
<ul class="title-area">
<li class="toggle-topbar menu-icon"><span></span></li>
<li class="name">
<h1><img style="width: 150px;"src="yourmomslogo.png"></h1>
</li>
</ul>
<section class="top-bar-section">
<ul class="left">
<li class="active">Login</li>
<li>Your Cats</li>
</ul>
</section>
</nav>
Let see the doc
If you change left by right in this code
<ul class="left">
<li>Left Nav Button</li>
</ul>
You can see the link goes to the right, so the left class changes the position of the link (so the menu for you)
I'm using zurb foundation 4.
I create a top bar with a search form within the same:
<nav class="top-bar">
<ul class="title-area">
<li class="name">
<h1>Title</h1>
</li>
<li class="toggle-topbar menu-icon"><span>Menu</span></li>
</ul>
<section class="top-bar-section">
<!-- Left Nav Section -->
<ul class="left">
<li class="has-form">
<form>
<div class="row collapse" >
<div class="small-10 columns">
<input type="text">
</div>
<div class="small-2 columns">
S
</div>
</div>
</form>
</li>
</ul>
<!-- Right Nav Section -->
<ul class="right">
<li class="divider"></li>
<li class="has-dropdown">Drop1
<ul class="dropdown">
<li>Dropdown Level 3a</li>
<li>Dropdown Level 3b</li>
<li>Dropdown Level 3c</li>
</ul>
</li>
<li class="divider"></li>
<li class="has-dropdown">Drop2
<ul class="dropdown">
<li>Dropdown Level 3a</li>
<li>Dropdown Level 3b</li>
<li>Dropdown Level 3c</li>
</ul>
</li>
</ul>
</section>
I need to increase the size in the search field without losing responsiveness. Does anyone have any idea how can I do?
http://cl.ly/image/1a412p3M3e1J
If you're using SASS, simply change:
input { height: $topbar-input-height }
To:
input { height: $topbar-height }
If you're using CSS, change the line with:
.top-bar input { height: 2.45em; }
To:
.top-bar input { height: 45px; }
Follow a similar process if you wish to change the width.
I am a big fan of CDN, so editing the Foundation files is not an option.
Here is the workaround that works for me:
.top-bar input {
height: auto !important;
padding-top: .35rem !important;
padding-bottom: .35rem !important;
}
I'm using Bootstrap Twitter and designed a fluid layout with fixed navbar and footer. But I still need a fixed left sidebar with 100% height and a content area that scrolls if necessary.
I'd like to use the browser's default vertical scrollbar, I mean, I don't want to use overflow-y in my content div. I saw this on some HTML5 websites and I'd like to do the same.
Can you help me?
Here is the code I'm using: http://jsfiddle.net/julianonunes/AhK3c/2/embedded/result/
<!-- Part 1: Wrap all page content here -->
<div id="wrap">
<!-- Fixed navbar -->
<div class="navbar navbar-fixed-top">
<div class="navbar-inner"> <a class="brand" href="#">
Texto</a>
<ul class="nav pull-right">
<li>Dashboard
</li>
<li class="">Link
</li>
</ul>
</div>
</div>
<!-- Begin page content -->
<div class="container-fluid no-padding header-margin">
<div class="row-fluid">
<div class="span2">
<div class="well sidebar-nav">
<ul class="nav nav-list">
<li class="nav-header">Sidebar</li>
<li class="active">Link
</li>
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
<li class="nav-header">Sidebar</li>
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
<li class="nav-header">Sidebar</li>
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
</ul>
</div>
</div>
<div class="span10">
<div class="panel-middle-top">
<div class="middle-top-left"></div>
<div class="middle-top-center">
<ul class="breadcrumb" style="background-color: transparent;">
<li>Home <span class="divider">/</span>
</li>
<li class="active">Link</li>
</ul>
</div>
<div class="middle-top-right"></div>
</div>
<div class="panel-middle-content"></div>
</div>
</div>
</div>
<div id="push"></div>
</div>
<div id="footer">
<div class="container">
<p class="muted credit">Copyright Site 2013.</p>
</div>
</div>
Thanks.
Your footer is not fixed ... but rather pushed to the bottom of page when the content is shorter ("sticky").
To make it actually fixed you need to make it have something like:
position:fixed;
width:100%;
bottom:0;
and the sidebar you can make to something like this, that it always spans between the fixed header and footer (with the top and bottom, you can here make it span the way you want):
.sidebar-nav {
position:fixed;
top:52px;
bottom:52px;
width:12%;
}
here is an update to your jsfiddle
Note: With position set to fixed, the element gets positioned in a similar way to absolute (so you can set its boundaries/span by defining top, bottom, left and right), but instead of being positioned relative to any one of its parent html elements, a fixed element gets positioned relative to the browser window/viewport. Here is quite a good post on the position property, if you want to read some more.
Like this - jsFiddle 1
.navbar-fixed-top, #footer, .sidebar-nav{
position:fixed;
}
.sidebar-nav{
top:50px;
bottom:40px;
overflow-y:scroll;
}
Or like this - jsFiddle 2
.navbar-fixed-top, #footer{
position:fixed;
}
.sidebar-nav{
position:relative;
margin-bottom:60px;
}
#footer {
height: 60px;
width:100%;
bottom:0px;
}
These will likely need a little fine tuning, you seem to be using a lot of external resources that are effecting your layout. You may want to consider simplifying a bit.