I’m a beginner with Blocs. I have already watched quite a few tutorials, but I still have a problem that I cannot solve, so please help.
I created a menu bar with links to other pages. I have linked mouse-overs (hovers) to it using classes (the text in the menu bar must change color) but that does not happen in the preview nor in any browser.
Can anyone tell me what to do or where I can find an example in a video? Thank you.
Be great if you posted a link to what you are trying to do.
Rich the Weather Guy
Hi @MarcvanG, yep, I get where you’re coming from. The NavBar is a different beast from other bits to put hover effects on etc - and make them work!.
There are a few threads on here addressing different issues with nav styling, and if you look on YouTube, @Eldar has something there that takes you through various steps.
@MarcvanG
Ok, if you have made your Nav using the menu manager. In the layer tree on the left you should have an item called List it will be under the Nav Bar section. Highlight List and then create a Class (for example Nav-menu).
Now open the class manager. (command+6)
Add a new class called Nav-menu li a (this is basically referencing the original class we created previously, with a ‘li a’ on the end.
Open the settings of this class and then change the state in the top right from Normal to Hover.
Click the text tab and change the text colour to whatever.
That should do it.
Hello, thank you for trying to help me, but it doesn’t quite work. I did exactly as you describe, but it does not give the desired result. I have attached some screenshots.
In work mode, the text at the top of the navigation bar changes from white to blue, which is good. But as soon as I go to, or view it in Safari, the text in the navigation bar remains white…
I work in the Dutch version of Blocs.
@MarcvanG When you created the nav-menu li a class, it asked if you want to replaces spaces with dashes, which i can see in your class editor, you need to leave the spaces intact. Im not sure if editing the name and removing the dashes will work? I’d delete the class and create it again and Select ‘No, Leave Spaces intact’
So just to go over this again, you should be creating two classes, one called nav-menu which is added to the list item on the layer tree.
Then open class manager and press the plus button to create a new class and call it nav-menu li a (press No, to prompt, to keep spaces).
Then edit the nav-menu li a , set status to hover and change text colour.
It will work then.
No problem. Glad you got it working 