Jump to content
Sign in to follow this  
gayatriom

Can't seem to Fix the CSS for Active Button in Navigation.

Recommended Posts

gayatriom

hey. So (oh my stupid questions) . I can't seem to find the css for the active button in the navigation menu. I've tried everything. Does anyone know the code for the primary nav- 'active' state.

Share this post


Link to post
Share on other sites
bryan-hadaway

`.current-menu-item` May want to use: `.current-menu-item a` Thanks, Bryan

Share this post


Link to post
Share on other sites
gayatriom

So i don't know why, but it's not working. this is what i've put in the custom code section: #.current-menu-item {color:#7B3D42;background-color:#ffffff} #.current-menu-item a{color:#7B3D42;background-color:#ffffff} but no results :(

Share this post


Link to post
Share on other sites
aadf

Gayatri, I was having similar problems with styling Nav buttons. I finally disabled the jquery scripts for dropdowns, shadows, etc. under Menus and Navigation under Platform Pro settings in Wp-Admin panel. From there I was able to restyle nav bar to my liking in base.css file under PlatformBase folder. Also, I did notice that some CSS overrides weren't taking precedence over Platform Pro original framework and I would have to use !important callout after CSS functions. But, if you put code in Custom Code section of Platform Pro settings in WPAdmin panel, they will override original framework. But for some reason they wont' override if you just write code to base.css file. May have something to do with permissions after I updated Wordpress and Platform Pro Framework.

Share this post


Link to post
Share on other sites
drift

Try this... #primary-nav .current-menu-item a or #primary-nav .current_page_item a

Share this post


Link to post
Share on other sites
bryan-hadaway

Just need to remove the #. Thanks, Bryan

Share this post


Link to post
Share on other sites
gayatriom

Hey Bryan. It's crazy, but that doesn't work! Ah!

Share this post


Link to post
Share on other sites
gayatriom

I need the button to be in an active state because once a user clicks the button there's no other way to indicate where they are on the site.

Share this post


Link to post
Share on other sites
Andrew

This is just a specificity issue and a syntax issue. Make the CSS more specific. If you're using Firebug you should be able to see your custom rules being 'crossed out' by the rules with more specificity. `body #primary-nav .current-menu-item a{color:#7B3D42;background-color:#ffffff}` Please read up on Firebug and CSS, because you'll need to know it to get where you want with your site: http://www.pagelines.com/docs/changing-colors-fonts

Share this post


Link to post
Share on other sites
gayatriom

So. I still haven't been able to get this to work. Is it possible for someone to go into my site and look at it? The site is blocked off so i can send it a username and pw.

Share this post


Link to post
Share on other sites
gayatriom

