• 0

How to change Nav Bar page color


Question

Posted · Report post

I've selected a red Navbar. Now how can I change the shade of my red navbar to a darker shade of red?

 

See americansendingabuse.org

Share this post


Link to post
Share on other sites

7 answers to this question

  • 0

Posted · Report post

The Navbar comes pre-built with a number of color options. However, if you want to add your own color scheme, you can either use custom CSS like Batman did above or make a child section of the Navbar and add your own PHP code and LESS CSS.

 

However, you can use LESS CSS to override the Navbar with a mixin, which will basically be a couple lines of code.

 

For example:

 

#site .navbar.pl-color-red {

#gradient .vertical(#000,#333);

}

 

Add that to your custom CSS and then replace the #000 and #333 with your preferred color(s). If you want a gradient, then use two different colors like I have in my example, if you want to have a flat color i.e. the same color (no gradient) then use the same color twice.

 

For example:

 

#site .navbar.pl-color-red {

#gradient .vertical(#000,#000);

}

 

You will likely need to also make changes to hover, active states and possibly drop downs too. Therefore, I recommend you read through our customization documentation here for assistance - http://docs.pagelines.com/customize/how-to-customize

 

Please be aware that we do not provide custom CSS support especially extensive CSS, small snippets of code are down to our staffs discretion.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

could you log these as four separate forum topics? 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I did. I left first question here for your answer.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi redstate

I use this code in my test forum for change all colors to green, you can change this as you like

 

/*--COLOR NAVBAR--*/
.navbar.pl-color-base .navline > li:hover > a, .navbar.pl-color-base .navline > li.current-menu-item > a, .navbar.pl-color-base .navline > li.dropdown.open > a {
color: rgb(0, 0, 0);
background-color: rgb(255, 255, 255);
box-shadow: 0px -4px 0px rgb(33, 172, 80) inset;}
 
.dropdown-menu li > a:hover, .dropdown-menu li > a:focus, .dropdown-submenu:hover > a, .dropdown-menu li.current-menu-item > a {
text-decoration: none;
text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.5);
color: rgb(255, 255, 255);
background-color: rgb(33, 172, 80);
background-image: linear-gradient(bottom, rgb(39,207,95) 9%, rgb(34,172,80) 50%);
background-image: -o-linear-gradient(bottom, rgb(39,207,95) 9%, rgb(34,172,80) 50%);
background-image: -moz-linear-gradient(bottom, rgb(39,207,95) 9%, rgb(34,172,80) 50%);
background-image: -webkit-linear-gradient(bottom, rgb(39,207,95) 9%, rgb(34,172,80) 50%);
background-image: -ms-linear-gradient(bottom, rgb(39,207,95) 9%, rgb(34,172,80) 50%);
background-repeat: repeat-x;}
 

It is advisable to learn how to do this on your own too.  

http://docs.pagelines.com/customize/how-to-customize

 

My exemplary code is not necessarily applicable as written, to your site, so please adjust accordingly.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Is there not a simpler way? That's a lot of code for a simple little change.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Thank you very much for taking the time to explain all of this plus show me the code. I never expected that darkening a color would require so much work! I guess for now I will just leave the navbar the same color red since I'm really not a developer and just wanted to publish a nice site asap.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Once you have done this you will be able to do it again in future and apply this learned skill to other tasks you may want to achieve. 

1 person likes this

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