Menu icon Foundation

Designer

My Posts


  • 2
    Replies
  • Right arrow customisation in Topbar

    By PhilW

    topbar

    Hi all! Anyone got any quick tips on customising the right-arrow on second level drop-downs in top-bar? Even a rotated version of the down arrow would be great so that they match... Any info greatly appreciated! Cheers

    Last Reply by PhilW over 3 years ago


  • NEW
  • Reveal Modal as Paypal Loader?

    By PhilW

    modalrevealsites

    Thought I was being super clever (!) using a reveal modal attached to a submit button on a checkout cart screen to quickly add a "Please wait" pop-up whilst the form processes and the paypal gateway appears - but I'm guessing that the modal actually stops... (continued)






My Comments

PhilW commented on Matt Restorff's post about 3 years

I was stuck on this too...
A few changes between F5 and F6 – this is what you need now instead...
<div class="column text-center medium-text-left">

PhilW commented on Roy Finaly's post over 3 years

25px is quite large for a corner radius so will no doubt create the effect you are seeing...

Hope that helps!

PhilW commented on PhilW's post over 3 years

Thanks Rafi for pointing out the right area to me :-)

I actually swapped it out for a FontAwesome icon...

Perfect!

.top-bar-section .has-dropdown .dropdown li.has-dropdown > a:after {
    font-family: FontAwesome;
    content: "\f105";
    margin-top: -3px;
}

PhilW commented on Alex Scott's post over 4 years

I think it was a typo Rafi

Spotted the correct one on Twitter

Http://www.alxs.co.uk

PhilW commented on PhilW's post over 4 years

Fixed my disappearing menu....

It was my hack to left align dropdown menu on right aligned topbar section...

.top-bar-section ul.right li .dropdown {
  left: 0; right: auto;
  }

Stuffed it into a media query instead and all good :-)

PhilW commented on PhilW's post over 4 years

Just a disappearing mobile second level menu to fix now... :-)

It just zooms off to the left never to be seen again!

PhilW commented on PhilW's post over 4 years

So I've fixed it now...

Needed to override the line-height too which was still inheriting the 70px.

Used these in the end:

ul.dropdown li {
    height: rem-calc(45);
}

ul.dropdown li a {
  height: rem-calc(45);
  line-height: rem-calc(45) !important;
}

PhilW commented on PhilW's post over 4 years

Thanks Rafi,

Almost there... That reduces the dropdown li height but my hovers in that dropdown are now off...

If you've got a minute...

http://goo.gl/HaIb6v

The "Services" menu is the one with the dropdown

I actually made the li height 45 like a standard top-bar.

Cheers

PhilW commented on PhilW's post over 4 years

Still struggling to get independent control of dropdown heights. I've just made a topbar 70px in height and want the dropdowns to be a sensible height. Not sure where to look. Have tried every scss setting and css override I can think of but still stuck...

Many thanks

PhilW commented on PhilW's post over 4 years

Still struggling to get independent control of dropdown heights. I've just mad a topbar 70px in height and want the dropdowns to be a sensible height. Not sure where to look. Have tried every scss setting and css override I can think of but still stuck...

Many thanks

Posts Followed


  • 2
    Replies
  • Text Align not working

    By Matt Restorff

    textalignhelperstypography

    Working on a foundation 6 project. I'm trying to add text-right and small-text-center type classes to a row or column.. or anything for that matter. They just don't seem to be working. I've included the helpers and typography styles. Is there anything I m... (continued)

    Last Reply by PhilW about 3 years ago


  • 2
    Replies
  • split button FA6 example

    By Roy Finaly

    split buttons

    I am trying to make the example from http://zurb.com/building-blocks/social-login-split-buttons to work with foundation 6 but when setting up the $button-radius: 25px !default; I get two round buttons. Any help will be greatly appropriated.

    Last Reply by Roy Finaly over 3 years ago


Following

    No Content

Followers

My Posts







My Comments

You commented on Matt Restorff's post about 3 years

I was stuck on this too...
A few changes between F5 and F6 – this is what you need now instead...
<div class="column text-center medium-text-left">

You commented on Roy Finaly's post over 3 years

25px is quite large for a corner radius so will no doubt create the effect you are seeing...

Hope that helps!

You commented on PhilW's post over 3 years

Thanks Rafi for pointing out the right area to me :-)

I actually swapped it out for a FontAwesome icon...

Perfect!

.top-bar-section .has-dropdown .dropdown li.has-dropdown > a:after {
    font-family: FontAwesome;
    content: "\f105";
    margin-top: -3px;
}

You commented on Alex Scott's post over 4 years

I think it was a typo Rafi

Spotted the correct one on Twitter

Http://www.alxs.co.uk

You commented on PhilW's post over 4 years

Fixed my disappearing menu....

It was my hack to left align dropdown menu on right aligned topbar section...

.top-bar-section ul.right li .dropdown {
  left: 0; right: auto;
  }

Stuffed it into a media query instead and all good :-)

You commented on PhilW's post over 4 years

Just a disappearing mobile second level menu to fix now... :-)

It just zooms off to the left never to be seen again!

You commented on PhilW's post over 4 years

So I've fixed it now...

Needed to override the line-height too which was still inheriting the 70px.

Used these in the end:

ul.dropdown li {
    height: rem-calc(45);
}

ul.dropdown li a {
  height: rem-calc(45);
  line-height: rem-calc(45) !important;
}

You commented on PhilW's post over 4 years

Thanks Rafi,

Almost there... That reduces the dropdown li height but my hovers in that dropdown are now off...

If you've got a minute...

http://goo.gl/HaIb6v

The "Services" menu is the one with the dropdown

I actually made the li height 45 like a standard top-bar.

Cheers

You commented on PhilW's post over 4 years

Still struggling to get independent control of dropdown heights. I've just made a topbar 70px in height and want the dropdowns to be a sensible height. Not sure where to look. Have tried every scss setting and css override I can think of but still stuck...

Many thanks

You commented on PhilW's post over 4 years

Still struggling to get independent control of dropdown heights. I've just mad a topbar 70px in height and want the dropdowns to be a sensible height. Not sure where to look. Have tried every scss setting and css override I can think of but still stuck...

Many thanks

Posts Followed



Following

  • No Content

Followers

  • No Content