Jump to content


Photo

Active Nav and background colour


  • Please log in to reply
7 replies to this topic

#1 johnlatham

johnlatham

    Super Member

  • Members
  • PipPipPipPip
  • 117 posts

Posted 28 August 2014 - 08:51 PM

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


#2 Aires

Aires

    Advocate

  • Members

  • 357 posts
  • LocationAlabama
  • Framework Version:DMS2
  • Country: Country Flag

Posted 29 August 2014 - 02:04 AM

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
 


#3 Danny

Danny

    Is Awesome!

  • Moderators
  • 17966 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 29 August 2014 - 12:47 PM

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/



#4 johnlatham

johnlatham

    Super Member

  • Members
  • PipPipPipPip
  • 117 posts

Posted 29 August 2014 - 06:33 PM

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

#5 johnlatham

johnlatham

    Super Member

  • Members
  • PipPipPipPip
  • 117 posts

Posted 29 August 2014 - 08:09 PM

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



#6 Danny

Danny

    Is Awesome!

  • Moderators
  • 17966 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 31 August 2014 - 11:06 AM

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

 



#7 johnlatham

johnlatham

    Super Member

  • Members
  • PipPipPipPip
  • 117 posts

Posted 31 August 2014 - 11:18 AM

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

#8 Danny

Danny

    Is Awesome!

  • Moderators
  • 17966 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 31 August 2014 - 12:04 PM

No problem.