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:
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.
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/
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’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:
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
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.
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
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
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.