Navigation Buttons Hover customisation


#1

I’m trying to customise my Nav bar in Blocs 3.0.4 and I’m struggling. I’ve watched Eldars videos, but for some reason I can’t seem to get it right.

I want a line under my nav buttons as shown in the picture below to appear when hovered over, this is not a problem, the problem is I’m unable to change the hover text colour as you can see in the image below. I’ve tried altering it on the Menu element but no joy, and changing the colour of each list item individually is bringing no joy either. It’s worth noting I have 6 different menu’s, all are sticky but different for each page and not global. I wonder if it had something to do with Blocs 3 with it changing slightly and only being able to have a dark/light them?

My Navigation tree is as follows:

  • Column
    • Nav Bar
      • Img
      • Nav Toggle #nav-toggle
    • Nav Container
      • List (tried setting text colour here)
        • List Item (custom class made here for hover which works for the underline, tried setting text colour here)
          • Link

Anyone managed to have something like this done?


#2

@Brocky120

Create a custom class: .navbar a:hover

Change the hover text colour there


#3

Beautiful. Easy as that. Cheers mate :+1:


#4

@Brocky120, how do you get that blue line under the nav bar? I can change the color and text and so (on hover) in the nav bar class, (.navbar-nav li a) but I can’t figure out how to make that line on hover…


#5

hey @Ken you can use the custom class and the border settings. see the image:


#6

Thanks @RME!
I will try that.


#7

Got the idea, but I cant seem to get it right… Noticed that I had to set all borders to 0 except the bottom, I get a line on each button on hover, but also a line on the whole bar at the same time. And the class is only applied to the list items (the buttons). And when I create that custom class another one is auto created called nav hover… I just don’t understand the classes properly, and I’m not sure what item I should apply the class to.


#8

Hi Ken,

Delete this hover class from class manager. It is automatically created when you open the class and start editing it in hover state before doing so in normal state.

I believe it wasn’t like this in Blocs 2. It would be great if Class Editor always opened in Normal state first, @Norm.

Cheers,
Eldar


#9

Finally managed to get my line in the nav bar, by following this:
https://help.blocsapp.com/knowledge-base/styling-nav-links-with-custom-classes/
Not that I understand how and why it works this way though, I have to make a custom class for the nav bar list, then another class called the same but with a space and an “a” at the end, for the list items, (and for some reason it seems important to keep that space, because Blocs ask me if I wanna keep it… ), then set the underline on this class. Not very logical in my simple brain.