Question about Header Styling

[mpm]

Hi all,

I am working on my first website and was wondering if anybody had any tips for Header Styling.

What I am trying to do is have a colored bar appear at the bottom of my header when I hover over the Menu item.

I can get some sort of implementation working with the Nav block, and setting a static height for my section (for example 100 pixels), setting my div containing the Nav Item to 100px, and adding a border on the bottom of that div that displays when I hover over the div

However, I am not sure on how to create a custom transition for that border (i.e border comes in from the right side or from the bottom)

Secondly, I’d like the colored bar to stay in place when I am on that page (similar to how the Tab List block works if you create a bottom border for it). Essentially, each page on the nav bar is a “tab” of the website.

Just curious if this was something that someone had experience with. Appreciate all the help and advice in advance!

[Araminta]

Hi @mpm,

I would suggest the following, to achieve your desired layout:

@mpm

I can get some sort of implementation working with the Nav block, and setting a static height for my section (for example 100 pixels), setting my div containing the Nav Item to 100px, and adding a border on the bottom of that div that displays when I hover over the div

This can be simplified by adding an after to the Nav items block, to create the bottom grey border look.

@mpm

However, I am not sure on how to create a custom transition for that border (i.e border comes in from the right side or from the bottom)

The red coloured hover border, can be easily achieved by using the premade link effects available in the Nav block’s Settings > Link effects tabs.

Result:

Here is a short video demonstration.

Note: in the pseudo content don’t add a space as I did (be sure to write “” instead of " ").

Hope this helps!