I’m currently making some tweaks to a site I created a while back. One of the things I’d like to do is transform the header on scroll - but not just the size of the logo. I would also like to hide some items and reduce the font size (and possibly the alignment) or remaining text. I’m at a loss as to how to approach…or if it’s even possible. The site can be seen here: https://www.scdiag.com/donotindex/2019/
Upon scroll, I would like the top to look like the screenshot below (notice that the logo and three Call to Action items don’t disappear, but get transformed).
That would be a job for the custom CSS that can be added to any Chroma style.
It will be hard to stretch the remaining content after losing the image though because they are in columns. Hiding col 1 will not let col 2 grow. An image that is left floated would be better. You would need to give that and the leader text a custom class and then simply add a display:none style when scrolled that is targeted at that custom class.
It is going to look a bit unpolished though if they just disappear - it would really need an animation to fade them out quickly and stretch the text.
All this is a lot of effort to lose the icons when you scroll - does it really add anything in doing so? I don’t see that it will even save that much space but perhaps I am missing the point.
Thanks, Tav. I’ll probably let be, be. My client likes the idea of moving everything up on scroll, especially since a large portion of our visitors are on tablets. But, they do not want to hide the three call to action items. We were hoping to go from 171 pixels of header to 90 or so…a savings of ~50%.
I think I’ll work on just reducing the header to begin with…a smaller logo and smaller call to action items.
I’m maybe not understanding what you want to do, but one option, which I’ve used a lot, is to stock a Sidebar inside Chroma, with the aside to the left. Into the aside stick your logo, into the right stick your menu. As the screen reduces width you can set the point at which Sidebar stacks to corrospond with the menu going mobile, and if you want some more content appear next to the mobile menu stick it in a visibility stack set to be hiden above the bp and visible below.
The bike box menu/header area is very messy, it’s unlikely to ever see the light of day (it’s one of my businesses), but you get the idea I’m on about.
Thanks, Steve. I like what you did, especially with the Mail Shot Monkey site. But, in this case, the client really wants the logo and call to actions above the navigation, and for it to stay there (albeit smaller) after scrolling.
The menu on that site would be dead easy to replicate, just use two different menus, styled accordingly. Allow one to scroll off the page as normal, put the other in a chroma set to slide down triggered by a marker, with the marker below the menu that scrolls up.
I use a different menus below the breakpoint (opposed to a mobile version of the full width one) on a lot of site, as that way you get much better control over the mobile version. That Mailshot Monkey site uses a different menu above and below the breakpoint. If I used the desktop version for the mobile version, the links that on desktop are drop downs on mobile would require a click to see them. Most mobile menus handle drop downs this way, but it’s daft, as on mobile you’ve loads of space for lots more items.
Point in case: That UChicago website you linked to has a mess for a mobile menu. Some items are duplicated from the top of the homepage in mobile view, and as you click into the mobile menu, there is no way to back a level.
I reckon most people who make mobile menus totally fail to consider the situations they’re used in. They test them sitting at their desk with both hands available, but fail to realise a large portion of the user base will be using them on the move, perhaps one handed, in a rush, in less than ideal environments.
IMO 90% of menus are poorly thought out in general, and almost all menus available off the shelf for RW are the same. The menu is the single most important aspect of any website, yet it’s about the most overlooked element on most RW sites.
I do the same re mobile/desktop menus.
I use the visibility stack to contain the setup I want on desktop and a different setup for mobile.
Much more control.
Ha- no need to apologize! As much as I like Foundation, I DESPISE Topbar. It has to be among the worst-thought-out navigation systems ever. Oh, it works okay for big screens (it’s not great, though), but it totally blows on mobile devices.
My go-to menu now is Yuzool’s Navigation (it’s in the site above). It looks and acts great on all devices…and it works exactly as it should on mobile (you can click on a sub header to get to that page or click on a down arrow to see its subs…and then click on one of them).
I’ve seen that in passing, but not looked too closely at it.
Menus on mobile are tough, specially for sites as big as the one you linked right at the top. My guess is, most of the traffic is desktop, so the mobile menu less important. If though that wasn’t the case and the mobile traffic was high/important, I’d say the site structure needs a total rethink for mobile use.
99% of my sites are consumer facing, and leisure based, so they are very big for mobile traffic. I can’t stick to the rule, as often the client has other ideas, but I always try to make any page no more than two clicks from the first drop down menu on mobile. I always do my best make all pages linked directly from the first mobile menu the user sees after clicking the hamburger.
This often dictates how the entire site is built, but that’s fine by me as that’s how important I consider the menu to be. Many think differently though, so it’s all just opinion.
Many thanks, Tav- I owe you a coffee or two! I am meeting with the VP of Marketing later today, and will wait until then to send you anything. It’s quite possible that they’ll go with this (draft) page. I’ll let you know.
We’ve decided to go with this one - it doesn’t go away or get smaller with scroll - but I’ve made it about as short as I can. Everyone here is happy. https://www.scdiag.com/donotindex/2019/
Off subject- I’ve long kept a folder called donotindex at the root of all of my sites, and my robots.txt has a line restricting search engines. So, I was surprised recently when this site showed up in my Google Search Console. I just found out that Google does NOT support using the noindex direction within a robots.txt file. Whoops!
