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.

Hover effect in Nav. Bar

Go down

Solved Hover effect in Nav. Bar

Post by Kite Trojan on April 14th 2014, 2:26 am

How can I add the hover effect like this: http://graphicdesign.fullsubject.com/, but with a blue border. Screenie: http://prntscr.com/39s2io

verison is phpbb3
avatar
Kite Trojan
Forumember

Male Posts : 823
Reputation : 19
Language : English

http://galacticda.forumotion.com/

Back to top Go down

Solved Re: Hover effect in Nav. Bar

Post by Hagoromo Otsutsuki on April 14th 2014, 3:23 am

You can easily do this buy deleting your nav images and leaving the words but theres another way i know someone can give you better information then i did
avatar
Hagoromo Otsutsuki
Forumember

Male Posts : 590
Reputation : 24
Language : English
Location : Between Time and Space

http://fictionalomniverse.forumotion.com/

Back to top Go down

Solved Re: Hover effect in Nav. Bar

Post by Pizza Boi on April 14th 2014, 5:19 am

Hi Very Happy

Code:
a.mainmenu:hover{
box-shadow:0px 5px 6px #Color inset;
border-top:1px solid:#Color;
background-color:#Color;
}

Change #Color to the color you want.

Regards,
Pizza Boi
avatar
Pizza Boi
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

http://redlustempire.forumtl.com/

Back to top Go down

Solved Re: Hover effect in Nav. Bar

Post by Kite Trojan on April 14th 2014, 4:32 pm

I didn't need the shadow effect, but it won't make that box around that good. It can hardly be seen.
avatar
Kite Trojan
Forumember

Male Posts : 823
Reputation : 19
Language : English

http://galacticda.forumotion.com/

Back to top Go down

Solved Re: Hover effect in Nav. Bar

Post by Ange Tuteur on April 14th 2014, 4:40 pm

Hello Kite Trojan,

Change your CSS to :
Code:
.navbar a.mainmenu {
    padding:3px 6px;
    -webkit-border-radius:3px;
       -moz-border-radius:3px;
            border-radius:3px;
    -webkit-transition:300ms;
       -moz-transition:300ms;
         -o-transition:300ms;
            transition:300ms;
}

.navbar a.mainmenu:hover {
    background:#012;
    -webkit-box-shadow:0px 5px 6px #045 inset;
       -moz-box-shadow:0px 5px 6px #045 inset;
            box-shadow:0px 5px 6px #045 inset;
}
avatar
Ange Tuteur
Forumaster

Male Posts : 13187
Reputation : 2895
Language : EN10, FR5
Location : Macungie, PA

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Hover effect in Nav. Bar

Post by Kite Trojan on April 14th 2014, 6:56 pm

Thanks, but they are all spaced out. http://prntscr.com/39y97v
avatar
Kite Trojan
Forumember

Male Posts : 823
Reputation : 19
Language : English

http://galacticda.forumotion.com/

Back to top Go down

Solved Re: Hover effect in Nav. Bar

Post by Ange Tuteur on April 14th 2014, 7:12 pm

That is to add space for the effect, you can either adjust it or remove it :
Code:
padding:3px 6px;
avatar
Ange Tuteur
Forumaster

Male Posts : 13187
Reputation : 2895
Language : EN10, FR5
Location : Macungie, PA

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Hover effect in Nav. Bar

Post by Kite Trojan on April 14th 2014, 7:14 pm

Thanks.
avatar
Kite Trojan
Forumember

Male Posts : 823
Reputation : 19
Language : English

http://galacticda.forumotion.com/

Back to top Go down

Solved Re: Hover effect in Nav. Bar

Post by Ange Tuteur on April 14th 2014, 7:16 pm

You're welcome Smile

topic solved and archived
avatar
Ange Tuteur
Forumaster

Male Posts : 13187
Reputation : 2895
Language : EN10, FR5
Location : Macungie, PA

http://fmdesign.forumotion.com

Back to top Go down

Back to top


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