Jump to content

Archived

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

johnlatham

Active Nav and background colour

Recommended Posts

johnlatham    1
johnlatham

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
Aires+    258
Aires

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
 

ndTgvai.jpg

Visit iheartpagelines.com for the latest tutorials on PageLines related products.

 

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

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/


Please search our forums, before posting!

Share this post


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

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
Danny    1,327
Danny

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

 


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
johnlatham    1
johnlatham
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
Danny    1,327
Danny

No problem.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

×