Jump to content
Sign in to follow this  
krumvillebakeshop

Navigation Bar

Recommended Posts

krumvillebakeshop

Hi Again! if someone could help me figure out this, would be so awesome!! http://www.krumvillebakeshop.com/ if you click a page in the menu, it has the default box color (I set to grey) Id like to make that box go to white and have a black type instead of red. same goes for the submenu in "meet the goods" i would love to get rid of the ugly black border lines and the bkgd color grey and make everything white. i have all these css for the nav.. and I'm getting so too confused on how to reach my goal. #primary-nav li.page_item a:hover {color:black;} #menu-nav a:hover {color:black !important;} .current_page_ancestor a, .children .current_page_item a {color:#000000 !important;} .current_page_item ul {color:#000000 !important;} .children a {color:#757575 !important; thank you in advance for your help! :) antonella

Share this post


Link to post
Share on other sites
ricardo

Hi Antonella! You don't need to change your menu colors using CSS. You can do it in PlatformPro Settings > Design Control. Ricardo Ps. FYI your site is unreachable to the public. I'm being redirected to the login page.

Share this post


Link to post
Share on other sites
krumvillebakeshop

Hi Ricardo! How are you? Thanks for the reply! I do have the color of the nav. set up with design control, my problem is that if I choose in design control the box bkgd to go white it changes all thought the site. In the contact page there is a sign up mailing list, and having the box color on white makes the fill-in boxes go white as well :(. All I'm looking to do in the nav. is to have each active title page go black with a white bkgd. Right now it is only happening with the sub-menus. Example: if you are in the "Crackers" page the "Meet the goods" goes black, but every other menu visited still stays red. I added this to CSS to try to change that but is not working :( ul.main-nav li.current_page_item a:active {color:black; background-color:none !important;} FYI: the site is back up. Any ideas on what I'm doing wrong? Thanks! Antonella

Share this post


Link to post
Share on other sites
cmunns

Try adding this in your custom css file: `body .main-nav li.current-page-ancestor a, body .main-nav li.current_page_item a, body .main-nav li.current-page-ancestor ul a, body .main-nav li.current_page_item ul a { background:none; color:#000; }

Share this post


Link to post
Share on other sites
krumvillebakeshop

WOW ADAM!!! It worked like a charm! THANK YOU!!!! You'r awesome! all I'm missing is the sub-menu background to change to white. as of now is still grey with some black lines in between. would anyone have any suggestions? thanks again, antonella

Share this post


Link to post
Share on other sites
catrina

To change the sub-menu background to white, you can add CSS. Do you have any custom code that might be making that sub-menu background grey?


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
krumvillebakeshop

here are all the ccs I added with the amazing help of the forum members and firebug :) __________________________________________________________ body .main-nav li.current-page-ancestor a, body .main-nav li.current_page_item a, body .main-nav li.current-page-ancestor ul a, body .main-nav li.current_page_item ul a { background:none; color:#000; } #feature.container.fix { padding-top: 15px;} #feature { margin: 0em; } #branding { margin-left: -20px; } #wp-admin-bar { margin-top: 30px; } #nav_row.main_nav, ul.sf-menu ul li { border-bottom: 5px solid;} #wp-admin-bar {background-color: #fff;} .fixed_width #branding .content-pad { padding: 0px 10px 10px 0px; } #primary-nav,#page-main { background: #fff; } #cred {display: none;} #h1 {font-size: 1em;} p {font-size: 1.1em;} h2 {font-size: 1.4em;} .banner_container .banner-area { padding: 5px 10px 0px 0px; } ul.main-nav li.page_item {font-size: 16px;} #primary-nav li.page_item a:hover {color:black;} #menu-nav a:hover {color:black !important;} .current_page_ancestor a, .children .current_page_item a {color:#000000 !important;} .current_page_item ul {color:#000000 !important;} .children a {color:#757575 !important; .banner-content { font-size: 12px; line-height: 1.6em; } #maincontent.container.fix { margin-top: -0px; } __________________________________________________________ I can't figure out how to add a ccs code for the sub-menus, since they just appear when you have the mouse over them I can't use firebug :((

Share this post


Link to post
Share on other sites
timlinson

you can add a background setting to your `.children a` rule: ` .children a { color: #757575 !important; background: white !important; } `

Share this post


Link to post
Share on other sites
krumvillebakeshop

Thanks Tim!! Amazing! So I did that and I still got the black border lines in between. I checked the border box settings and they are all set to white so I thought to add to the rule too. Of course didn't work. I tried the followings: .children a { color: #757575 !important; background: white !important; border-bottom: white !important; } .children a { color: #757575 !important; background: white !important; border: white !important; } any suggestion? I can't thank you guys enough!! Antonella

Share this post


Link to post
Share on other sites
krumvillebakeshop

thanks catrina for the reply!! I tried. it doesn't work :(( got any other ideas? thanks again, antonella

Share this post


Link to post
Share on other sites
catrina

Hm, perhaps you can try this:

border-bottom: 5px solid #ffffff !important;


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
krumvillebakeshop

bummer, nothing yet. I hope I'm adding these in the proper way?? I just added the line you just gave above instead the old one, right? like this:

#menu-nav a:hover {color:black !important;}
	.current_page_ancestor a, .children .current_page_item a {color:#000000 !important;}
	.current_page_item ul {color:#000000 !important;}
	.children a {
	    color: #757575 !important;
	    background: white !important;
	    border-bottom: 5px solid #ffffff !important;
	}

Share this post


Link to post
Share on other sites
timlinson

Try using the `#nav_row.main_nav, ul.sf-menu ul li` selectors instead: #nav_row.main_nav, ul.sf-menu ul li {border-bottom: 5px solid white;}

Share this post


Link to post
Share on other sites
krumvillebakeshop

I tried and didn't work. Isn't that the selector for the line below the main. nav?

Share this post


Link to post
Share on other sites
krumvillebakeshop

I just figured it out! Thank you Tim, Catrina and Adam for all the amazing help and support on this! You got me thinking on the right direction. I took out

ul.sf-menu ul li 
from the original CSS I had to make the border thicker, which was:
#nav_row.main_nav, ul.sf-menu ul li {
	border-bottom: 5px solid;}

good night everyone! Best, Antonella

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  

×