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

View previous topic View next topic 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 : 571
Reputation : 23
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 : 13154
Reputation : 2843
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 : 13154
Reputation : 2843
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 : 13154
Reputation : 2843
Language : EN10, FR5
Location : Macungie, PA

http://fmdesign.forumotion.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