Jump to content

Archived

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

carl007

Nav Bar Customisation

Recommended Posts

carl007    0
carl007

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 
 
 

check my mini blog
www.depictdesign.com

Share this post


Link to post
Share on other sites
Rob    547
Rob

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?


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
carl007    0
carl007

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.


check my mini blog
www.depictdesign.com

Share this post


Link to post
Share on other sites
Rob    547
Rob

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);
}
  • Like 1

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
carl007    0
carl007

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

 

How do i get this value for future. 

 

thanks again,


check my mini blog
www.depictdesign.com

Share this post


Link to post
Share on other sites
carl007    0
carl007

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

 

thanks


check my mini blog
www.depictdesign.com

Share this post


Link to post
Share on other sites
Rob    547
Rob
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');
}
  • Like 1

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
carl007    0
carl007

Thanks a lot Rob, it worked. 

Problem solved. 

 

Its the best answer :)

 

Cheers


check my mini blog
www.depictdesign.com

Share this post


Link to post
Share on other sites
Rob    547
Rob

Great!


Former PageLines Moderator, Food Expert and Raconteur

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! 
       


×