ul.sf-menu li:hover{color:#7B3D42;background:#ffffff} body #primary-nav .current-menu-item a{color:#7B3D42;background:#ffffff} #buddypress-page ul.button-nav{list-style-type:upper-roman;background:none} #grandchildnav .current_page_item > a(background-color:white} #soapbox .dcol-pad { margin: 0 0 0em; } #grandchildnav .current_page_item a:hover, .headline h1 a:hover,#grandchildnav .current_page_item a:active{ color:#7B3D42;background:white;} #subnav_row li.current_page_item a, grandchildnav.current_page_item > a { color:#7B3D42;background:white;} #carousel .content-pad{background:transparent} a > span.sf-sub-indicator { /* give all except IE6 the correct values */ top: .8em; background-position: -10px, -88px; /* use translucent arrow for modern browsers*/ } body #primary-nav .current-menu-item a{color:#7B3D42;background-color:#ffffff} #primary-nav li a{ font-size: .85em; } #primary-nav ul.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active { outline: 0; color:#7B3D42;background:#ffffff; } primary-nav .main-nav li a:hover {color:#7B3D42;background:#ffffff} primary-nav .main-nav li a:active {color:#7B3D42;background:#ffffff} #primary-nav #nav_row{border-color:transparent} #primary-nav ul.sf-menu ul li, .post-nav {border-color:transparent;} primary-nav .current-menu-item a{color:#ffffff; background:#7B3D42;} primary-nav .current_page_item a{color:#ffffff; background:#7B3D42;} .current-menu-item{color:#ffffff; background:#7B3D42;} .current-menu-item a{color:#ffffff; background:#7B3D42;} #primary-nav ul.sf-menu li { float: left; position: relative; margin: 0; background:transparent; } #primary-nav ul.sf-menu li a{ padding: 10px 15px 10px; margin:1px; text-align:left} #primary-nav ul.sf-menu li a{color:#ffffff; background:#7B3D42; border-style:ridge; border-color:#7B3D42; border-width:1px; -moz-box-shadow:inset 0 0 5px #000000; -webkit-box-shadow:inset 0 0 5px #000000; box-shadow:inset 0 0 5px #000000;} .button, input[type="submit"], input[type="button"], .submit{ text-decoration: none; font-size: 12px; line-height: 12px; display: block; float: left; background: #eee; border: 1px solid #d1d1d1; border-top: 1px solid #e1e1e1; border-left: 1px solid #e1e1e1; color: #7b3d42; margin-right: .8em; padding:6px; } .swa-activity-list div.swa-activity-meta a.acomment-reply { background: #7b3d42; border-bottom: 1px solid #000; border-right: 1px solid #000; color: #ffffff; } div.swa-activity-meta a.acomment-reply:hover { background: #white; color: #7B3D42; border-color: #7B3D42; } .widget ul li a:hover{ text-decoration: underline; background: #white; color: #7B3D42; border-color: #7B3D42; } div.swa-activity-meta a:hover { background: #white; color: #7B3D42; border-color: #7B3D42; } .swa-activity-list div.swa-activity-meta a { font-size: 11px; background: #7B3D42; border-bottom: 1px solid #000; border-right: 1px solid #000; color: #ffffff; padding: 4px 8px; text-decoration: none; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; margin-right: 3px; } .post-nav, .current_posts_info, .post-footer, blockquote, input, textarea, .searchform .searchfield, .wp-caption, .widget-default, #buddypress-page div.activity-comments form .ac-textarea, #buddypress-page form#whats-new-form #whats-new-textarea, #grandchildnav.widget, .fpost .post-thumb img, .clip .clip-thumb img, .author-thumb img, #carousel .content ul li img, #carousel .content ul li a:hover img, #feature-footer {-moz-box-shadow:inset 0 0 8px #000000; -webkit-box-shadow:inset 0 0 8px #000000; box-shadow:inset 0 0 8px #000000; border-style:ridge; border-color:#68353C2; border-width:2px; } .icons .stumbleupon {background: url('../platformpro/images/sprite-socialicons.png') no-repeat -176px 0;display:none} .icons .stumbleupon:hover {background: url('../platformpro/images/sprite-socialicons.png') no-repeat -176px -22px;display:none} #swa-whats-new{width:97%; -moz-box-shadow:inset 0 0 8px #000000; -webkit-box-shadow:inset 0 0 8px #000000; box-shadow:inset 0 0 8px #000000; border-style:ridge; border-color:#68353c; border-width:2px; } form.standard-form textarea { width: 75%; height: 120px; border: solid black 2px; } .postbox .inside { color:black; background-color: #fafafa; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px; border-right: solid #dfdfdf 1px; border-bottom: solid #dfdfdf 1px; padding: 5px; } #ep-registration-box thead tr { -moz-border-radius: 5px; background-color: #ddd; border-bottom: solid 1px #ffe8c4; border-right: solid 1px #ffe8c4; } /* Primary Font Style */ .font-primary, body, .commentlist, .font-highlight, h1, h2, h3, h4, h5, h6{ font-family:arial, helvetica, sans-serif; text-align:left} } /* Secondary Font Style */ .font-sub, #primary-nav li a, .metabar, .subtext, .subhead, .widget-title, .post-comments, .reply a, .editpage, .site-description , #pagination .wp-pagenavi, .fcontent .flink,.post-edit-link, #wp-calendar caption, #wp-calendar thead th, #callout .callout_copy, #breadcrumb, .ticker-wrap, h5.sidebartitle, #highlight .highlight-subhead, .soapbox-links a, .fancybox, .standard-form .admin-links, #featurenav a, #feature-footer span.playpause, .pagelines-blink{ font-family: arial, helvetica, sans-serif;; text-transform: uppercase; letter-spacing: .3em; } #buddypress-page #object-nav ul li.selected a,#buddypress-page #subnav li.current a,#buddypress-page #subnav a:hover,#buddypress-page #object-nav ul li a:hover{background:#e8e8e8} hr, .fpost, #site #dsq-content h3, .post.fpost .entry, .fpost.sticky{border-color:transparent;} #feature-footer {background:black;} #feature-footer{border-color:black;} #feature-footer .feature-footer-pad{ border-top: 1px solid #000; border-left: 1px solid #000; } h3 {margin-top:5px;font-size: 1.5em;} .edit-form input[type="text"], .edit-form textarea { border: solid black 1px; font-size: 12px; width: 95%; background-color:white} } textarea, .searchform .searchfield, .wp-caption, .widget-default, .commentlist .alt, #wp-calendar #today, #buddypress-page div.activity-comments form .ac-textarea, #buddypress-page form#whats-new-form #whats-new-textarea, .post-nav, .current_posts_info, .post-footer, #twitterbar, #carousel .content-pad, .success, .sf-menu li li, .sf-menu li li, .sf-menu li li li{background:white;} #buddypress-page div.activity-comments form textarea, #buddypress-page form#whats-new-form #whats-new-textarea textarea{background: white; border: solid black 2px;} #buddypress-page #container .submit { border:none; background:none; padding:7px 0px; margin: 0px; } #buddypress-page #object-nav ul li a, #buddypress-page table.forum .td-title a, #buddypress-page #subnav a:hover, #buddypress-page #subnav li.current a {color:#7B3D42;background:white} #sf-menu li li, .sf-menu li li, .sf-menu li li li{background:white} #buddypress-page #subnav, #buddypress-page .activity .activity-inner, #buddypress-page table.forum th, #buddypress-page div.activity-comments form .ac-textarea, #buddypress-page form#whats-new-form #whats-new-textarea {background:transparent;} #page-canvas{ margin: 0 auto;background-attachment:fixed; } .canvas #page, .full_width #page, body.fixed_width{background-position:50% 0%;background-attachment:fixed;} #footer a, #footer .widget-title, #footer li h5 a{color:#7b3d42;text-decoration:underline;} /* @ Posts */ .fpost { margin-bottom: 0em;} .fpost.sticky{ padding: 0px 0px 5px; } .fpost .post-excerpt, .fpost .entry_content { font-size: 3em; line-height: 4em; letter-spacing:normal; } .swa-activity-list .swa-activity-header a:first-child, span.highlight { background: #7b3d42; border-bottom: 1px solid #000; border-right: 1px solid #000; color: #f2f6fa;, padding: 3px 8px; text-decoration: none; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; margin-right: 3px; } p.maincategoryclass { background:#e8e8e8; text-align:center; } .widget-title, .widget-title a:hover, h3.widget-title a:hover, a.site-title, .entry-title a, .entry-title a:hover{ text-align:left; padding:6px 8px 3px 0px; margin-bottom: .6em; font-size: .9em; text-transform: uppercase; letter-spacing: 2px; } / .ep-event-details { -moz-border-radius:3px 3px 3px 3px; background:none repeat scroll 0 0 #white; border-bottom:1px solid #FFE8C4; border-right:1px solid #FFE8C4; color: #7b3d42; font-size:13px; line-height: 20px; font-weight:normal; margin-top:6px; padding:1px 8px; text-decoration:none; margin-bottom: 10px; } .ep-event-title { border: solid 1px #ddd; padding: 1px; color: #7b3d42 !important; background color:#fffffff text-decoration: none; display: block; width: 80px; overflow: hidden; } iframe.bfox-passage-iframe { border: 3px solid #EEE; width: 100%; height: 350px; margin-top:45px; } .hndle { color: #7b3d42; background-color: #ffffff; -moz-border-radius-topright: 5px; -moz-border-radius-topleft: 5px; border-right: solid 1px #ffe8c4; border-bottom: solid 1px #ffe8c4; font-size: 14px; padding: 5px; margin: 0; } .uiwelcome { margin:0 0 20px 0; text-align:justify; display:block; } .fpost { margin-bottom: 0em; } #content_sidebar{ margin: 0em 0; } .widget{ margin-bottom: 1em; overflow: visible; } .widget ul li{ list-style:none; display: inline-block; padding: .3em 2px; } .bpm-report-link { text-decoration: none; margin-right:1em; } form.standard-form label, form.standard-form span.label { display: inline-block; margin: 15px 0 5px 0; } /* The editing form. */ #bpcp_thumbnail { overflow: visible; } .ref_seq_prev, .ref_seq_next { font-size: 1em; margin-top: 4em; } div.bfox-passage-iframe-wrap { text-align: left; margin: 0 0 10px 0; } form.dir-form div.dir-search { float: auto; width: 45%; margin: 0 0 25px 0; } div.item-list-tabs { margin: 15px 0; padding: 5px 0; border-bottom: 1px solid #ddd; overflow: hidden; clear: both; } /* @ Posts */ .fpost { margin-bottom: 0em;} .fpost.sticky{ padding: 0px 0px 5px; } .fpost .post-excerpt, .fpost .entry_content { font-size: 1.1em; line-height: 1em; } #post-content { text-color: black; padding: 0; -moz-border-radius: 0; } h1, h2, h3, h4, h5, h6{ font-weight: normal; } /* @ Highlight Section */ #highlight { text-align: center; } #highlight .content-pad .highlight-area{padding: 20px 0px;} #highlight .copy-pad .highlight-area{padding: 20px 15px;} #highlight .highlight-head{ font-size: 2.5em; } #highlight .content .highlight-subhead, #highlight .copy-pad .highlight-subhead{ font-size: .85em; letter-spacing: .2em; } #highlight .hl-image-bottom{ margin: 3em 0 0 0; } #highlight .highlight-splash img {max-width: 100%;} #buddypress-page form.dir-form div.dir-search {width:19%;} .ep-cal-cell { border: solid #e8e8e8 1px; height: 70px; width: 120px; padding: 5 px } #edButtonHTML, #edButtonPreview { color:black; background-color: #eee; padding: 5px 10px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; font-size: 14px; cursor: default; } #ep-cal { border: solid #black 1px; margin-left:auto; margin-right:auto; } /* @ Text Headers */ h1 { font-weight: normal; text-align:center; } .center { margin-top:10px; margin-left:auto; margin-right:auto; width:70%; text-align:left; } padding:5px; line-height: 1.2em; margin-bottom: .1em; } .container { text-align:center; } .center { margin-left:auto; margin-right:auto; width:70%; background-color:#b0e0e6; text-align:left; #boxes h3{ padding: 0 0 2px 0; margin-left:auto; margin-right:auto; .dcol_3{width: 375px; margin-left: 20px;} font-size: 1.3em; } .fpost { margin-bottom: 0em; } #soapbox .content-pad { padding-top: 0em; } #soapbox .dcol-pad { margin: 0 0 0em; }

Share this post


Link to post
Share on other sites
bryan-hadaway

Wait, that's all custom CSS that you added? Or did you copy all that to Custom CSS and then make your modifications. Something definitely isn't right, messy, erroneous or overkill here. I recommend running your site through: http://jigsaw.w3.org/css-validator/ Thanks, Bryan

Share this post


Link to post
Share on other sites
ricardo

Gayatri, Your css code is full of errors and junk code. You're also repeating the same declarations with different colors, which overrides the previous code. My advice is to clear whatever customisations you did in the css files, clear the custom css rules you've add in PlatformPro admin (save all this files and code on your local disk for future ref if you need it) and start fresh! It would also help to be able to see your site. Ricardo

Share this post


Link to post
Share on other sites
gayatriom

haha. ya it's me. let me clean it up. and then i can paste it here again.

Share this post


Link to post
Share on other sites
ricardo

Let me restate the importance of having access to the site. The css code might be correct but we cannot tell if you're doing it wrong by adding style to #this instead of .this .

Share this post


Link to post
Share on other sites
gayatriom

I can def. send in the login info, etc. I have no qualms. I didn't even realize there was a difference . How about i clean this up at least. Where can I email the login info?

Share this post


Link to post
Share on other sites
bryan-hadaway

Let's have you validate your code first and go from there. Thanks, Bryan

Share this post


Link to post
Share on other sites
gayatriom

Ok. So I ran the site through css validator. I don't really understand the errors at all. It's the first time I'm doing it. Property -webkit-box-shadow doesn't exist : 0 4px 8px What does that mean? And how do I fix that? Can you help me? Like if it says I also went through my custom code and didn't find any duplicates..

Share this post


Link to post
Share on other sites
bryan-hadaway

Don't worry about -webkit or -moz issues, we're looking for actual broken CSS. Thanks, Bryan

Share this post


Link to post
Share on other sites
gayatriom

Ok. One more thing... Property text-shadow doesn't exist in CSS level 2.1 but exists in : #000 0 -1px 0 #000 0 -1px 0 What does that mean?

Share this post


Link to post
Share on other sites
ocalaweb

Try using "!important" on the css you want to fire as i'm finding I have to use that to force my custom css most of the time... Just a thought. ie. .some-class {background-color:#ffffff !important}

Share this post


Link to post
Share on other sites
gayatriom

Hey Bryan! I used the important call out function and it all worked fine! I also made the changes that the css validator told me to make.. thanks for all you help! Thanks Alina!

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  

×