Menu icon Foundation

Developer | Salt Lake City, UT

Self taught developer, specialized in building custom Wordpress themes.

My Posts

No Content

My Comments

Spencer Merritt commented on Simen Schikulski's post about 5 years

Started with Roots vanilla for about 10 sites, until finding this Gromf theme. Sass > Less, Foundation > Bootstrap, Gulp > Grunt. Takes Roots, which GREAT, and makes it better in every way.

Spencer Merritt commented on Jose Ricardo Milandro Hibaler's post over 5 years

*** SOLVED ***

The CSS that handles the dropdown of the collapsed "top-bar" is:

".top-bar" for closed and ".top-bar.extended" for open.

Now there's not a perfect way to add a transition to the dropdown effect because it's changing the height from whatever your normal "top-bar" height is, to "auto", and you can't use a CSS transition from a fixed height to "auto".

What you CAN do though is change the height of ".top-bar.extended" to a fixed height that fits all your menu items. Then a CSS transition will work from one fixed height to another. Only snag here though is if you add or subtract any menu items you'll have to edit the fixed height of ".top-bar.extended" accordingly.

Example: http://jsfiddle.net/SpeakInCode/d7Qnd/

Hope this helped!

Posts Followed

No Content

Following

    No Content

Followers

My Posts

No Content

My Comments

You commented on Simen Schikulski's post about 5 years

Started with Roots vanilla for about 10 sites, until finding this Gromf theme. Sass > Less, Foundation > Bootstrap, Gulp > Grunt. Takes Roots, which GREAT, and makes it better in every way.

You commented on Jose Ricardo Milandro Hibaler's post over 5 years

*** SOLVED ***

The CSS that handles the dropdown of the collapsed "top-bar" is:

".top-bar" for closed and ".top-bar.extended" for open.

Now there's not a perfect way to add a transition to the dropdown effect because it's changing the height from whatever your normal "top-bar" height is, to "auto", and you can't use a CSS transition from a fixed height to "auto".

What you CAN do though is change the height of ".top-bar.extended" to a fixed height that fits all your menu items. Then a CSS transition will work from one fixed height to another. Only snag here though is if you add or subtract any menu items you'll have to edit the fixed height of ".top-bar.extended" accordingly.

Example: http://jsfiddle.net/SpeakInCode/d7Qnd/

Hope this helped!

Posts Followed

No Content

Following

  • No Content

Followers

  • No Content