Fun While It Lasted!

@norm [quote=“Eldar, post:2, topic:6615”]
I also wish there were more options with navigation,
[/quote]

I second that too. Even though it is possible to do this stuff with the ClassEditor, it does demand a knowledge of nav bar effects to do it. In my experience, nav bars are something that many struggle with and it’s an area that some more basic options would be great to have in Blocs.

Aloha Eldar:

I certainly was not trying to use Blocs the same way as I would have used RW, in fact, I purposely approached it with an open mind. Telling myself this is something new so treat it that way and try to understand the approach it takes and leave all the RW baggage at the door.

I also agree that the Blocs approach is very powerful, but something this simple why should it be so cumbersome. Just expose the data I need to set and be done with it. Why jump through hoops to make it happen.

Here is a link to the site I have been trying to replicate in Blocs, it has the nav style I have been trying unsuccessfully to achieve. NOTE: I have been able to get some of the elements working but not everything.

Navbar Example

I think the thing that was the most annoying was the fact that to achieve one aspect fo the behavior I had to have an instance of the navbar on each page, that just did not seem right to me.

One other thing I could not achieve was the correct “sticky” behavior of the navbar. When it was at the bottom of the main banner the minute the page was scrolled the navbar would jump to the top of the screen. The correct behavior should be that when scrolling the page and the navbar gets tot he top of the screen it stays sticks there. This behavior can be seen on the site.

I should have been more explicit in my original post that when it comes to generating the content for this site I found Blocs to be awesome and it allowed me create great looking content. I think the whole navbar experience just blindsided me because it seemed so unnecessarily cumbersome to a new user! I’m sure to the old hands it is a simple and intuitive approach. It certainly was not intuitive to me.

I’m willing to keep at if I can find a solution to my problems as I certainly want Blocs to work for me as I see more potential for it down the road, especially if some things get cleaned up and streamlined, which I’m sure they will.

I’ll change my position and keep an open mind!

Aloha @webdeersign:

Yes, that is the exact approach I was using and I got it to work for hovering but I could never get it to work for the .active page, such that the page you were on displayed an indicator that it was in fact the current page. I was also trying to color the title and place a background behind it. Which I was able to do through classes, except for the active page part of the process.

I was also disconcerted by the fact that people were recommending disconnecting the navbar from the primary menu in order to make this work, which involved duplicating the navbar on every page and then styling the title, which again I could not get to work.

Usually when something doesn’t work in these type of situations, it is because something is overriding it, so in this case you may be changing the title but then it is being set back to a colour elsewhere.

Why not save your file and allow others here to download it and get it to where you want it to be.

I can certainly do that even though I might be embarrassed by the fact the mess I have made. At this point in time I had scaled it back to just 2 pages in an attempt to get it to work.

Here is the project in it’s current state.

HCC-WEBSITE-2019-r2.bloc.zip (181.3 KB)

The active state doesn’t refer to the active page, it refers to the state of the element ie when it is clicked.

What you actually need is the active page link to have an extra class applied to it but only when the page is active. I’ve never got around to adding this but I’ll take a look.

Then you would just set this class ( let’s call it .active-state) to the styling you want and when the current url matched this link it has this styling.

1 Like

Agree, however the navigation is without a doubt the most complex part of the site. Making it easy to edit and flexible enough for pros is one of my biggest challenges.

Aloha Norm:

That all makes sense, where does one find the active page link?

I was aware that the active state was the pressed state as I did want my styling added there, but I was not aware of the active page link, thanks for that.

I have confidence based on what I have observed to date with Blocs that you will come up with an elegant solution. I think it will make a big difference and certainly make it more approachable.

You would need to manually do it on every page. But the Blocs way to handle this would be to automate it.

We are in beta with 3.2 so if I get a chance between bug fixing and testing I’ll see if I can get this bundled in.

2 Likes

Having the abilty for a active state (active page link) would be a nice feature for the Nav. It can be done by adding a new nav for each page and then stying the link but it’s a lot of work. Not bad if you only have couple of pages but still it seems like we could have this out of the box.

Thanks for looking.
casey

3 Likes

Norm: I think it would be a huge win if this could be automated by Blocs, I know it would certainly make my day!

3 Likes

This was about 30 mins work and seemed essential so I’ve added this in 3.2 build 5, I should get that build out today.

Heres how it works.

• In project settings set the class you would like assigned to active page links (page links that match URL). Bootstrap has a built in one active or you can create your own.

• Create your active state class (if custom) via the Class Manager and give it some styling ( make the text red or something).

Thats it.

When you export Blocs will do the rest and your active navigation page links will work like this:

Screen%20Recording%20(Blocs)

9 Likes

Very Cool @Norm ! :smile:

1 Like

@Norm, that is awesome, what a rock star! I’ll be waiting with bated breath for the BETA 5 build!

1 Like

@Norm, do you still have to decouple from the primary menu or can you stay with it as the data source?

1 Like

Is this what you’re after?

@sim, that looks promising I will take a look at it, I would have preferred if it could have been done with no code, but for now all I care about is that there be a smoother transition. Thanks!

It can be data driven.

Yes, I tried it and it does work.

Although I did run into a problem when trying to style the nav links in that once I set the data source to PRIMARY MENU then Blocs LOCKS the link items int he list. Trying to select one of these links in order to attach a class does not work because you cannot select the locked item. At least in BETA 5 you cannot select the locked item. This makes it very hard to style the menu items. I can see an argument for locking them, but how does one style them if they cannot be selected?

1 Like

You can style them via the project settings text options.