New Bric - Smart Nav

Custom Brics
1

Smart Nav gives you great control over your navigation bar in Blocs. It’s easy to make the simplest web page more interesting and polished. Smart Nav was built to be a replacement for sticky behavior in Blocs. Don’t use the sticky button, use Smart Nav instead.

You can mix and match the effects easily

The Smart Nav behaviors include:

Scroll Reveal
Navigation bar hides when the user scrolls down and reveals itself when user scrolls up using a smooth animation effect.

Hover Intent
When the nav bar is hidden and users mouse approaches the top of the browser the nav bar reveals itself with a buttery smooth animation.

Dynamic Transparency
Nav becomes transparent as it overlaps hero and returns to normal (based on your settings) when it’s not.

Shrinking Nav and Logo
When the user scrolls down, you can shrink either the nav bar, the logo or both. When the user scrolls up things return to their larger sizes. The extension includes separate settings for the Min and Max sizes of both text portion and image portion of the logo since Blocs supports this.

Alternate Link Colors
Choose alternate link color when the navigation overlaps the Hero. Can work in combination with the dynamic transparency effect.

Spacing and Padding
Convenient settings for spacing of the top level menu items.

In-app Updates
Update the extension from the extension manager.
.

Get Smart Nav

F.A.Q

  1. Does Smart Nav work globally across all pages of my Blocs site?
    A: Yes, place the extension in the Blocs global header.

  2. Does it work with Bootstrap 5?
    A. Yes, Smart Nav works with Blocs and Bootstrap 5.

Get Smart Nav

25 Likes
2

Well that was a nice surprise!!! Again, something which has been made much more simpler in Blocs by the brilliant work of @Whittfield

Another purchase coming your way my friend - top work!!!

1 Like
4

Purchased before I was half way through the video.

1 Like
5

That’s awesome, thanks! :grinning_face_with_smiling_eyes:

1 Like
6

I have to thank you. It looks like this will solve a big headache, especially on sites that have a hero on the home page only.

7

excellent without a doubt it will be one of my favorites! take all my money !!!

8

Very well done! It’s going to be an easy recommendation from me! Congrats!

3 Likes
9

Thanks buddy!

10

Sweet addition to Blocs, thank you! Purchased!
Casey

1 Like
11

Excellent time saver. Thanks @Whittfield for making this :grin:

4 Likes
12

Very interesting features! Must have :sunglasses::+1:

4 Likes
13

Very nice Whittfield!
Nice to see you back in action…

I will buy this for sure!

Rich

1 Like
14

Hey Whittfield, you have the price as “20”?

20 what? :thinking:

15

Fixed now. thanks.

16

This is exactly what I want for the next version of my website this winter. Good job

1 Like
17

Just looking at the PDF file that comes with the download and it says "Next, add the class .hero-bloc to the very first bloc/section below the header. "

Does that apply to any bloc/section below the header or should we interpret that as only applying in cases where there is an actual hero bloc?

18

The hero-bloc should be the first bloc/section below the your global area.

Basically your navbar is just above “the line” and your hero is just below it.

1 Like
19

Really good stuff @Whittfield

1 Like
20

I really want to use the Smart Nav bric that you developed, But I’m having some issues with several brics that have been developed by BlocHead.dev. @Whittfield, you’re aware of them, but nothing is working that had been suggested.
I’m wondering if, I should remove custom-made bric from my new MacBook Pro. Remove the laptop and reinstall everything. What a pain in the rear end would that be.

21

I really like the look of this bric, it’s obvious a lot of thought and time has gone into the various features on offer; superb work @Whittfield - nicely explained with this video too.

Can we also get some recognition for how awesome Whittfield’s voice sounds? Very cool indeed :sunglasses:

1 Like