Fixing Your New Nav Bar!!
 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
 misa・brandenburgers May 16th, 2013 8:24:21pm 186 Posts |
Thanks Uni! This is much better/neater than what I did to fix mine, haha~ :D |
uni May 16th, 2013 8:35:46pm 1,338 Posts |
glad to help! :D |
 ~*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 :) |
 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. :) |
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! |
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 :) |
 † M.arixel † May 22nd, 2013 12:35:24am 440 Posts |
Thank you sensei! ^_^ |
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! |
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 |
Schatten | American Quarter Horse June 26th, 2013 3:49:02am 173 Posts |
Well that made fixing a layout easy as pie thanks.... |
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? |
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 :) |
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 |
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 |
alyphira retirement July 6th, 2013 3:52:25pm 24 Posts |
And ten years later I finally got it! haha, thanks! :] |
aliaɳaɳa •• Akita Empire July 28th, 2013 11:24:22pm 65 Posts |
how do I make it center? |
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 :) |
 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! |
uni January 20th, 2014 3:28:49pm 1,338 Posts |
yay! :D |
м e м o я i a. February 24th, 2014 3:16:55am 314 Posts |
Thankies lady :) |
View Comments 1
