How do I give my navbar this hover effect?

Go down

999 - How do I give my navbar this hover effect? Empty 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
avatar
E.J.M.
Forumember

Posts : 34
Reputation : 1
Language : English

View user profile http://crimson-butterfly.forumotion.com

Back to top Go down

999 - How do I give my navbar this hover effect? Empty 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
An
Forumember

Posts : 44
Reputation : 24
Language : English

View user profile https://help.forumotion.com

Back to top Go down

999 - How do I give my navbar this hover effect? Empty 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
avatar
E.J.M.
Forumember

Posts : 34
Reputation : 1
Language : English

View user profile http://crimson-butterfly.forumotion.com

Back to top Go down

999 - How do I give my navbar this hover effect? Empty 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.


999 - How do I give my navbar this hover effect? Slgray10
999 - How do I give my navbar this hover effect? Ssshfm13

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

Male Posts : 47350
Reputation : 3312
Language : English
Location : United States

View user profile https://help.forumotion.com/

Back to top Go down

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

Post by Take Notes 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).
Take Notes
Take Notes
Helper
Helper

Male Posts : 2337
Reputation : 324
Language : English
Location : Forumountain

View user profile

Back to top Go down

999 - How do I give my navbar this hover effect? Empty 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
avatar
E.J.M.
Forumember

Posts : 34
Reputation : 1
Language : English

View user profile http://crimson-butterfly.forumotion.com

Back to top Go down

999 - How do I give my navbar this hover effect? Empty 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
Bigtuber
Forumember

Male Posts : 397
Reputation : 19
Language : German, English
Location : Germany

View user profile https://hilfe.forumieren.com/

Back to top Go down

Back to top


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