Jump to content

Archived

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

redstate

How to change Nav Bar page color

Recommended Posts

greenfly    230
greenfly

could you log these as four separate forum topics? 


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
redstate    0
redstate

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

Share this post


Link to post
Share on other sites
batman    389
batman

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.


Life is too short to remove USB safely ...

Share this post


Link to post
Share on other sites
redstate    0
redstate

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

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.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
redstate    0
redstate

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
greenfly    230
greenfly

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. 

  • Like 1

The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites

  • Similar Content

    • Grant Turck
      By Grant Turck+
      Navbar Broken on All Devices When Not Logged Into Wordpress. See screenshots attached from mobile. What is causing this issue and how do I fix? Site is venicepride [dot] org.


    • PierreFF
      By PierreFF+
      Hello, 
      I have an issue with NavPro on mobile when the link of the menue is on the same page. 
      Here is my website: http://foundersofthefuture.co
      The isssue comes from the fact that in my menue most of the items send somewhere else on the same page using anchor link (eg. #container_u788888). 
      This works well on desktop but on mobile, nothing happens when clicking on the link. One of the link of the menue of the homepage "France" sends to another page of the website and this one works well even on mobile. 
      I am using the Pagelines framework theme and also used a wordpress plugin (jQuery Smooth Scroll) for smooth scrolling . 
      Thanks in advance for your help and let me know if I need to provide more information. 
      Best,
      Pierre
    • tristanrodgers
      By tristanrodgers+
      Hi there!
      I'd love to have some social media buttons in my navbar like my online-shop has!
      http://mc1r-magazine.com/
      Can someone explain me how to create them? I tried a lot but don't know how to realize them...
      Greetings from Germany,
      Tristan
    • jeomiland
      By jeomiland+
      Hi guys. Just now trying out Platform 5. I like the reletive simplcity of the new interface but there are things I'm used to in DMS that I'm not seeing yet in 5. Is there a good manual, documentation, video series about some of the basics?
      In particular, I've got a simple navigation menu, created the standard way in WP menus section with several top level parents, then 3-4 children menu items below a couple parent items. Have them moved to the right to create the standard parent-child relationship but all I see on the page is the parent level items - no dropdown!. So I changed themes from Platform5 to the standard 2015 default theme and now I see absolutely no menu at top, except for the mobile (hamburger?) icon.
      In DMS, one had Navi and Navbar, etc sections and each would work differently and give different results. How do you work the menu system in 5? And how get different results ?
      thanks
    • nizami
      By nizami+
      I have a problem at http://kambo.world. Using navbar for the main site navigation. It works fine in normal/desktop mode [first screenshot], using the WP Menu I have specified. But in hamburger mode it seems to do its own thing, picking a few pages at random [second screenshot] A fix for this greatly appreciated! 
       


×