• 0
Sign in to follow this  
Followers 0

Active Nav and background colour

Question

Posted · Report post

Hi,

 

I was wondering if someone could help me out with a little css tweak?

 

My website is www.johnlathamweddings.com

 

- I would like the very faint grey box that appears behind the nav on the active page to be gone

- I would like the active nav page name to be the gold which appears on the hover.

 

Below is my custom code.

 

Thank you

/* Main content font size and page margins */

body {
     padding-top: 20px;
     padding-bottom: 40px;
}


/* 3 boxes titles */

#boxes h3 {
    font-size: 14px;
color: #4D4D4D;
text-align: center;
}


/* 3 boxes text */

.fboxtext {
    font-size: 12px;
color: #7e7e7e;
text-align: center;
     line-height: 16px;
}


/* Navigation bar borders */

#nav_row.main_nav, ul.sf-menu ul li {
    border-bottom-color: #e9e9e9;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-top-color: #e9e9e9;
    border-top-style: solid;
    border-top-width: 1px;
}


/* Centered Navigation Bar */

#nav_row ul{float:none !important;text-align:center;}
#primary-nav li{float:none !important;display:inline !important;}
#primary-nav a{float:none !important;display:inline !important;}
.main-nav {line-height:2.5em !important;}


/* Nav bar properties and spacing */

#primary-nav a {
font-size: 11px; 
color: #666666;
padding: 5px 15px;
text-transform: uppercase;
letter-spacing: 2px;
}


/* Nav bar link hover */

#primary-nav .main-nav li a:hover {
color: #a1874f;
}

#primary-nav .main-nav li a:active {
color: #a1874f;
}

#primary-nav .main-nav li a:active {
text-color: #a1874f;
}


/* Page width for content */

.fullwidth #pagelines_content #column-main {
width: 800px !important;
}
.fullwidth #pagelines_content #column-wrap {
width: 800px !important;
}


/* Content Margin */

.fpost {
border:0;
margin-bottom: 0px;
margin-top: 10px;
}


/* Text widget footer properties */

li#text-2 {
font-size: 11px;
line-height: 23px;
color: #7e7e7e;
font-family: Georgia;
float: center;
}

li#text-3 {
font-size: 11px;
line-height: 15px;
color: #7e7e7e;
font-family: Georgia;
float: right;
}

#fullwidth_sidebar .content-pad {
    border-top-color: #e9e9e9;
    border-top-style: solid;
    border-top-width: 1px;
    margin-top: 28px;
    padding-top: 4px;
text-align: center;
}


/* Content Space */

.fullwidth #column-main .mcolumn-pad {
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 20px;
}


/* Content Text */

.fpost .post-excerpt, .fpost .entry_content {
line-height: 18px !important;
font-size: 12px !important;
}


/* Banner Padding */

.banner_container .banner-area{
        padding-bottom: 0;}


/* Feature squares to dots */

#featurenav a.activeSlide { -webkit-border-radius: 8px;-moz-border-radius: 8px;border-radius: 8px; }
#feature-footer.dots a { -webkit-border-radius: 8px;-moz-border-radius: 8px;border-radius: 8px; }


/* Feature footer background */

#feature-footer, #feature-footer .feature-footer-pad {background:none !important;}


/* iPhone Non Scaling */

body {
-webkit-text-size-adjust:none;
}


/* About Page Minimum Height */

.page-id-61 #maincontent {min-height: 611px }



/* Services Page Minimum Height */

.page-id-86 #maincontent {min-height: 611px }



/* Testimonials Page Minimum Height */

.page-id-66 #maincontent {min-height: 611px }



/* Contact Page Minimum Height */

.page-id-58 #maincontent {min-height: 611px }



/* Galleries Page Minimum Height */

.page-id-470 #maincontent {min-height: 611px }


/* Prices Page Minimum Height */

.page-id-847 #maincontent {min-height: 611px }


div.entry_content { margin-bottom: -27px; }



.fixed_width #boxes .dcol-pad {
    padding-bottom: 10px;
    padding-left: 0;
    padding-right: 0;
    padding-top: 10px;
}

Share this post


Link to post
Share on other sites

7 answers to this question

  • 0

Posted · Report post

Hi, johnlatham  add these changes (red) to what you already have and it should give you the desired effect.

 

#primary-nav a {
font-size: 11px;
color: #666666;
padding: 5px 15px;
text-transform: uppercase;
letter-spacing: 2px;
background-color: white;
}
 
#primary-nav .main-nav li a:hover {
background-color: #a1874f;
}
 
~Aires
 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Does Aires suggestion resolve your issue ?

 

Also, in future johnlatham, when posting code can you please use our paste bin service - http://forum.pagelines.com/pst/

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Thank you, I'll try the code later on tonight and let you know if it has helped :)

Ok thanks I'll use the code paste as suggested in future

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi @Aires,

 

Part of your code worked (the removal of the light grey box on the active page) but the other part didn't.

 

Its the actual nav text on the active page I need as the gold, not a background colour.

 

I tried...

 

#primary-nav .main-nav li a:active {
color: #a1874f;
}

 

But that's not worked.

 

Any help would be great thanks.

 

John

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi John,

 

Try this:

 

#primary-nav .main-nav li.current_page_item a {
  color: #A1874F;
}
 
Also, it does appear that you're not using a menu you have created, but instead using the default page menu generated by WordPress. If you do in the future use a custom menu, you will need to replace the code above with the following:
 
#primary-nav .main-nav li.current_menu_item a {
  color: #A1874F;
}

 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Thanks Danny, I'll give this a go later today. Cheers for the help dude!

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

No problem.

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  
Followers 0