Jump to content

Archived

This topic is now archived and is closed to further replies.

courtwest

Change Current Menu Item Color

Recommended Posts

courtwest

Hello,

 

I am new to wordpress and am trying to change the current menu item color in the navigation bar.

Currently I have this for CSS

 

.sf-menu > li.current-menu-item > a,
  background-color: #09aee0;
}
.sf-menu > li.sfHover > a,
.sf-menu > li > a:hover {
  background-color: #09aee0;
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(39%, #09aee0), to(#09aee0));
  background-image: -webkit-linear-gradient(#ffffff, #fdfdfd 39%, #09aee0);
  background-image: -moz-linear-gradient(top, #ffffff, #fdfdfd 39%, #09aee0);
  background-image: -o-linear-gradient(#ffffff, #fdfdfd 39%, #09aee0);
  background-image: linear-gradient(#ffffff, #fdfdfd 39%, #09aee0);
  background-repeat: no-repeat;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#09aee0', GradientType=0);
  color: #09aee0;
}
 
but the color appearing is still not the aqua blue I am looking for but is instead some weird blue and I cannot see anywhere in my CSS where this color is referenced. Hover color and all other menu colors are showing correctly. If this is not the right area of code please let me know! Thanks for any help!! :)

Share this post


Link to post
Share on other sites
courtwest

I also have this further down:

 

  .sf-menu > li.current-menu-item > a {
    background: #09aee0;
  }

Share this post


Link to post
Share on other sites
James B

Hi there, try

 

.sf-menu > li > a:hover, .sf-menu > li.sfHover > a, .sf-menu > li.current-menu-item > a, .sf-menu > li.current_page_item > a {
    background: none repeat scroll 0 0 #09aee0;
}

Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
courtwest

That worked wonderfully, thank you so much James!!

Share this post


Link to post
Share on other sites
James B

You're welcome, thank you for updating the thread and letting us know.


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
courtwest

Hi James, James B

 

I am having another issue where my sub-menu displays exactly as I would like on google Chrome but when I try on Explorer, it shows totally different....

I currently have this for CSS

 

}
.sf-menu > li .sub-menu {
  top: 99%;
  width: 190px;
  background: #ffffff;
  padding: 4px 0;
  border-top: 2px solid #b5b5b5;
}
.sf-menu > li .sub-menu:before {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  border-left: 4px solid #999999;
  border-right: 4px solid #999999;
  border-bottom: 4px solid #999999;
  top: -8px;
  left: 20px;
}
.sf-menu > li .sub-menu .sub-menu:before {
  display: none;
}
.sf-menu > li .sub-menu li {
  width: 100%;
  background: #ffffff;
}
.sf-menu > li .sub-menu li a {
  padding: 5px 20px 5px 37px;
  font-family: 'Droid', sans-serif;
  white-space: nowrap;
  color: #000000;
  font-size: 14px;
  list-style: 20px;
  border-left: 6px solid #09aee0;
  border-right: 6px solid #09aee0;
  border-bottom: 6px solid transparent;
  text-align: left;
  text-transform: uppercase;
}
.sf-menu > li .sub-menu li a .sf-sub-indicator {
  top: 31%;
  right: 10px;
  background: #ffffff;
  position: absolute;
}
.sf-menu > li .sub-menu li > a:hover,
.sf-menu > li .sub-menu li.sfHover > a,
.sf-menu > li .sub-menu li.current-menu-item > a {
  background: #09aee0;
}
.sf-menu > li .sub-menu li > a:hover .sf-sub-indicator,
.sf-menu > li .sub-menu li.sfHover > a .sf-sub-indicator,
.sf-menu > li .sub-menu li.current-menu-item > a .sf-sub-indicator {
  background: #09aee0 -10px 0 no-repeat;
}
 
Any help you could offer is greatly appreciated!

Share this post


Link to post
Share on other sites
James B

Hi there, unfortunately I don't have access to IE, could you please screenshot the view in each so we can see how they differ.


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
courtwest

It has somehow worked itself out but thanks for the help James!

Share this post


Link to post
Share on other sites
greenfly

Thank you for letting us know :) 


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
courtwest

Hello again - I am trying to make my tagline two lines  to read like this:

 

Association Management

Achieving your goals is our business

 

How can I edit the code to make it look like this? Again my website is www.managewise.ca

 

The current tagline code is as follows:

 

}
.logo_tagline {
  color: #b5b5b5;
  padding: 0 0 0 10px;
  margin: 0;
  text-transform: none;
  font-size: 20px;
  font-family: 'Droid sans', sans-serif;
}

Share this post


Link to post
Share on other sites
greenfly

Have you tried to add </br> after 'Association Management'?


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
courtwest

Where would I add that in? Right in the customization? Or should I add a line that says:

content: "Association Management</br>Achieving your goals is our business"

 

in the code?

Share this post


Link to post
Share on other sites
courtwest

When I add it right in to the Customize page where I can enter the tagline - it shows the </br> just as text.

Where can I edit the content in the code?

 

Thank you for your help on this, I appreciate it!

Share this post


Link to post
Share on other sites
courtwest

In my header.php my html code reads as:

 

<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" <?php language_attributes();?>> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" <?php language_attributes();?>> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" <?php language_attributes();?>> <![endif]-->
<!--[if IE 9 ]><html class="ie ie9" <?php language_attributes();?>> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html <?php language_attributes();?>> <!--<![endif]-->
<head>
<title><?php if ( is_category() ) {
echo theme_locals("category_for")." &quot;"; single_cat_title(); echo '&quot; | '; bloginfo( 'name' );
} elseif ( is_tag() ) {
echo theme_locals("tag_for")." &quot;"; single_tag_title(); echo '&quot; | '; bloginfo( 'name' );
} elseif ( is_archive() ) {
wp_title(''); echo " ".theme_locals("archive")." | "; bloginfo( 'name' );
} elseif ( is_search() ) {
echo theme_locals("fearch_for")." &quot;".esc_html($s).'&quot; | '; bloginfo( 'name' );
} elseif ( is_home() || is_front_page()) {
bloginfo( 'name' ); echo ' | '; bloginfo( 'description' );
}  elseif ( is_404() ) {
echo theme_locals("error_404")." | "; bloginfo( 'name' );
} elseif ( is_single() ) {
wp_title('');
} else {
wp_title( ' | ', true, 'right' ); bloginfo( 'name' );
} ?></title>
<meta name="description" content="<?php wp_title(); echo ' | '; bloginfo( 'description' ); ?>" />
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="profile" href="http://gmpg.org/xfn/11" />
<?php if(of_get_option('favicon') != ''){ ?>
<link rel="icon" href="<?php echo of_get_option('favicon', "" ); ?>" type="image/x-icon" />
<?php } else { ?>
<link rel="icon" href="<?php echo get_stylesheet_directory_uri(); ?>/favicon.ico" type="image/x-icon" />
<?php } ?>
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo( 'name' ); ?>" href="<?php bloginfo( 'rss2_url' ); ?>" />
<link rel="alternate" type="application/atom+xml" title="<?php bloginfo( 'name' ); ?>" href="<?php bloginfo( 'atom_url' ); ?>" />
<link rel="stylesheet" type="text/css" media="all" href="<?php echo get_stylesheet_directory_uri(); ?>/bootstrap/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" media="all" href="<?php echo get_stylesheet_directory_uri(); ?>/bootstrap/css/responsive.css" />
<link rel="stylesheet" type="text/css" media="all" href="<?php echo get_template_directory_uri(); ?>/css/camera.css" />
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
<style type="text/css">
<?php echo htmlspecialchars_decode(of_get_option('custom_css')); ?>
 
<?php $background = of_get_option('body_background');
if ($background != '') {
if ($background['image'] != '') {
echo 'body { background-image:url('.$background['image']. '); background-repeat:'.$background['repeat'].'; background-position:'.$background['position'].';  background-attachment:'.$background['attachment'].'; }';
}
if($background['color'] != '') {
echo 'body { background-color:'.$background['color']. '}';
}
};
?>
 
<?php $header_styling = of_get_option('header_color'); 
if($header_styling != '') {
echo '.header {background-color:'.$header_styling.'}';
}
?>
</style>
<?php

Share this post


Link to post
Share on other sites
greenfly

could we have a link to your site? 


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
James B

Hi try the following.

 

Go to Settings > General from the wp admin.

 

In the tag line field please in the </br> in the text and save so it looks like "Association Management</br>Achieving your goals is our business"

 

Then view the live page.


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
courtwest

Thanks James, but it still just reads the code as part of the text. I will leave it on the live page for you to see. Any other suggestions? Thanks for your help!

Share this post


Link to post
Share on other sites
greenfly

If you can send us an admin logon for your site ill take a look at how you have this site setup. i think there is a much easier way. 


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
courtwest

Sent you an email Martin. Thanks a lot!

Share this post


Link to post
Share on other sites
Danny

I am at a loss as to why you're asking our staff for support when you're not even using our product. If you have issues, you will want to contact the Cherry Framework support, which is the product you're using.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

×