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

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

Hagoromo Otsutsuki
Forumember

Male Posts : 525
Reputation : 21
Language : English
Location : Heaven

http://naruto-omniverse.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

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.

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;
}

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

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

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;

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

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.

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

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

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