Jump to content
Sign in to follow this  
tarynvoget

Navigation bar code not working

Recommended Posts

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

Share this post


Link to post
Share on other sites
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 http://simplemama.com/simple-css/ You really have a lot of unnecessary code above so I think it will be the best (and easiest) route for you.

Jenny :: Web designer at Simple Mama (follow me at @simplemamacom)

Check out Share Me, a social sharing add-on for DMS that is super simple to set up.

Share this post


Link to post
Share on other sites
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!

Share this post


Link to post
Share on other sites
Jenny
It was just released! :) http://www.pagelines.com/store/plugins/simple-css-lite/

Jenny :: Web designer at Simple Mama (follow me at @simplemamacom)

Check out Share Me, a social sharing add-on for DMS that is super simple to set up.

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites
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 #. :)

Jenny :: Web designer at Simple Mama (follow me at @simplemamacom)

Check out Share Me, a social sharing add-on for DMS that is super simple to set up.

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites
Jenny
Feel free to send me an email with your login details and I'll check it out. :) Email is at http://www.pagelines.com/store/plugins/simple-css-lite/

Jenny :: Web designer at Simple Mama (follow me at @simplemamacom)

Check out Share Me, a social sharing add-on for DMS that is super simple to set up.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×