Menu icon Foundation

My Posts








  • NEW
  • Ad Blocker alert

    By Daniel Lewandowski

    Callout

    Wondering if there's a good way to ad an alert message at the top of a page with the alert to turn off ad blocking to view the page content properly? A closeable callout would work perfect, but how do you check to see if they're using ad blocking extensi... (continued)




My Comments

Daniel Lewandowski commented on Mike Manfrin's post 12 days

I'm also running into this issue but the main thing is that the first sticky element has a flexible height from wrapping text depending on the viewport width. 
 
Is there a way to do a recalc or mutateme on the sticky elements and/or have a variable bottom sticky point?

Daniel Lewandowski commented on Daniel Lewandowski's post about 1 month

FIXED: Had a transition setting on <a> elements in my SASS. Works perfect now.

Daniel Lewandowski commented on Daniel Lewandowski's post 5 months

Hi Val-
Thanks for your thoughts! I think you might be onto something.
The trickiest part is the priority feature that moves each menu option into the sidebar as the window collapses... Does that mean having to 2 sets of nav links? 1 for the horizontal bar, 1 for the sidebar, and show/hide as needed? Would be tough to maintain. 
Look forward to seeing your codepen whenever you get the chance, very much appreciated! I'll try and do the same and share. 
 
 

Daniel Lewandowski commented on Joe Windeknecht's post 8 months

Thank you! I added quite a lot of other classes to get the logo and title to stay locked up together, but overall it's working superb. 

Daniel Lewandowski commented on Joe Windeknecht's post 8 months

Nevermind! I'm an idiot, linking to the wrong CSS file. Thanks!

Daniel Lewandowski commented on Joe Windeknecht's post 8 months

Thanks, Val!
I tried copying and pasting your layout directly into my files and the links are still stuck at the top and not in the middle as they should be. Any idea what I'm doing wrong?
I'm also using dropdowns in some links and it's a sticky container. 
See a live example here: http://www.dannylewandowski.com/_cog-DEV/AVM/index.html

Daniel Lewandowski commented on Joe Windeknecht's post 8 months

Looking at these some more and am wondering if there's a flexbox solution? Adding extra padding on the top forces the links to be too far away from the logo when the right side wraps underneath. Would suck to have to write more and more media queries just for that.
 
Some kind of stack/unstack option without the need for extra padding, perhaps?
 
 

Daniel Lewandowski commented on Joe Windeknecht's post 8 months

Wow, thank you! will check it out and try those options. Much appreciated!

Daniel Lewandowski commented on Joe Windeknecht's post 8 months

I'm trying to do the same and have tried several things with no luck:

Add a .row.align-middle > .columns > {content}
Add .align-middle to the .top-bar, .top-bar-left, .top-bar-right items
Tried the CSS only fix of using a relative item >  aboslute item > top: 50%; transform: translateY(-50%)
When using the CSS only fix, that works but the right side doesn't wrap under the left, it overlaps and covers which is not desired.

Noticed that the top-bar and top-bar li's are set to display:table and display:cell. Is there a reason for this?
When I change the .top-bar:before and .top-bar:after to display: flex that helps the left side but not the right side.
Don't want to set a fixed height for header either.
Any help is greatly appreciated!
 
 

Daniel Lewandowski commented on Irfan Sattar's post 8 months

Needing a solution for this as well. Is there a flexbox option?

Posts Followed







  • 4
    Replies
  • Vertical align

    By noex

    ulli

    Hi Experts, how to set the top-bar in vertical-align: middle? i tried overriding the css but no effect. Pls. refer to the code attach if i missed something. thanks in advance. noex

    Last Reply by Daniel Lewandowski 8 months ago





Following

    No Content

Followers

My Posts

My Comments

You commented on Mike Manfrin's post 12 days

I'm also running into this issue but the main thing is that the first sticky element has a flexible height from wrapping text depending on the viewport width. 
 
Is there a way to do a recalc or mutateme on the sticky elements and/or have a variable bottom sticky point?

You commented on Daniel Lewandowski's post about 1 month

FIXED: Had a transition setting on <a> elements in my SASS. Works perfect now.

You commented on Daniel Lewandowski's post 5 months

Hi Val-
Thanks for your thoughts! I think you might be onto something.
The trickiest part is the priority feature that moves each menu option into the sidebar as the window collapses... Does that mean having to 2 sets of nav links? 1 for the horizontal bar, 1 for the sidebar, and show/hide as needed? Would be tough to maintain. 
Look forward to seeing your codepen whenever you get the chance, very much appreciated! I'll try and do the same and share. 
 
 

You commented on Joe Windeknecht's post 8 months

Thank you! I added quite a lot of other classes to get the logo and title to stay locked up together, but overall it's working superb. 

You commented on Joe Windeknecht's post 8 months

Nevermind! I'm an idiot, linking to the wrong CSS file. Thanks!

You commented on Joe Windeknecht's post 8 months

Thanks, Val!
I tried copying and pasting your layout directly into my files and the links are still stuck at the top and not in the middle as they should be. Any idea what I'm doing wrong?
I'm also using dropdowns in some links and it's a sticky container. 
See a live example here: http://www.dannylewandowski.com/_cog-DEV/AVM/index.html

You commented on Joe Windeknecht's post 8 months

Looking at these some more and am wondering if there's a flexbox solution? Adding extra padding on the top forces the links to be too far away from the logo when the right side wraps underneath. Would suck to have to write more and more media queries just for that.
 
Some kind of stack/unstack option without the need for extra padding, perhaps?
 
 

You commented on Joe Windeknecht's post 8 months

Wow, thank you! will check it out and try those options. Much appreciated!

You commented on Joe Windeknecht's post 8 months

I'm trying to do the same and have tried several things with no luck:

Add a .row.align-middle > .columns > {content}
Add .align-middle to the .top-bar, .top-bar-left, .top-bar-right items
Tried the CSS only fix of using a relative item >  aboslute item > top: 50%; transform: translateY(-50%)
When using the CSS only fix, that works but the right side doesn't wrap under the left, it overlaps and covers which is not desired.

Noticed that the top-bar and top-bar li's are set to display:table and display:cell. Is there a reason for this?
When I change the .top-bar:before and .top-bar:after to display: flex that helps the left side but not the right side.
Don't want to set a fixed height for header either.
Any help is greatly appreciated!
 
 

You commented on Irfan Sattar's post 8 months

Needing a solution for this as well. Is there a flexbox option?

Posts Followed

Following

  • No Content

Followers

  • No Content