How do I give my navbar this hover effect?

Hello,

Have a look at my forum: crimson-butterfly.forumotion.com

I want it to look exactly the way it does, only adding one thing. And that being the line appearing when hovering the links of this very help forum.

What do I have to do? Thanks.

Add the CSS rules below to your stylesheet.
AP > Display > CSS stylesheet

Code:

#page-header .navbar { font-size:0; }
#page-header .navbar .inner > span { display:none; }

#page-header a.mainmenu {
  font-size:12px;
  text-decoration:none !important;
  overflow:hidden;
  position:relative;
  display:inline-block;
  height:40px;
  line-height:40px;
  padding:0 6px;
}

#page-header a.mainmenu:after {
  content:"";
  background:#999;
  position:absolute;
  height:5px;
  bottom:-5px;
  left:0;
  right:0;
  transition:250ms;
}

#page-header a.mainmenu:hover:after { bottom:0; }

You can change the color of the line by editing #999.

Very nice!

How do I make it so that the line stays when going to any of the links in the navbar?

Thanks.

Do you mean that you want the line to appear all the time? Right now it is working just like the support forum one.

It's a little different.

What the user wants is when you hit one of the options the bar stays while you're on that page still. For example, if I hit Memberlist, the bar would still be at the bottom until I leave the page (exactly like support).

Genesis wrote:It's a little different.

What the user wants is when you hit one of the options the bar stays while you're on that page still. For example, if I hit Memberlist, the bar would still be at the bottom until I leave the page (exactly like support).

Yes, that is exactly what I want.

Any ideas?

Make a javascript.

In all the pages

Code:

// Adds a class to the currently active page in the navigation
        $(function() {
          var head = document.getElementById('page-header');
       
          if (head) {
            for (var cleanURI = window.location.href.replace(/\?.*|#.*/, ''), a = head.getElementsByTagName('A'), i = 0, j = a.length; i < j; i++) {
              if (/mainmenu/.test(a[i].className) && cleanURI == a[i].href.replace(/\?.*|#.*/, '')) {
                a[i].className += ' fa_navactif';
                break;
              }
            }
          }
        });