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 text navbar

View previous topic View next topic Go down

Solved Hover text navbar

Post by Valoish on November 26th 2016, 10:37 pm

How would I go about making a centered text navbar with a hover effect? Kinda of like the one on this forum, but not an exact copy of it.
Basically, what I wanna know is how do I make the navbar a text-based nav rather than an image-based one, and how do I add a hover effect it.

Currently my forum has an image-based hover navbar, and I used a tutorial found on this forum to make it (Can't seem to find the link at the moment).

Forum Link: http://www.CanvasForums.com/
avatar
Valoish
Forumember

Female Posts : 291
Reputation : 53
Language : English
Location : NYC

http://www.canvastutorials.org/

Back to top Go down

Solved Re: Hover text navbar

Post by Luffy on November 26th 2016, 11:32 pm

Hello @Valoish,

If you remove the images from the navbar and leave it displaying text it will show the default one and you can style it through CSS.
Code:
a.mainmenu
for the links
Code:
td.bodyline table:nth-child(2)
for the entire navbar (for the background the positioning of it all etc)





avatar
Luffy
Manager
Manager

Male Posts : 4671
Reputation : 470
Language : Greek, English
Location : Greece

http://helpgr.forumgreek.com/forum

Back to top Go down

Solved Re: Hover text navbar

Post by Valoish on November 26th 2016, 11:43 pm

Thanks @Luffy! c:
I'll give that a try after dinner and homework~
avatar
Valoish
Forumember

Female Posts : 291
Reputation : 53
Language : English
Location : NYC

http://www.canvastutorials.org/

Back to top Go down

Solved Re: Hover text navbar

Post by Luffy on November 26th 2016, 11:45 pm

Sure, let me know if you need anything.





avatar
Luffy
Manager
Manager

Male Posts : 4671
Reputation : 470
Language : Greek, English
Location : Greece

http://helpgr.forumgreek.com/forum

Back to top Go down

Solved Re: Hover text navbar

Post by SLGray on January 5th 2017, 10:07 pm

Removed from the Garbage


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

avatar
SLGray
Administrator
Administrator

Male Posts : 39646
Reputation : 2667
Language : English
Location : United States

https://fmthemes.forumotion.com/

Back to top Go down

Solved Re: Hover text navbar

Post by Valoish on January 5th 2017, 10:30 pm

Thank you~ I'll have a sketch of what I was trying to achieve (and failing at achieving LOL) later on tonight after work!
avatar
Valoish
Forumember

Female Posts : 291
Reputation : 53
Language : English
Location : NYC

http://www.canvastutorials.org/

Back to top Go down

Solved Re: Hover text navbar

Post by Valoish on January 7th 2017, 4:47 pm

Okie so this is what the nav bar looks like right now:

And this is what I'd like for it to look like:

I know how to re-color it, and how to switch from Images to Text, but the issue is that the buttons "Gallery" and "Usergroups" display by default when switched over to text.. Is there a way to hide those two completely, and add "Staff list" and "Rules & Guidelines" into it? (I already have the HTML pages for those two, just need help with adding in the buttons)
avatar
Valoish
Forumember

Female Posts : 291
Reputation : 53
Language : English
Location : NYC

http://www.canvastutorials.org/

Back to top Go down

Solved Re: Hover text navbar

Post by Luffy on January 7th 2017, 11:35 pm

Adding the buttons can be done manually through the ACP. As for the hide of those two of the navbar you can use:
Code:
a.mainmenu[href="/gallery"],a.mainmenu[href="/groups"] { display: none }





avatar
Luffy
Manager
Manager

Male Posts : 4671
Reputation : 470
Language : Greek, English
Location : Greece

http://helpgr.forumgreek.com/forum

Back to top Go down

Solved Re: Hover text navbar

Post by Valoish on January 8th 2017, 1:13 am

Thanks for your help, Luffy~! Smile
This is solved now c:
avatar
Valoish
Forumember

Female Posts : 291
Reputation : 53
Language : English
Location : NYC

http://www.canvastutorials.org/

Back to top Go down

Solved Re: Hover text navbar

Post by SLGray on January 8th 2017, 2:57 am

Problem solved & topic archived.
Please read our forum rules: ESF General Rules


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

avatar
SLGray
Administrator
Administrator

Male Posts : 39646
Reputation : 2667
Language : English
Location : United States

https://fmthemes.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