Topic: change content when a .scrolling-navbar is triggered?

markroedel pro asked 5 years ago

My designer is wanting to have something similar to the .scrolling-navbar effect, but with the content of the navbar also reorganizing itself down from a multi-line presentation to a single line in the process.  Any thoughts on how to pull that off (especially if there are pieces of MDBootstrap that'd make it simpler)?

Ollie Vincent pro commented 5 years ago

Hi, Why do you mean by 'presentation'. Can you show an example/mockup to give us an idea? Thanks

Ollie Vincent pro answered 5 years ago

Hi, Do you mean something like this:   This is very basic - I suppose you could add an animation to the moving text.        

markroedel pro commented 5 years ago

In a very simplified form, yes, but that should be enough for me to work from. Looking through that example in Chrome's inspector, it appears that the operative piece of wizardry there is the .top-nav-collapse CSS class. Is that pretty much it, or is there more involved that's not quite as apparent?

Ollie Vincent pro commented 5 years ago

Yes that is correct - I also had to create two title instances - one to slide right and one to slide left. I then removed the animation on mobiles.

markroedel pro answered 5 years ago

We're still early enough in the process that there isn't much to show yet, but essentially he's envisioning the navbar component being used more as a fixed title bar (actual navigation will be from the side via a hamburger menu).  When at the top of the page, it'd have a larger version of our logo, and below that would be a section header.  After scrolling, the logo would shrink along with the .scrolling-navbar, and the section header would change to a smaller font and move to the center of the bar.


Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • User: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No