• 0

Nav Bar Customisation


Question

Posted · Report post

Hi, 

 

Am a bit frustrated with how to change the color of the nav bar on a pageline site, i have made changes to the following CSS but it just wont change and have spent time on the forum and cant find basic instruction on how to. 

Am quite okay with CSS but it have not been successful with changing the colors of the background to green. 

 

Can you please help. 

 

Attached is the screen shot

 

the site is mansag.org

 

.navbar.pl-color-black-trans {
    background-color: #00640C;
    background-image: -moz-linear-gradient(center top , rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.9));
    background-repeat: repeat-x;
    border-top: 1px solid rgba(0, 0, 0, 0.9);
}
 
Looking forrward to a clear guidance please.
 
thank you 
 
 

Share this post


Link to post
Share on other sites

8 answers to this question

  • 0

Posted · Report post

Ah,

 

Try this added to your custom code:

.navbar.pl-color-black-trans {
    background-color: rgba(0, 100, 12, 0.12);
    background-image: -moz-linear-gradient(center top , rgba(0, 100, 12, 0.8), rgba(0, 100, 12, 0.9));
    background-repeat: repeat-x;
    border-top: 1px solid rgba(0, 100, 12, 0.9);
}
1 person likes this

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I'm looking at your site on Firefox and the background color is green, and the exact shade specified in your CSS.  Did you publish and refresh? Look in any other browsers?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Thanks for your reply and coming to my rescue :)

Its the top navigation its black on mine browswer and i want the nav bar to be green.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Thanks a Billion Rob. I guess its the rgba values that solved the problem. 

 

How do i get this value for future. 

 

thanks again,

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Apologies, it only work for Firefox but not on Chrome? any clue :)

 

thanks

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Try this:
.navbar.pl-color-black-trans {
background-color: rgba(0,100,12,0.12);
background-image: -moz-linear-gradient(top,rgba(0,100,12,0.8),rgba(0,100,12,0.9));
background-image: -ms-linear-gradient(top,rgba(0,100,12,0.8),rgba(0,100,12,0.9));
background-image: -webkit-gradient(linear,0 0,0 100%,from(rgba(0,100,12,0.8)),to(rgba(0,100,12,0.9)));
background-image: -webkit-linear-gradient(top,rgba(0,100,12,0.8),rgba(0,100,12,0.9));
background-image: -o-linear-gradient(top,rgba(0,100,12,0.8),rgba(0,100,12,0.9));
background-image: linear-gradient(top,rgba(0,100,12,0.8),rgba(0,100,12,0.9));
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='rgba(0,100,12,0.8)', endColorstr='rgba(0,100,12,0.9)', GradientType=0);
border-top: 1px solid rgba(0,100,12,0.9);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444',EndColorStr='#222222');
}
1 person likes this

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Thanks a lot Rob, it worked. 

Problem solved. 

 

Its the best answer :)

 

Cheers

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Great!

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