Menu icon Foundation
Sticky-shrinknav issue

Hello,

So I have included sticky-shrinknav into the ZURB stack default project (deleting all the content from index.html and adding the Panini for the sticky-shrinknav). I am trying it out and in it's default configuration I have noticed that the menu bar is aligned to the left (in Firefox and Chrome) while it's to the right in Safari - see the image attached. Also the li items are not vertically aligned to the middle of the bar. Writing out the width:100% from .sticky-shrinknav-menu centres the menu, but I haven't solved the vertical alignment issue.

I will be clearing it all out and starting from the beginning to use in my own project. But thought, that those that like the default design might find it a bit broken.

 

building-blockssticky-shrinknav

Hello,

So I have included sticky-shrinknav into the ZURB stack default project (deleting all the content from index.html and adding the Panini for the sticky-shrinknav). I am trying it out and in it's default configuration I have noticed that the menu bar is aligned to the left (in Firefox and Chrome) while it's to the right in Safari - see the image attached. Also the li items are not vertically aligned to the middle of the bar. Writing out the width:100% from .sticky-shrinknav-menu centres the menu, but I haven't solved the vertical alignment issue.

I will be clearing it all out and starting from the beginning to use in my own project. But thought, that those that like the default design might find it a bit broken.

 

albert conor over 2 years ago

I added

left:0;

to .sticky-shrinknav-menu

and that sorted out the jump left/right in firefox/safari