Zurb Foundation 6 menu align-right easiet way to make align-center on small devices

Question

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?

score 2 · Answer 1 · answered Apr 06 '19 at 04:13

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.

That won't work since your removing the flexbox align which won't be apparent unless you have surrounding items, hence your codepen works fine. — Simon Hayter, Apr 10 '19 at 17:18
That’s a use case for containers. Align these items as described within a non-flex container, while that container flexes with surrounding content. Whether the UL has flex or not, it’s the UL’s parent that controls how it (and not its children) flexes with surrounding content. — denmch, Apr 11 '19 at 13:10

score 0 · Answer 2 · answered Apr 04 '19 at 18:54

0

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

answered Apr 04 '19 at 18:54

fontophilic

1,066
6
18

I'm after two outcomes, one for desktop, one for mobile. So the align-centre should only apply on small devices, I can do that by using CSS but I want to know if its possible to do it within the foundation or any easier way than I'm doing, perf, without CSS. – Simon Hayter Apr 04 '19 at 21:27

Hassan Siddiqui · Answer 3 · 2019-04-10T19:57:57.630

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

Have you tested this using ZURB6? since your quoted docs v5 which doesn't use Flex. — Simon Hayter, Apr 06 '19 at 17:03
@SimonHayter i also added **Foundation 6** example in above snippet. Thanks — Hassan Siddiqui, Apr 07 '19 at 00:27
@SimonHayter here is the fiddle https://jsfiddle.net/creative_sid5/3Lojvkp2/5/. I also added in my answers detail. Thanks — Hassan Siddiqui, Apr 10 '19 at 19:59

score 0 · Answer 4 · answered Apr 08 '19 at 18:41

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!

Gustavo TagSW · Answer 5 · 2021-04-07T17:06:23.640

0

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.

edited Apr 07 '21 at 17:06

answered Apr 07 '21 at 14:39

Gustavo TagSW

1
3

Thanks for your answer. The thread owner asked for a solution without changing css (compiling scss will create css), so your answer can't be "the best way" since others accomplished a solution by purely using existing classes. – shaedrich Apr 07 '21 at 15:48
@shaedrich edited the anwser to an SCSS solution. Can help others that are looking for that solution and don't care to write some SCSS lines. – Gustavo TagSW Apr 07 '21 at 17:07
sure, why not :) – shaedrich Apr 07 '21 at 17:10

Zurb Foundation 6 menu align-right easiet way to make align-center on small devices

5 Answers5