Nav bar

I Need Help
1

Hello everyone,

I would like to have some help on how to modify the navbar.
I created a flex block that stays sticky (I didn’t use hero because I would like to have the same in every block in the global area) and I would like to:

  1. change color (now transparent) by scrolling;
  2. make the navbar smaller when scrolling.

Can anyone help me?
Thanks

2

You can choose a sticky navbar out of the box of blocsapp. You can even style it.
No need for a bloc with flex attributes.

But for your needs the only way I see is the new “smartnav bric” of @Whittfield.
Although I don’t know the responsive behaviour by now.

3

Hello there,

A while ago I had a similar need and I solved it by putting a CSS and a JS to solve them.

The transparency thing with this class to the menu bloc:

.menu {
background-color: rgba(255, 255, 255, 0.80);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}

The menu and its size when scrolling, I added a class and a JS to the logo in SVG format that when passing a certain point on the screen will reduce its size and this in turn reduces the size of the menu:

CSS:

.box-logo {
transition: width 1s, height 1s, transform 1s;
}

JS:

window.onscroll = function() {
growShrinkLogo()
};

var Logo = document.getElementById(“logo”);
var endOfDocumentTop = 150;
var size = 0;

function growShrinkLogo() {
var scroll = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;

if (size == 0 && scroll > endOfDocumentTop) {
Logo.style.width = ‘150px’;
size = 1;
} else if(size == 1 && scroll <= endOfDocumentTop){
Logo.style.width = ‘250px’;
size = 0;
}
}

1 Like
5

I’ve added some additional options for responsive. An update is just around the corner.

5 Likes
6

Thank you @Whittfield e @CapturaHD for your help, i will definitely try both solutions. Very kind

7

Thanks for this - looking forward to it!
It’s an amazing bric.

I just bought Read More for its simplicity & styling and WOW! It’s perfect! Amazing work @Whittfield

1 Like
8

Nice. Thank you.

9

Just a heads up, I have an update for additional responsive settings. I haven’t uploaded it yet, but it’s coming in the next day or two.

You set the breakpoint and the additional settings will kick in.

These Min and Max sizes will take over.

smartnav-moble

2 Likes
10

@Whittfield when do you plan on fixing the ID issue with your Brics?

11

If you are referring to the update notice, reports from early today are that it’s fixed.

12

I think he means the store IDs not matching the bric ID that I mentioned earlier.

13

As long as there is access to have the version you paid for I think it’s not really a problem.

If there was a longer list of matches I don’t think it would even be an issue. But the fact that it’s only returning one item (for now) it seem’s odd to some.

As a vendor I say let’s leave it for now and not be too quick to remove it.

14

If you look at the brics from Pete, Norm or Lucas etc none of them do this because they simply use the same ID for the bric and the store. At that point Blocs doesn’t show the store option if already installed.

15

oh okay, I see.

16

@Whittfield every time I open Blocs a window pops up and says there are updates. LOL How many time do I need to update, before Blocs sees it has been updated.
Your Brics still say I need to purchase them. I got it, let me know how to completely remove them and I will re-install.

17

@KBConcepts you will find the Blocs Knowledge base has a lot of answers for things like that.

You use the Blocs Extension Manager to remove Custom Brics.

https://help.blocsapp.com/knowledge-base/extension-manager/

18

by now you shouldn’t be seeing the update notices. that has been fixed and reports from this thread yesterday confirmed it’s no longer an issue.

restart everything and check again.