guys, if I wanted a menu like this, with an underline effect under the selected item, what should I do?
here an example of what I’d like to do: https://brydenapparel.com
thank you
1 Like
There are several way you can create something like this in Blocs.
You can add the nav bloc and then use menu manager. Add the menu links and then go to project settings. In the text area choose navigation links. Choose the text size and color. You can leave the line height blank for now. Once you do this Bloc will create a class called navbar-nav li a.
Open class manager and open the class navbar-nav li a. From there you can first add the text line height. The text line height will determine how far away you want the underline to show when you hover or the text.
Still in class manager, in the upper right corner change the the normal state to hover. The click the second tab that controls padding/margins and borders. In the border area just add a slim line border.
Then click on the border controls on the right and change the top, left-side and right side to 0 width. This will just leave the line on the bottom. Again you can control the look by changing the color or line width and line height changes how far the line is from the link.
You can also set the menu to none, create a class for the links and style the menu link anyway you want. This will give you a few more controls.
Hope this helps,
Casey
1 Like
why if I duplicate the menu elements, it puts them stacked vertically instead of horizontally?
Not sure how you are doing this. If you are adding links using menu manager or none?
If you have more links that do not fit in to the nav container then it will create a second line of links as it’s wider than the nav column. Look at the column that the nav is in to make sure it’s as wide as possible.
Casey
yes you are right, I’ve just seen it. @casey1823 I tried what you explained about the underline and it work like a charm. thank you. is it possible to make the underline appear smoother than this?
Not without some type of code. If you set the menu to none and then make a class and apply it to each item you do have some more control. You could add an hover effect but it will not be just to the line. I think it would effect the whole menu item.
Another popular method would be to add the active class. In project setting set the active class to this.
Then create this class in class manager. You do not have to target this to the menu just create the class. You can then set a different color for the background link that shows what page you are on.
Hope this helps,
Casey
the effect I’d like is a kind of fade in of the underline when i go hover menu items.
it would be nice as effect on every kind on button as well.
do you know if is it possible?
Hey @davideakadudu
I have this effect on a client website. It was back in Blocs 3 days, so the CSS was added via an additional CSS file. You can actually make most of this in the class editor now. With exception to the transform and transition part. I think I copied all of it.
You could use it as a guide.
.nav-item a.nav-link{
padding: 3px 0 5px;
position: relative;
}
.nav-item a.nav-link::before {
content: "";
position: absolute;
width: 100%;
height: 1px;
bottom: 0;
left: 0;
background-color: #D9501C;
transform: scaleX(0);
transition: all 0.3s ease-in-out;
}
.nav-item a.nav-link:hover::before,
.nav-item a.nav-link:focus:before {
transform: scaleX(1);
}
3 Likes
Very nice. I was actually looking for something like that. Put it to the test on my work in progress immediately: http://sandbox.fynndesign.de
Didn’t use the class editor though. Would love to, but I don’t think you can use the ::before and content: "" in the class manager.
Hey @pumpkin, you can now (blocs 4), when you add the Pseudo element :: the content box appears in the background tab. Its hidden without that in the class name.
You can now add MENU text on the mobile toggle etc via the class editor. 
1 Like
Oh, nice. I’ll give that a try. Thanks. Guess I should take a few days off to work through the complete online documentation 
1 Like
Yeah, this one was on my wish list and Norm did a great job they way he implemented it.
I use it all the time now.
Well, at least you(!) knew it’s there. Thanks again for sharing 
@Malachiman I tried adding “” to the content field, I don’t seem to get it working though, using the class editor. Whatever I enter into the content field isn’t there, once I re-open the class in the editor.
The quotes are added automatically, its part of the markup. You just leave it.
Right, it’s till not working though 
I’ve seen this being used in Word Press sites so many times.
