The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

How do I give my navbar this hover effect?

View previous topic View next topic Go down

How do I give my navbar this hover effect?

Post by E.J.M. on July 7th 2016, 7:03 pm

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. Very Happy

E.J.M.
Forumember

Posts : 34
Reputation : 1
Language : English

http://crimson-butterfly.forumotion.com

Back to top Go down

Re: How do I give my navbar this hover effect?

Post by An on July 8th 2016, 7:47 pm

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.

An
Forumember

Posts : 42
Reputation : 23
Language : English

http://help.forumotion.com

Back to top Go down

Re: How do I give my navbar this hover effect?

Post by E.J.M. on July 8th 2016, 10:31 pm

Very nice!

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

Thanks. Very Happy

E.J.M.
Forumember

Posts : 34
Reputation : 1
Language : English

http://crimson-butterfly.forumotion.com

Back to top Go down

Re: How do I give my navbar this hover effect?

Post by SLGray on July 8th 2016, 11:40 pm

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


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 35613
Reputation : 2372
Language : English
Location : United States

http://fmthemes.forumotion.com/

Back to top Go down

Re: How do I give my navbar this hover effect?

Post by Genesis on July 8th 2016, 11:52 pm

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
Forum Reviewer
Forum Reviewer

Male Posts : 2331
Reputation : 322
Language : English
Location : Forumountain

http://forumpromocean.com

Back to top Go down

Re: How do I give my navbar this hover effect?

Post by E.J.M. on July 9th 2016, 1:23 pm

@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? Smile

E.J.M.
Forumember

Posts : 34
Reputation : 1
Language : English

http://crimson-butterfly.forumotion.com

Back to top Go down

Re: How do I give my navbar this hover effect?

Post by Bigtuber on July 9th 2016, 2:44 pm

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;
              }
            }
          }
        });

Bigtuber
Forumember

Male Posts : 104
Reputation : 3
Language : German, English
Location : Germany

http://kingsroadforum.forumieren.com/

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum