Top bar menu wonky with FP2.x

[hawbsl]

Through last year we used FoundationPress for dozens of projects, grew more and more comfortable with it and found it just a great tool. Node.js and grunt and all that command line stuff was new to us last year but we got there in the end.

Coming back to it fresh this year I find that it's had a big update.

So I grapple once again with node.js and grunt (no, now it's gulp), and eventually it's sort of working. The command line reported a bunch of errors during the npm install but live reload is working and sass is compiling (I don't really know what gulp is or does but those as I understand it are the two things i need gulp for) so I'm assuming I can ignore those errors.

However the menu seems pretty wonky.

The site title off to the left ... the alignment feels wrong. The single page in the menu off to the right has doubled up.

We haven't introduced a line of php or css yet, this is absolute fresh install (oh, except the yellow, that's just to check sass compiling)

Could this be to do with those npm errors during install? Or something else?

[colin-marshall]

What were the npm errors and what version of node are you on?

[hawbsl]

@colin-marshall i'll run it again from start and check.

[hawbsl]

@colin-marshall node is 4.2.6

[colin-marshall]

Thanks! Now what were the errors?

[hawbsl]

OK. This is on Windows.
I assume we don't care too much about WARN / deprecated.

These seem to be the principal errors:

• Can't find Python executable
• PhantomJS not found on Path
• EPERM: operation not permitted

Should I post screenshots?

As I mentioned, maybe these don't matter. Sass compiles and live reload works. Do I need to worry? So could my menus/layout/positioning problems be solved by fixing all of the above? My old FP1.x projects were perfectly laid out from the start.

[FlatspinZA]

As far as I can tell, having done some fresh install recently myself, the Python errors can be ignored unless you're planning on using Python & the PhantomJS error resolves itself.

[colin-marshall]

The WARN / deprecated items can be ignored, as you assumed.

EPERM makes me believe you may have a permissions issue somewhere. I'm not sure how to fix npm permissions on windows. Can you copy all the lines regarding the errors from your console and post them here? When you do npm run watch do you get any errors in the console as it compiles everything?

[photonomad]

I'm on a mac, but have the same problem with the top-bar text pushed to the bottom vs. being middle-aligned.. However, my top-bar-right items are correctly displaying horizontally as table cells.

(the green primary color is my sass test)

These are the warnings I got during npm install:

npm WARN deprecated gulp-minify-css@1.2.3: Please use gulp-cssnano instead.
npm WARN deprecated lodash@1.0.2: lodash@<2.0.0 is no longer maintained. Upgrade to lodash@^3.0.0
npm WARN deprecated npmconf@2.1.2: this package has been reintegrated into npm and is now out of date with respect to npm
npm WARN deprecated npmconf@2.1.1: this package has been reintegrated into npm and is now out of date with respect to npm
npm WARN prefer global marked@0.3.5 should be installed with -g
npm WARN prefer global node-gyp@3.2.1 should be installed with -g

I do not have Sass compiling errors when using npm run watch. The first time I ran npm run watch, it instructed me to add the browser-sync snippet (which I did - in the footer.php file).

I opened issue #705 before seeing this. I'll close it now and follow this thread, unless anyone objects...

[colin-marshall]

On a fresh install, try running git reset --hard f600bf258e170900902c4803f3cdf70aac961825 and see if that fixes it. @olefredrik made some changes to the navigation last week and running this command will revert the repo to a point in time just prior to when those changes were made.

[msacchetti]

@colin-marshall that did not work.

I just did this to fix it for now...

.topbar .menu a {
    line-height: 13px;
}

[photonomad]

I also tried @colin-marshall's suggestion without success. Modified the _navigation.scss for now as well.

[FlatspinZA]

@photonomad I'm getting the same behaviour with the text in the top bar - Windows 10 Pro i.e. sitting on the bottom of the top bar.

[erwinpagulong]

i also tried this and it works fine.

.topbar .menu a {
line-height: 1;
}

Erwin B. Pagulong
Front End Web Developer

Mobile: +63 908 7793 773
Web: http://erwinpagulong.com/

On Fri, Feb 5, 2016 at 1:13 PM, FlatspinZA notifications@github.com wrote:

@photonomad https://github.com/photonomad I'm getting the same
behaviour with the text in the top bar - Windows 10 Pro i.e. sitting on the
bottom of the top bar.

—
Reply to this email directly or view it on GitHub
#704 (comment)
.

[FlatspinZA]

It seems the mobile top-bar is not affected at all i.e. displays correctly.

I corrected as follows:

.menu>li:not(.menu-text)>a { padding: 0; padding-left: 1rem; }

I am not a pro, just a tinkerer, so maybe @olefredrik can advise us as to why this is happening without the adjustments?

Thank you, BTW, @erwinpagulong

[colin-marshall]

The vertical alignment problem is due to a change in Foundation 6.1.2. If you run bower install foundation-sites#6.1.1 that problem goes away. Thanks @erwinpagulong for the quick fix!

There is a separate issue with dropdowns/submenus in the top-bar looks like it was introduced with @olefredrik's latest navigation changes. Hopefully he gets a minute to have a look soon.

[olefredrik]

Just discovered that a few errors with the topbar was introduced in my latest navigation changes. Should be fixed now #714 .

[colin-marshall]

@olefredrik dropdown menus/submenus in the top-bar have some issues still.

1. The caret/arrow marking a dropdown menu is too close to the text and not vertically aligned with the text. (it appears to the upper right of the text, see screenshots below)
2. If there is a dropdown menu as the last item in the menu (on the far right), the dropdown opens to the right which makes it go partially off the screen.
   
3. If there is a dropdown menu within a dropdown menu, it opens below the parent dropdown menu, instead of on the same level as the menu item it comes from.
   

[olefredrik]

@colin-marshall : Thanks for pointing out the issues. These are, as far as I can tell, related to the default behaviour for drop-downs in Foundation. If we head over to foundation.zurb.com and inspect the menu, the same thing will happen there. If you remove the Getting started button on the right (with devtools), you will see that the submenu goes off the screen, just as in the example you pasted above.

A fix for the caret positioning on the first-level menu item, is to simply remove the visibility for the caret. There is no caret indicating that there is a submenu on the first level in foundation.zurb.com either. #723