I think that's part of the problem you're having. This template is example of what's possible with Hype, but it's explained that this is a tough way to work. Even the article I wrote says… “The software isn’t optimized for that job. But for a static website… eh… it can kinda work.”
So, the reason this is difficult is because Hype is more like Flash than it is like Dreamweaver. Trying to use Hype for page layout is going to have some difficulty.
Similarly, the template is designed to have a menu. By taking out the menu, and having a different element stay stuck, you're entering custom code land. Here's an example of why that's a problem…
If you view the source code on your page / show the console, there are errors being thrown. That's because the menu was removed. Every time the page is scrolled, the JavaScript code is looking for that missing menu.
So, if you don't want the sticky menu… or menu at all… you might want to remove the JavaScript being run on Layout Load…
(That's in both layouts… Small and Medium.)
But also, why do you want to give yourself more work? It looks like the menu might be useful with the current setup. I'm surprised that you removed it. I suppose it is a design choice, as you now have that big date box.
But if the primary goal is to just have a static website, why fuss with custom features?
It seems that emphasizing the date… Saturday, May 10th …is another priority. That's a new feature. It's extra work. You want the date box to tilt and expand past the other parts of the banner.
It looks like you got that almost working though, as I see the banner using a “sticky” class. The problem is that some text is now hidden underneath the banner.
I did a little experiment and tried things a little different. I selected all of the elements related to the banner and then grouped them. I gave that group element a class name of “banner”.
It was also important to make sure that the group was flexible…
Do you see the pins and the arrows? That's so the banner stays at the top and stretches horizontally.
Then I added CSS to the Head HTML…
.banner {
position: fixed !important;
top: 0px !important;
}
When I did that, the banner stayed at the top. There wasn't text underneath, which seems to be a problem in your example. Although, after making these changes, the menu doesn't look right in my example either… and the banner hides text when clicking a button.
So, that goes back to the main idea. By trying to change the template to do things it wasn't designed to do, that creates a lot of work.
Possible Solutions…
- Keep it simple — Use the template as designed. Alternatively, instead of making the whole banner sticky, maybe just make the date sticky.
- Start from scratch — By starting from the beginning, and not using the template, you're not having to work against existing code or previous design choices. It's tougher at first, but you'll likely learn more and possibly have a Hype project that's easier to maintain / update.
- Keep Fighting — You are close. There are some problems, but they seem fixable. (It's just a lot of work, even for experienced developers.) You can start by write down exactly what's not working and then try solving the problems one at a time.
I see at least three problems…
- The text is blurry. Is there a missing font?
- The text is hidden under the banner.
- The text boxes are shifted to the left.
And again, there's the JavaScript error by removing the Menu.
The general idea is good though. I created the Hype page years ago. It's been nice not having to mess with it. I did have to update some info, but that wasn't too bad. I just went back to the Hype Template.