How do I get the same effect on my forum as when hovering this forum's navigation bar? Hitskin_logo Hitskin.com

This is a Hitskin.com skin preview
Install the skin • Return to the skin page

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.
The forum of the forums
3 posters

    How do I get the same effect on my forum as when hovering this forum's navigation bar?

    E.J.M.
    avatar
    E.J.M.
    Forumember


    Posts : 34
    Reputation : 1
    Language : English
    • Post n°1

    In progress How do I get the same effect on my forum as when hovering this forum's navigation bar?

    Post by E.J.M. April 2nd 2015, 11:44 pm

    Yes, how do I do it?

    Thanks! cheers
    • Back to top
    Ange Tuteur
    Ange Tuteur
    Ange Tuteur
    Forumaster


    Male Posts : 13207
    Reputation : 3000
    Language : English & 日本語
    Location : Pennsylvania
    • Post n°2

    In progress Re: How do I get the same effect on my forum as when hovering this forum's navigation bar?

    Post by Ange Tuteur April 3rd 2015, 6:34 pm

    Add the following rules to your stylesheet :
    Display > Colors > CSS stylesheet
    Code:
    a.mainmenu {
      color:#FFF;
      font-size:11px;
      text-shadow:0 0 2px #000;
      -webkit-transition:600ms;
              transition:600ms;
    }

    a.mainmenu:hover {
      color:#8C5;
      font-size:13px;
      text-shadow:0 0 3px #AE7;
    }

    Change the colors to whatever you want. Wink
    • Back to top
    E.J.M.
    avatar
    E.J.M.
    Forumember


    Posts : 34
    Reputation : 1
    Language : English
    • Post n°3

    In progress Re: How do I get the same effect on my forum as when hovering this forum's navigation bar?

    Post by E.J.M. April 4th 2015, 1:10 am

    OK. I added that code, and it works. But, if you enter my forum you will see that when hovering the navigation bar the rest of the forum "moves" a little. How do I fix this?

    thegoldenblues.forumotion.com

    Thanks.
    • Back to top
    E.J.M.
    avatar
    E.J.M.
    Forumember


    Posts : 34
    Reputation : 1
    Language : English
    • Post n°4

    In progress Re: How do I get the same effect on my forum as when hovering this forum's navigation bar?

    Post by E.J.M. April 5th 2015, 2:43 am

    Bump. Smile
    • Back to top
    Van-Helsing
    Van-Helsing
    Van-Helsing
    Hyperactive


    Male Posts : 2431
    Reputation : 116
    Language : English, Greek
    • Post n°5

    In progress Re: How do I get the same effect on my forum as when hovering this forum's navigation bar?

    Post by Van-Helsing April 5th 2015, 3:00 am

    Hello,
    That is happening because the hover effect increases your font-size 2 points.

    Find in your CSS this:
    Code:

    a.mainmenu:hover {
      color:#8C5;
      font-size:13px;
      text-shadow:0 0 3px #AE7;
    }

    and change it with this:
    Code:

    a.mainmenu:hover {
      color:#8C5;
      font-size:12px;
      text-shadow:0 0 3px #AE7;
    }

    If you want the font size to stay the same just change it to 11px
    • Back to top
    Ange Tuteur
    Ange Tuteur
    Ange Tuteur
    Forumaster


    Male Posts : 13207
    Reputation : 3000
    Language : English & 日本語
    Location : Pennsylvania
    • Post n°6

    In progress Re: How do I get the same effect on my forum as when hovering this forum's navigation bar?

    Post by Ange Tuteur April 6th 2015, 3:00 am

    It's moving because the font-size is also increasing the height of its parent container. You can stop this movement by defining a set height for the parent. Add the following rule to your stylesheet :
    Code:
    ul.navlinks { height:30px }
    • Back to top