I'm using ZURB foundation and I am wondering if an easier way exists of aligning menu items on small devices.
Currently my HTML looks like this:
<ul class="vertical menu align-right">
<li><a title="My God, It's Full of Stars">Link 1</a></li>
<li><a title="They're moving in herds. They do move in herds">Link 2</a></li>
<li><a title="Klaatu barada nikto">Link 3</a></li>
</ul>
As you can see, on all devices my menu aligns 'right' but on smaller devices I'd like to center those items, I know that ZURB 6 has many classes and data methods of getting things to work differently depending on the viewpoint size.
I've tried using both:
<ul class="vertical menu align-right" data-responsive-menu="small-align-center">
<ul class="vertical menu align-right small-align-center">
Which both do not work! sadly.
I suppose I could use:
/* Small only */
#media screen and (max-width: 39.9375em) {
.menu.align-right {
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
.menu.align-right.vertical li {
text-align: center;
}
}
I would prefer to keep the CSS as minimal as possible and wondering if a method exists without adding to the CSS. As great as the documentation is on the ZURB 6 site, not all is listed.
The Question(s):
Is there a method of aligning menu items using CLASS or DATA on small, media and large devices?
The only way to accomplish this without rules for breakpoints is to forego the flex rules and use simpler text-alignment rules, which allow for some breakpoint-based name components:
<ul class="vertical menu small-12 text-center medium-text-right">
<li><a title="My God, It's Full of Stars">Link 1</a></li>
<li><a title="They're moving in herds. They do move in herds">Link 2</a></li>
<li><a title="Klaatu barada nikto">Link 3</a></li>
</ul>
This isn't well-documented, but since Foundation starts from a mobile-first philosophy, .text-center applies to small viewports. The breakpoint-specific class .medium-text-right then takes over on medium viewports, and will carry through on larger sizes as well.
If flex utility classes were otherwise important, you'd have no choice but to write media queries or, if using SASS, use breakpoint includes.
Here's a working Codepen demo to show the effect in action.
Did you try using the class align-center?
<ul class="vertical menu align-center">
<li><a title="My God, It's Full of Stars">Link 1</a></li>
<li><a title="They're moving in herds. They do move in herds">Link 2</a></li>
<li><a title="Klaatu barada nikto">Link 3</a></li>
</ul>
https://codepen.io/fontophilic-the-vuer/pen/VNamjy
I got this to work, while using the flex box classes correctly, by directly aligning text via the <a> tags themselves. Since the <a> tags are spanning 100% of the width of the menu you can control the alignment of the text inside of them directly on the <a> tag.
You have to give them a default alignment of text-center so it's centered on all screen sizes until it hits the specified medium-text-right and then goes right-aligned for all sizes medium and above.
<ul class="vertical menu medium-align-right">
<li><a class="text-center medium-text-right" title="My God, It's Full of Stars">Link 1</a></li>
<li><a class="text-center medium-text-right" title="They're moving in herds. They do move in herds">Link 2</a></li>
<li><a class="text-center medium-text-right" title="Klaatu barada nikto">Link 3</a></li>
</ul>
Please let me know if this answer is closer to achieving what you are looking for!
You just need to add small-only-text-center in li it'll only impact your li on small devices. Try this I hope it'll help you out. Thanks
Zurb Foundation also provide proper documentation for all utilities - https://foundation.zurb.com/sites/docs/v/5.5.3/utility-classes.html
Foundation 5:
<ul class="vertical menu align-right">
<li class="small-only-text-center"><a title="My God, It's Full of Stars">Link 1</a></li>
<li class="small-only-text-center"><a title="They're moving in herds. They do move in herds">Link 2</a></li>
<li class="small-only-text-center"><a title="Klaatu barada nikto">Link 3</a></li>
</ul>
I think Foundation 6 is not very mature yet. There medium-text-right works opposite for larger screen. Below code snippet will be works as per requirement. Try this I hope it'll help you out. Thanks
Foundation 6:
<ul class="vertical menu">
<li class="medium-text-right text-center"><a title="My God, It's Full of Stars">Link 1</a></li>
<li class="medium-text-right text-center"><a title="They're moving in herds. They do move in herds">Link 2</a></li>
<li class="medium-text-right text-center"><a title="Klaatu barada nikto">Link 3</a></li>
</ul>
I also created basic fiddle using foundation 6. Fiddle Example
Foundation Latest Version (6.5.3) CDN links using in Fiddle Example
https://foundation.zurb.com/sites/docs/installation.html#cdn-links
Well, needed that solution over here and Foundation is actually in 6.6.3
It's not the answer the OP are looking, but since i'm using SCSS i leave this here to help if someone is looking for the solution in SCSS.
.align-right{
justify-content: center;
#include breakpoint(medium){
justify-content: right;
}
}
You probably can achieve that through pure CSS and midia queries with a longer code.
I have a menu like this:
<div class="menu-hori" id="myMenu">
<ul>
<li>☰</li>
<li><a>1</a>
<ul>
<li><a>Sub 1</a>
<ul>
<li><a>SubSub 1</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
When I click the hamburger icon in the top ListItem, the menu opens. So the functionality is fine. Though it does not look nice, how can I use css to give it a smooth fold out? A nice flow down?
My navbar looks like this:
<div class="navbar-fixed" id="navigation">
<ul id="alert_type_nav_drop_down" class="dropdown-content">
</ul>
<nav>
<div class='nav-wrapper'>
<ul id='nav-mobile' class='left'>
<li><a href='/'><img src='http://vignette2.wikia.nocookie.net/gtawiki/images/9/9a/PlayStation_1_Logo.png/revision/latest?cb=20100130082645' height='25px'></a></li>
<li><a href='/'>Test</a></li>
<li><a href='/'>Another Test</a></li>
<li><a href='/'>Heyyy</a></li>
<li><a href='/'>Whyyy</a></li>
<li><a href='/'>Okkkkkk</a></li>
<li><a href='/'>Los Angeles</a></li>
</ul>
<a class="right black-text valign-wrapper"><img class="circle responsive-img" width=50px
src="http://www.stockvault.net/blog/wp-content/uploads/2013/11/Portrait-8.jpg"></a>
</div>
</nav>
</div>
fiddle: https://fiddle.jshell.net/g3mvhvdk/
The problem is that when the window size is too small, elements wrap around into the body of the page like so:
When it normally looks like this:
What's a good way to fix this problem? Should I make the elements horizontally scrollable?
As per suggestions in the comment, I've added the following:
<div class="navbar-fixed hide-on-med-and-down" id="navigation">
which will hide my nav bar when it resizes to be something small enough, my question is, how do I show the hamburger if the navbar's hidden? Is there a helper "show-on-med-and-down" class? I suppose the bigger question is, is there an elegant way to switch from showing a navbar to showing a hamburger and a sidebar?
.nav-wrapper {
display: flex;
align-items: center;
}
#nav-mobile {
flex: 100;
}
i want to place a image in a very specific place (top right of the NAV bar) and i have done that using postition:relative; (also tried absolute) and moving it accordingly.
when ever i crop the browser it will stay in the white space outside of the div wrapper i have.
so basically my image is not scaling with the div wrapper i have.
can anyone provide some tips? sorry for the noob question.
here is some code.
<div id ="Wrapper">
<div id='cssmenu'>
<ul>
<li><a href='#'><span>Home</span></a></li>
<li class='active has-sub'><a href='#'><span>Products</span></a>
<ul>
<li class='has-sub'><a href='#'><span>Product 1</span></a> </li>
<li class='has-sub'><a href='#'><span>Product 2</span></a> </li>
</ul>
</li>
<li><a href='#'><span>About</span></a></li>
<li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
<img src="images/register.jpg" width="50px" height="45px" id="register"/>
</div><!-- end of css -->
Wrapper div is at the bottom.
the css for the "register" id is just positioning coordinates
The nav bar is a template i downloaded.
Based on the CSS you provided in your comment, the reason it is doing this is because you are using pixels to set width. If you use a percentage, your image will shift to the screen size. So if you want it at the very right side of your container, try: left: 99%; or change the percentage value to place it where you need it to be.
ok simple try this.
<html>
<head>
<style>
h3 {
word-spacing: 100px;
}
</style>
</head>
<body>
<!-- make sure you put it in the heading tag of nav bar right allign-->
<hr>
<h3>
Example
Example
Example
Example
<!--Put Image below here-->
<img src="IMAGE.jpg">
</h3>
<hr>
I'm struggling with an issue with my drop-down menu, which is that the dropdown menu is displayed properly, but disappears once it stretches below the containing div. Here's an illustration of what i'm talking about:
The menu only extends to the height of the black containing <div>. Here's my framework:
<ul>
<li><a href=''>Menu Item</a></li>
<li><a href=''>Menu Item 2</a>
<ul class="sub_menu">
<li><a href=''>...</a></li>
<li><a href=''>...</a></li>
<li><a href=''>...</a></li>
</ul>
</ul>
Try giving your containing element an overflow property of visible.
Did you try to specify the width and height properties for your ul, and li elements yet ?