Help > Player Tutorials     

Fixing Your New Nav Bar!!

Player Avatar
uni
May 16th, 2013 8:12:26pm
1,338 Posts
Step 1. If you have this in your coding anywhere:

#menu {display:none}

Delete it.

Then, paste this in:

#menu {background:transparent!important}

This will remove the dark green bar in the background.

Step 2. Delete anything that says '#top_links" from your code, since it doesn't do anything anymore.

Step 3. Paste the following into your code:

#nav {
height: 35px;
width:1000px;
position: relative;
left:-50px;
border: 3px solid #000;
background:#fff;
font-size:12px;
z-index: 100;
}

#nav li {
height: auto;
text-align: center;
background-color: #fff!important;
}

This section codes the main bar of the navigation. Change the border settings and background color to match your layout. The current settings are just copied directly from my layout, so you may have to fiddle with the 'width' and 'left' values to align it properly with your layout.

AND

#nav li:hover ul {
background:#eee!important;
width:1000px!important;
}

This section codes the second tier of the nav bar. You can make the second level a different color than the main level if you like, or you can do the same color. Up to you! You can also change the width to fit to your layout.

AND

This section codes the sub-menu when it is open, but not hovered.

#nav ul {
background:#95305c!important;
width:1000px!important;}

Step 4. Finally, paste the following codes:


#nav a {background:none!important;}
#nav a:hover {background:none!important;}

This prevent the default light green highlight!

If you have any questions or have trouble implementing this, please let me know and I'll do my best to help!!

One note, I find that when customizing the link styles and such, you usually need to put !important directly after, before the semi colon (eg. color:#000!important;) so that it overrides the default settings..

If you have any questions or have trouble implementing this, please let me know and I'll do my best to help!!


 


View Comments 1


Player Avatar
misa・irish sport horses
May 16th, 2013 8:24:21pm
172 Posts
Thanks Uni! This is much better/neater than what I did to fix mine, haha~ :D


 

Player Avatar
uni
May 16th, 2013 8:35:46pm
1,338 Posts
glad to help! :D


 

Player Avatar
~*s+ephanie*~ || polish arabians ||
May 17th, 2013 2:36:49am
29 Posts
thanks for this. i will have to work on tweeking it when i have more time, but at least it is a start for us less savvy html people :)


 

Default Avatar
tina » getting back
May 17th, 2013 5:38:33am
61 Posts
Thanks Uni! Although looking through the HP css style sheet now, I see it would have been very easy to figure out myself. :)


 

Default Avatar
Bellicus - Tronic watching!
May 17th, 2013 3:57:36pm
115 Posts
THANK YOUUUUU!!When I came on this morning I was thinking, oh gosh, this should be fun to try get someone to fix it for me before I destroy everything... so you saved me from having to beg people (...mostly you bahah) for sure!


 

Player Avatar
uni
May 18th, 2013 10:58:50pm
1,338 Posts
Updated to reflect the new changes to the nav bar:The sub-menu now stays open, even if your mouse isn't directly hovering it, which should make navigating a bit easier :)


 

Player Avatar
† M.arixel †
May 22nd, 2013 12:35:24am
441 Posts
Thank you sensei! ^_^


 

Default Avatar
Appalachian EC
June 15th, 2013 6:46:42pm
4 Posts
i guess i have what you call a coverup layout? All links work but there is no report on the page.Can someone fix it for me please? thanks!


 

Player Avatar
uni
June 15th, 2013 8:12:17pm
1,338 Posts
yup, in the section that has all the links coded in there, paste this as well< br > < a href='home.php?id=3600&report=true' >Report< /a >but remove the spaces


 

Default Avatar
Schatten | American Quarter Horse
June 26th, 2013 3:49:02am
173 Posts
Well that made fixing a layout easy as pie thanks....


 

Default Avatar
alyphira retirement
July 5th, 2013 3:05:41pm
24 Posts
Thanks for this Uni. I'm not a coder myself so this made it way easier. However, I have a question, I can't seem to get the green footer and green highlight of the links to go away, is there a way to make it do this?


 

Player Avatar
uni
July 5th, 2013 7:11:09pm
1,338 Posts
yep!for the green links, in these sections: #nav li:hover ul {background:#ryr!important;width:1000px!important;} #nav ul {background:#ryr!important;width:1000px!important;} change #ryr to transparentand the footer:#footer {background-image:none; background-color:none; border:0px solid #bca49b; color:#000000; width:920px;}try deleting background-image:none; background-color:none and just put background:transparentLet me know if it does/doesn't work :)


 

Default Avatar
alyphira retirement
July 6th, 2013 12:54:45am
24 Posts
Thanks! It made the green on the footer look a little less bulky, but the awkward green highlight for the Navigation bar won't seem to go away. It could all just be me though, looking at this coding, i'm trying to follow it, but I may have missed something huge. :P


 

Player Avatar
uni
July 6th, 2013 1:33:57am
1,338 Posts
take the # out from in front of transparent anywhere you have it and you should be good to go!! :D


 

Default Avatar
alyphira retirement
July 6th, 2013 3:52:25pm
24 Posts
And ten years later I finally got it! haha, thanks! :]


 

Default Avatar
aliaɳaɳa •• Akita Empire
July 28th, 2013 11:24:22pm
65 Posts
how do I make it center?


 

Player Avatar
uni
July 29th, 2013 12:38:02am
1,338 Posts
in this section#nav {height: 35px;width:1000px;position: relative;left:-50px;border: 3px solid #000;background:#fff;font-size:12px;z-index: 100;}adjust the 'left' pixel value until it's in the middle :)


 

Player Avatar
Jendeelinn
January 7th, 2014 6:53:19pm
36 Posts

Oh thank you so much! I have been working on getting the nav right and was not able to and then I see this and you saved my life! haha! Thanks dear! 




Embrace the unexpected - Enjoy the journey!

 

Player Avatar
uni
January 20th, 2014 3:28:49pm
1,338 Posts

yay! :D




 

Default Avatar
м e м o я i a.
February 24th, 2014 3:16:55am
314 Posts

Thankies lady :) 




 

View Comments 1