Menu icon Foundation

My Posts

  • 6
    Replies
  • Responsive Menu

    By Amir

    Responsivemenudropdowndrilldown

    I want to create a menu that behaves as a horizontal drop-down menu in medium/large screens and as vertical drildown in small screens. The problem is that in 6.1.2 the sub menus appears to the right of the menu items and the arrow is directed to right:... (continued)

    Last Reply by bill over 3 years ago


  • 2
    Replies
  • Ecommerce Template Issue

    By Amir

    Orbittemplate

    The orbit on the template pages does not show properly when user resize the browser it makes a white space under the images. However, if the browser was initially open the page in same size everything is fine. http://foundation.zurb.com/templates-pre... (continued)

    Last Reply by Amir over 3 years ago



  • 2
    Replies
  • Top-Bar Right to Left Issue

    By Amir

    right to leftrtltop-bar

    I think there is a bug in Right to Left support of Top-Bar. I downloaded the latest version and right to left 5.5.3. I implemented the Example from zurb documentation: http://foundation.zurb.com/docs/components/topbar.html 1- I think the title-area UL... (continued)

    Last Reply by Amir over 3 years ago


My Comments

Amir commented on Amir's post over 3 years

This answer is posted by Bill (http://foundation.zurb.com/forum/1568-bill)

Your codepen doesn't work for me, but I think I'm having the exact same issue.

                <div class="title-bar" data-responsive-toggle="site-menu" data-hide-for="medium">
                    <button class="menu-icon" type="button" data-toggle></button>
                    <div class="title-bar-title">Menu</div>
                </div>


                <ul id="site-menu" class="vertical medium-horizontal menu expanded" data-responsive-menu="drilldown medium-dropdown">

Gives me a correct vertical drilldown menu on small screens, and gives me a mostly correct horizontal dropdown menu on bigger screens, EXCEPT that the dropdown arrows point right and the dropdowns appear to the right of the menu items.

Changing it to
HTML

Makes the bigger screen dropdown menu behave correctly, but then the small screen drill-down menu is horizontal instead of vertical.

It seems like the "medium-horizontal" and "large-horizontal" aren't completely overriding the "vertical".

Of course, the menu documentation is rather convoluted and unclear, but this seems like a pretty common use-case combination (given that it's basically recreating the default responsive menu from F5) so either I'm missing a key point or there is some kind of bug.

Amir commented on Amir's post over 3 years

Thanks

Re: Adam. You are right. it is about vertical. I think I tried every possible combination but there is no such option.

Re: Rafi. I agree with you. I can not think of accordions and drilldowns to be horizontal.

Amir commented on Amir's post over 3 years

It is resolved in 6.1.2

Amir commented on Amir's post over 3 years

Yes.

FF 43.0.4
Chrome: 47
Edge

Amir commented on Amir's post over 3 years

Thanks Rafi,

I used the Sass version and change the following lines and it worked!
$text-direction: rtl;
$opposite-direction: left;
$default-float: right;

Thanks for your reply.

Posts Followed

No Content

Following

    No Content

Followers

My Posts





My Comments

You commented on Amir's post over 3 years

This answer is posted by Bill (http://foundation.zurb.com/forum/1568-bill)

Your codepen doesn't work for me, but I think I'm having the exact same issue.

                <div class="title-bar" data-responsive-toggle="site-menu" data-hide-for="medium">
                    <button class="menu-icon" type="button" data-toggle></button>
                    <div class="title-bar-title">Menu</div>
                </div>


                <ul id="site-menu" class="vertical medium-horizontal menu expanded" data-responsive-menu="drilldown medium-dropdown">

Gives me a correct vertical drilldown menu on small screens, and gives me a mostly correct horizontal dropdown menu on bigger screens, EXCEPT that the dropdown arrows point right and the dropdowns appear to the right of the menu items.

Changing it to
HTML

Makes the bigger screen dropdown menu behave correctly, but then the small screen drill-down menu is horizontal instead of vertical.

It seems like the "medium-horizontal" and "large-horizontal" aren't completely overriding the "vertical".

Of course, the menu documentation is rather convoluted and unclear, but this seems like a pretty common use-case combination (given that it's basically recreating the default responsive menu from F5) so either I'm missing a key point or there is some kind of bug.

You commented on Amir's post over 3 years

Thanks

Re: Adam. You are right. it is about vertical. I think I tried every possible combination but there is no such option.

Re: Rafi. I agree with you. I can not think of accordions and drilldowns to be horizontal.

You commented on Amir's post over 3 years

It is resolved in 6.1.2

You commented on Amir's post over 3 years

Yes.

FF 43.0.4
Chrome: 47
Edge

You commented on Amir's post over 3 years

Thanks Rafi,

I used the Sass version and change the following lines and it worked!
$text-direction: rtl;
$opposite-direction: left;
$default-float: right;

Thanks for your reply.

Posts Followed

No Content

Following

  • No Content

Followers

  • No Content