I am trying to achieve an iOS kind of look on a Zurb' Foundation 5 top menubar. I would like to have a icon font icon on top and the matching menu description below. Something that would look like this:
This is what I got now:
Having an icon first and following text is trivial with icon fonts:
<div class="contain-to-grid">
<nav class="top-bar" data-topbar>
<ul class="title-area">
<li class="name">
<h1>Site name</h1>
</li>
</ul>
<section class="top-bar-section">
<ul>
<li class="show-for-medium-up" id="people-menu" data-tooltip data-options="disable_for_touch:true" title="People"><i class="fi-results-demographics"></i> <span class="menu-heading"> option 1 </span></li>
<li id="assets-menu" data-tooltip data-options="disable_for_touch:true" title="Assets"><i class="fi-euro"></i> <span class="menu-heading"> option 2 </li>
<li id="documents-menu" data-tooltip data-options="disable_for_touch:true" title="Documents"><i class="fi-page-edit"></i> option 3 </li>
<li id="services-menu" data-tooltip data-options="disable_for_touch:true" title="Services"><i class="fi-info"></i> Option4 </li>
<li class="divider"></li>
<li id="login-menu" data-tooltip data-options="disable_for_touch:true" title="Sign in"><i class="fi-key"></i> </li>
<li id="logout-menu" data-tooltip data-options="disable_for_touch:true" title="Sign out">Example login <i class="icon-bell color6"></i> </li>
</ul>
</section>
Adding a < br > before the span does not help as it breaks the top bar even if span has zero margin/padding in CSS.
How can I get the icon and text stack up nicely above each other?
You'll need to override a few default Foundation styles, but it's definitely possible.
Give these styles a try:
.top-bar ul>li a:not(.button) {
line-height: 1em;
padding-top: 8px;
}
.top-bar ul>li a i {
display: block;
height: 16px;
margin: auto 0;
line-height: 1em;
text-align: center;
}
You'll likely need to adjust both the padding-top, line-height, and icon height values to match your particular design.
Related
When designing a webpage using Zurb Foundation 6, top-bar-left and top-bar-right of the navigation menu stack when put into a wrap class, even when scaled to full screen. The top-bar-right ends up being just below and indented from top-bar-left. How do I fix this issue so that the top-bar-right section stays in line with top-bar-left and is not stacked?
The top-bar-right section works fine when the wrap class is not applied to a div within the nav class. I've tried only applying the wrap class to top-bar-left only instead of the entire nav class, and also tried a "float: right" for top-bar-right in CSS, but neither method solved the problem.
HTML code:
<!-- DESKTOP NAVIGATION -->
<nav class="top-bar">
<div class="wrap">
<div class="top-bar-left">
<h3>Site Title</h3>
</div>
<div class="top-bar-right">
<ul class="menu">
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
And the CSS:
/*GENERAL*/
.wrap {
width: 90%;
max-width: 1100px;
margin: 0px auto;
}
There are attributes on top-bar that are making its dependents display inline and stack for narrow displays (display: flex for one). You could apply all the appropriate attributes to the wrap class as well but why reinvent the wheel? Doesn't that negate the whole reason for using a grid system in the first place? Try removing the extra div and put the wrap class on the nav element instead:
<nav class="top-bar wrap">
<div class="top-bar-left">
<h3>Site Title</h3>
</div>
<div class="top-bar-right">
<ul class="menu">
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
</nav>
Or to simplify things, you could just put those attributes on .top-bar and not have a wrap class:
.top-bar {
width: 90%;
max-width: 1100px;
margin: 0px auto;
}
If you need a wrapper div, put it outside top-bar, not inside.
I'm building a website for a friend's film production company using Foundation 6. I created a top-bar navigation bar with his logo image above the top-bar and made them both sticky. It seems to work fine on large screens and small screens but if viewed on anything in between the logo separates from the top-bar. This is most evident when you stretch and squish the page.
I've tried to include the image in the top-bar div but it aligns it to the left and I haven't been able to align it to the top as it is currently. This is the first time I've worked with the sticky function in Foundation. I've looked through the Foundation docs, Google, and StackOverflow but haven't found anything quite like this.
This is my top-bar section.
<div data-sticky-container>
<div class="title-bar" data-responsive-toggle="example-menu" data-hide-for="medium">
<button class="menu-icon" type="button" data-toggle="example-menu"></button>
<div class="title-bar-title">Menu</div>
</div>
<div class="grid-y">
<img src="images/safe_image.jpeg" style="width: 100%; height: auto"; data-sticky data-options="marginTop:0;">
<div class="top-bar" data-sticky data-options="marginTop:10.2;" style="width:100%; background-color: white; padding-top: 10px;" id="example-menu">
<!-- <div class="top-bar" style="width:100%; background-color: white; padding-top: 10px;" id="example-menu"> -->
<div class="top-bar-right" data-dropdown-menu style="display: table; margin: 0 auto;">
<ul class="dropdown vertical medium-horizontal menu" style="background-color: white;">
<li>Home</li>
<li>Current News</li>
<li>Film/Media</li>
<li>Photography</li>
<li>Publicity</li>
<li>Misc</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
I would like the logo image and the navigation bar to look the way they do at larger screen sizes but minimize together to the point where the data-toggle kicks in instead of separating, as they are doing currently.
I used a layout similar to a menu how it has the main menu and a submenu that appears when you hover over it. In this case, I'm trying to have a "Share" menu with the icons the submenu on the same line. I picked details from http://cssdeck.com/labs/another-simple-css3-dropdown-menu Why isn't my menu hiding/showing properly?
HTML
a {
padding: 4px;
}
i.fa {
color: #8b8b8b;
}
ul {
list-style-type: none;
}
ul li:hover ul {
display: block;
}
ul li ul {
display: none;
padding: 0;
visibility: hidden;
}
ul li ul:hover {
display: block;
}
ul li ul li {
display: inline-block;
}
<ul>
<li style="color: #676767;"> <a style="color: #676767;" href="#"><i class="fa fa-share-alt"></i> Share</a>
<ul class="socialShare">
<li><i class="fa fa-facebook"></i>
</li>
<li><i class="fa fa-twitter"></i>
</li>
<li><i class="fa fa-pinterest"></i>
</li>
</ul>
</li>
</ul>
I ran your code on a separated file, and i detected that your mistake was in the html. I supposed that you want to create on hover effect on the Share, and then show the social networks.. Here's the code of the HTML properly coded.
<ul>
<li>
<a style="color: #676767;" href="#"><i class="fa fa-share-alt"></i> Share</a>
<ul class="socialShare">
<li>
<i class="fa fa-facebook"></i>Facebook
</li>
<li>
<i class="fa fa-twitter"></i>Twitter
</li>
<li>
<i class="fa fa-pinterest"></i>Pinterest
</li>
</ul>
</li>
</ul>
The reason the menu isn't appearing is because the menu <ul> which you are trying to show has visibility: hidden, and that property is not being changed on hover. Since that element already has display: none set (which does get set to block on hover), you can remove the visibility property.
I see that the code in your link has visibility: hidden set but also sets it to visible on hover. This would also correct the problem, but I don't see any reason to have visibility at all on this.
Also, in your particular example, you need some content in the menu <li>s to actually see that it's being shown. See the updated snippet below.
a {
padding: 4px;
}
i.fa {
color: #8b8b8b;
}
ul {
list-style-type: none;
}
ul li:hover ul {
display: block;
}
ul li ul {
display: none;
padding: 0;
/*visibility: hidden;*/ /* Not needed, since there is already display:none*/
}
ul li ul:hover {
display: block;
}
ul li ul li {
display: inline-block;
}
<ul>
<li style="color: #676767;"> <a style="color: #676767;" href="#"><i class="fa fa-share-alt"></i> Share</a>
<ul class="socialShare">
<!-- Need some content in the <li>s -->
<li><a href="https://www.facebook.com/sharer/sharer.php?u=http://test.gpjbaker.com/brands/gp-j-baker/denbury-collection/"><i class="fa fa-facebook">
link a
</i></a></li>
<li><a href="https://twitter.com/home?status=http://test.gpjbaker.com/brands/gp-j-baker/denbury-collection/"><i class="fa fa-twitter">
link b
</i></a></li>
<li><a href="https://pinterest.com/pin/create/button/?url=http://test.gpjbaker.com/brands/gp-j-baker/denbury-collection/&media=&description="><i class="fa fa-pinterest">
link c
</i></a></li>
</ul>
</li>
</ul>
My questions is a common problem i seem to encounter but my brain never registers the right answer for some reason, probably because i'm slow.
The question I have is regarding my navigation menu.
When i'm at full width in Foundation i use the large-12 class and the small-12 class for smaller viewports, however i have that nav div inside of another parent div so when i get to small viewport the navigation drops below the height of the parent div.
I've set the parent div to a min-height: 204px and a max-height: auto assuming that it will adjust in height to wrapping child elements but i doesn't work.
So what is the best way to ensure that child divs that grow in height due to smaller viewports will push the parent div in height as well?
Here is my html:
<div>
<div class="interior-header">
<div>
<nav class="utility">
<ul>
<li>Register</li>
<li>Login</li>
</ul>
</nav>
</div>
<div>
<nav class="main">
<div class="logo small-12 large-offset-1 large-5 columns left"></div>
<ul class="small-12 large-6 columns right">
<li>Home</li>
<li>Catalog</li>
<li>Learn More</li>
<li>Be a Broker</li>
<li>Contact</li>
</ul>
</nav>
</div>
</div>
</div>
and here is the css for this particular component:
// HEADER INTERIOR
.interior-header {
background: url('../img/hero.jpg');
background-size: cover;
background-repeat: no-repeat;
min-height: 174px;
max-height: auto;
}
// NAVIGATION FIRST TIER
nav.main {
margin-top: 2%;
min-height: 100px;
height: auto;
}
Any help would be awesome, thank you.
.main {overflow: hidden;}
This causes a block-level element to contain its descendants.
I have the following css:
#cssmenu .has-sub .has-sub:hover > ul {
height: 76px;
}
#cssmenu .has-sub .has-sub ul {
height: 0px;
overflow: hidden;
position: inherit;
left: -1px;
top: -1px;
background-color: #999;
transition: height 2s;
-moz-transition: height 2s; /* Firefox 4 */
-webkit-transition: height 2s; /* Safari and Chrome */
-o-transition: height 2s; /* Opera */
}
with this html:
<div id="cssmenu">
<ul>
<li class="active has-sub"><span>Products</span>
<ul>
<li class="has-sub"><span>Product 1</span>
<ul>
<li><span>Sub Product</span></li>
<li class="last"><span>Sub Product</span></li>
</ul>
</li>
<li class="has-sub"><span>Product 2</span>
<ul>
<li><span>Sub Product</span></li>
<li class="last"><span>Sub Product</span></li>
</ul>
</li>
<li class="has-sub"><span>Product 3</span>
<ul>
<li><span>Sub Product</span></li>
<li class="last"><span>Sub Product</span></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
and I'd when I moving my mouse over Product 1:
the transition just not working. Where I went wrong?
The whole page is available here
Don't hide the child ul you are trying to transition. Set it to display:block (it's height is 0px anyway so you can't see it).
#cssmenu .has-sub ul ul {
display: block;
}
A tidier approach would be to be more specific with your original ul selector and only hide the parent UL, rather than hide all UL's and switch the child back to display: block. You'd need to add another class to hook onto with this approach though:
#cssmenu .top-sub-menu > ul {
display: none;
}