Adding hover.css styles

Hi guys. I'm trying to animate some elements in my navbar, basically i want the elements to be underlined from left when hovering. I've tried to use the css from hover.css. I've tried importing the stylesheet, manually adding the classes in style.css and i'm getting no results. Do i have to export and then add seperately? Are the classes being ignored? I created a basic html page to test it out and the classes work. Pleasse tell me how to make this work in BS.

Although i love this app for it's convenience, adding custom elements can be such a pain!

This should work for you. It give something similar to an underline effect that slides in from the left when you hover over an Navbar link.

.nav-link {
  position:relative;
}

.nav-link:before {
  display:block;
  content:"";
  position:absolute;
  bottom:0;
  left:0;
  width:0;
  height:2px;
  background:red;
  transition:width 1s ease;
}

.nav-link:hover:before {
  width:100%;
}

It should also work in the app. I'm not sure if a links text-decoration: underline; property is capable of being animated.

However, it's possible that the classes you were adding in the app where not overriding the preset classes from bootstrap. So you may have to add additional CSS to override the CSS of the bootstrap framework rather than use the CSS classes found in hover.css. Since I don't have any experience using the hover.css I'm not sure what's all happening there.

If you set bottom to somewhere around 25% it will be close to the actual underline spot.

Saj

Copying this bootstrap css in the styles panel to a new css stylesheet

.navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > li > a:hover {   color:#333;  background-color:transparent; }

and then adding:

text-decoration:underline

...so in the new stylesheet it looks like this:

.navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > li > a:hover { color:#333; background-color:transparent; text-decoration:underline; }

As far as I can see it works fine. But here is my question to more experienced users of BS: Does that work on all mobile devices?

Thanks for your anser, Jens

Looking at https://ianlunn.github.io/Hover/ and the Border Transitions - Underline From Left, I don't see why you'd have an issue.

New project (BSS4) Drag/Drop onto BODY element in the Overview pane (bottom/left) the Navbar component. Design pane (bottom/right) right click on Styles select Link External CSS (https://cdnjs.cloudflare.com/ajax/libs/hover.css/2.3.1/css/hover-min.css) Selected the Link element in the Navbar an added the class hvr-underline-from-left for each Navbar link.

Hover over link in Navbar in the app and the light blue underline animated in from left. Enabled Preview and worked in the browser as well.

New project (BSS3) Same process, worked there as well.

We'll need to see what you have in your code in order to help more. You can always use the Publish function of the app to a temporary site URL that we could all see your code to try to help further.

Saj

Hi Saj, thank you very much for the hint. https://ianlunn.github.io/Hover/

It works great and it´s what I´ve been looking for

Jens

Your welcome @newinbootstrap, glad I could help. Now I just hope it helps @zeem-k :)

Saj