Menus - officially frustrated with Foundation Top Bar

Hello friends!

Menus…

I have tried many, but struggled, so I have made do with Joe’s Top Bar for a long while. It is good on desktop or tablet, becomes a problem on Mobile (50% + of my traffic these days). The problem is Logos - mine tend to incorporate text, so long and thin. Today it has come to a head with a prototype site:

BWWC

4 hours in, it is starting to look OK, until I tested on mobile: biggest issue - the logo disappears on mobile, so I have a second logo for mobile only. I’ve had this on one of my own sites for a long time and it is passable, but ugly.

Any recommendations?

I highly recommend checking out @willwood’s (Stacks for Stacks) Gator stack https://stacks4stacks.com/gator/ It does everything a good menu should do - including work as people expect menus to work on mobile sites when there are lots of submenus. There is a free demo version, so it it doesn’t work out for you, nothing lost but a bit of time. https://stacks4stacks.com/gator/

1 Like

If you could be a little more specific as to what you want it to look like on mobile/desktop
. Someone can probably help.

Thanks Dave, I’ll give it a try - demo is a great idea as I have ended up buying several without success

Scott, good point.

I want a simple menu that allows a mobile only icon for all device resolutions, with the option of a conventional horizontal menu for desktop.

With Top Bar there have been a number of issues, key being that most non-square logos interfere with the menu or vice versa, on small devices such iPhone 4 / SE. I have been forced to add a dedicated logo stack for mobile only, as illustrated on the screen shot.

I used one excellent menu for a while, but it consumed enormous resources (it took site render time from a minute to 5, with a 30 page site) and slowed down the site considerably.

The search continues, but Dave’s option looks interesting

I love Clean Menu from One Little Designer.

https://onelittledesigner.com/rapidweaver-stack/clean-menu/

Thanks everyone for thoughts here, appreciated! I have tried a few and getting closer.

Gator is interesting and it works, but styling options are slightly limited as logos need to be added as extra content and most significantly, it costs the same as Rapid Weaver(!)

Some of the 1LD stuff is great (forms), but my menu experience started this search…

I’m looking at @BWD Top Bar Surgeon - hoping I can track down the menu styling stack.

I’ll update with more thoughts as this progresses. Thanks again!

I’m not sure I am understanding your issue.
I used your logo in top bar and it worked. Please explain, it may just be a matter of cropping the image differently. The Image height will scall with the width.
Here is what I got with no modifications:

Indeed, you are correct Scott, but a good number of users have smaller / older phones - iPhone 4/5/SE gives this:

Screenshot 2020-01-30 at 16.03.25

My options are hide logo on mobile and add as a seperate stack (which I normally do with Top Bar) or find another solution. As I mentioned Gator does work, with some limitations, but the cost here is £46 / US$59

That image is iPhone 5

There are another solutions also…
1:
Set top bar to not show the logo
Turn on TopBar Extra Zone set to drop zone and position left
Drop an image stack in the ExtraZone and your image into that
Set the image size (image stack) for each device (150px-200px is a good place to start)
On desktop it will show left, on mobile, it will show as last menu selection.

2:
Use the visibility settings to make a separate mobile-only menu
put the menu in the right side of a two-column stack and the logo in the left

3
Crop your image so it is more square - the transparent space above and below the actual logo won’t show but will cause the scaling to give you something closer to what you are after

1 Like

This is incredibly helpful and I will try this later on, thank you.

I’m puzzled - the old SE here is giving me the same result as the simulator I test with.

In a parallel thread, I was trying to find a copy of an old BWD stack and @steveb suggested this option specifically for Top Bar:

It is has cured my WildPhotographer site, but not the BWWC which needs more experimentation and a revised logo

With the two options presented, there are some very helpful options for me and doubtless others too - I have 2 other sites to work on with similar issues, so I will use both!

Thank you!

1 Like

Hi Jonny5.

I just read your post.
At the moment I use “Clean Menu” for a project (great stack, nice navigation!).

But after testing it online I noticed that the side (when using “Cleam Manu”) suddenly has a little horizontal scroll and a small bar at the right side after "scrolling right/left.
( I tested it with iPad, Mac, … and even at the demo-site of 1LD I noticed this behavior)

Can you possibly also confirm this behavior?
Or does everything work always ok with your stack?

I can’t see anything but that doesn’t mean it isn’t there!
I have used it on this website if you want to check it yourself. I’m not sure why you are scrolling left and right in the menu though as any responsive site should ‘fit’ to your screen size.