My CSS Framework progresses well and is getting all new components.
I previously wrote about a new Jumbotron feature. The Jumbotron can be any size, although it is best used to cover the entire width and height of the browser's view. You can fill it with an image and it will cover edge to edge, proportionately. It has a "marquee" feature that can position a marquee with almost any content in it along three positions on the x axis and three positions on the y axis. That provides a total of nine locations to suit just about any positioning you could image. I expect my Jumbotron is one of the most flexible available.
But ... it does suffer the same issue as other jumbotrons (or hero panels). That is what to do about navigation. Vertical navigation is almost impossible to implement without ruining the effect of the jumbotron. Only a very slim icon-only vertical navigation bar would be possible. A horizontal navigation bar can also be obtrusive and cover the jumbotron effect, especially when you try to use the menu features and drop downs.
I've come up with a technique to give a full horizontal navigation bar (even a mega-menu will work) and shift it from the top of the screen to the bottom – and have a transparency so that the image underneath can be seen, yet maintain readability of the navigation bar text. As you scroll, the horizontal navigation bar scrolls, keeping its position at the bottom of the Jumbotron panel. When it reaches the top of the screen, the navigation bar detaches and becomes fixed to the top of the screen ... with a transition to change the partially transparent background to fully opaque. The transition effect takes 0.5 seconds. When scrolling back down, the transition changes from fully opaque to partially transparent in 1 second. There is no "bouncing" effect on reaching the top of the screen or leaving the top of the screen.
Here's some screenshots ... note that for development purposes, I use an image from unsplash. Many thanks to Philip Schroeder.
test