Navigation query - can this be done in Blocs?

I Need Help
1

Hi all,
Using Blocs 3.4.2, I’m hoping to reproduce something similar to the image-based navigation I used in an older, non-Blocs site, and it would help to know if it is possible (and if so, how?).

Here’s where you can look at the old site:
https://www.endaxi.graphics/delfini/

Any assistance appreciated.

While I’m here, Happy New Year to all!

2

I had initially searched the Forum for “Swap image” etc., with no luck to try and find a solution.
Having found a spare hour, I found a Forum post by @sfoster71 titled " Needing Mouseover Help", as a result of which I have more or less got this worked out, so thanks to @sfoster71 for his assistance!

As an add-on to his post, I have discovered that you can also add the ‘hover’ and ‘active’ graphics by dragging from the Assets Panel, and then finally re-set the ‘blank’ image.

Hope this helps anyone interested!

3

It is possible to make your menu, quickly, just use the “active” class in configuration and adjust the class in normal mode and ready is all you would have to do for each menu link if they go different

Is there any reason to use that type of menu and not another?

4

@nelo thanks for your comment. I’m all for simplicity, but just wanted to do a menu which looked a bit different after using the standard Blocs navbar in all my previous Blocs sites.

Can you perhaps explain in a bit more detail? I’m still trying to get my head around classes, largely as web work at the moment is a bit stop-start, as a result of which I have not had the time to get in the practice I’d have liked, thus it hasn’t all sunk in yet.

Thanks for any assistance provided.

5
  1. add the “active” class in the project settings

Captura de Pantalla 2020-01-02 a la(s) 10.41.38 p.m..png861×534 57.4 KB

  1. add the same class to the class editor and edit as you like

Captura de Pantalla 2020-01-02 a la(s) 10.42.28 p.m..png775×549 76.9 KB

  1. All settings are seen in the browser, example

Captura de Pantalla 2020-01-02 a la(s) 10.42.59 p.m..png1280×425 31.2 KB
Captura de Pantalla 2020-01-02 a la(s) 10.43.04 p.m..png1271×423 20.6 KB

6

@nelo, Apologies for my offensively late reply. So many other things to attend to here.
Thanks for your detailed guidance. I will find time in the coming week to work through it.
Very best wishes, and thanks for your help.
Stay clear of the coronavirus.

7

Hi @nelo,

After a prolonged delay due to searching for replacement work for some lost due to Covid-19, I am finally getting into developing the navbar you kindly guided me on as above (and another like it), but I immediately had a further question to ask… but have realised there’s a simple solution.

I understand how to set up the graphics for the navbar, but I wondered how to set up the ‘text version’ for the toggle for smaller devices/narrower windows.

I have realised during a coffee break that the easy solution is to toggle between two navbars… the ‘graphic version’ for larger screens, and a ‘text version’ for the hamburger menu for smaller devices. I just need to set the visibility for each screen size.

Thought I’d leave this updated post just in case anyone else had the same query…