The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

How do I give my navbar this hover effect?

5 posters

Go down

How do I give my navbar this hover effect? Empty How do I give my navbar this hover effect?

Post by E.J.M. 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

http://crimson-butterfly.forumotion.com

Back to top Go down

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

Post by An 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

https://help.forumotion.com

Back to top Go down

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

http://crimson-butterfly.forumotion.com

Back to top Go down

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

Post by SLGray 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.


How do I give my navbar this hover effect? Slgray10

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

Male Posts : 51463
Reputation : 3519
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

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

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

Back to top Go down

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

http://crimson-butterfly.forumotion.com

Back to top Go down

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

Post by Bigtuber 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 : 450
Reputation : 19
Language : German, English
Location : Germany

https://hilfe.forumieren.com/

Back to top Go down

Back to top


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