7 replies to this topic

[tarynvoget]

I've been building my website and using the forum actively to try and figure out all of the CSS customizations. After about 5 hours of trying to get my nav bar to show up correctly, I thought I might beg a favor of a kind soul for some help. I'm only asking now because I really can't seem to figure it out. Here is my site: www.raiseahappychild.com I'm trying to get my nav bar to work. And by 'work' I mean: 1. the drop down menu options show up cleanly right below the main menu item (right now it's a funky background color and shape) 2. The text in centered height-wise in the nav bar (right now it's all aligned on top) 3. The hideous light grey color that shows up when the active page is highlighted turns some other color (probably blue like the hover colors) I'm sure my CSS code is a hot mess as I'm new to this. Here is what I have. Help! HUGE thanks in advance!! --Taryn /* THIS MAKES THE NAV FONT BIGGER */ #nav { font-size: 1.2em; } /* THIS WILL CHANGE THE FONT COLOR IN THE NAV */ .main_nav li a { color: #FFFFFF; } /* CSS FOR NAV BACKGROUND COLOR */ #nav .content-pad { background-color: #94cb65;} /*Removes the bottom border from the navigation*/ .navigation_wrap { border-bottom: 0 none !important; } /* THIS MAKES THE li BACKGROUNDS TRANSPARENT */ .sf-menu li, .main_nav ul.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active { background-color: transparent; } /* TO MAKE THE ACTIVE MENU APPEAR LIKE THE REST */ #primary-nav .sf-menu .current_page_item a { background-color: #94cb65 !important; color: #94cb65 !important; } /* CSS FOR WHEN HOVERING OVER A MENU ITEM */ .main_nav .main-nav li a:hover, #grandchildnav .current_page_item a, #grandchildnav li a:hover, #grandchildnav .current_page_item ul li a:hover, .sf-menu li:hover, .sf-menu li.sfHover { background-color: #19b2b0; color: #FFFFFF; } #nav_row, .center { float:left; width:100%!important; position:relative; } #nav_row ul, .center ul { clear:left; float:left; list-style:none; margin:0; padding:0; position:relative; left:50%; text-align:center; width:auto!important; } #nav_row ul li, .center ul li { display:block; float:left; list-style:none; margin:0; padding:0; position:relative; right:50%; } #nav_row ul ul{ clear:none !important; float:none !important; left:-55px !important; width:250px !important; position:absolute !important; top:32px; } #nav_row ul li li{ right:0px !important; text-align:center; }

[Jenny]

What I suggest is that you get rid of all that code and wait for my plugin to be released in the store. They are in the testing phase now, so hopefully they release it soon. You can get a sneak peek at

Please Login or Register to see this Hidden Content

You really have a lot of unnecessary code above so I think it will be the best (and easiest) route for you.

[tarynvoget]

Hi simple_mama - thank you so much for the comment. I just checked out your plugin and it's looks perfect! What a great idea. That would have saved me hours. I will definitely buy you a cup of coffee for that! How can I find out when it will be available? I need it in the next few days if possible. Thanks!

[Jenny]

It was just released!

Please Login or Register to see this Hidden Content

[tarynvoget]

Hi simple_mama! I just installed the plugin (super excited about it!) and set all of the colors. I deleted all of the custom CSS code I had. For some reason the colors I picked are not showing up. Or put another way, it's not working. :-( Here is all of the custom CSS code that's left for the nav section. Maybe something is overriding it? Or maybe I am missing a step? /* THIS MAKES THE NAV FONT BIGGER */ #nav { font-size: 1.3em; } /*Removes the bottom border from the navigation*/ .navigation_wrap { border-bottom: 0 none !important; } #nav ul{padding-bottom:10px !important;float:none !important;text-align:center;} .navigation_wrap li{float:none !important;display:inline !important;} .navigation_wrap a{float:none !important;display:inline !important;} www.raiseahappychild.com Let me know your thoughts! Or maybe I just need to hire you to make a few updates to my site? :-) Taryn

[Jenny]

Hi Taryn! According to the CSS on your site, it is still using the default PageLines colors of #F2F2F2 and #F7F7F7. Make sure the little colored boxes show the correct color. Also, if you're entering a specific color, such as #FFFFFF, make sure you enter it without the # within the color picker. If you enter the #, it will mess up. In other words, don't type in the text box, use the color picker, and type the color in without the #.

[tarynvoget]

Hi there - thanks for the response! I don't have those default colors selected anywhere on my site that I know about. I've changed all of the colors on my end. All of the colors I have in the Simple CSS program were selected as you mention so there is no data entry errors there. It's almost like the app/widget isn't activating in my site. (And in case you are wondering, the Simple CSS menu option shows up right below the Custom CSS menu option so I know it's installed). I wish I could easily send you a screen shot so you could see it. It all looks correct to me but still not working. Any other ideas? :-) Taryn

[Jenny]

Feel free to send me an email with your login details and I'll check it out. Email is at

Please Login or Register to see this Hidden Content