Jump to content
iamtheeverydaygirl

Changing color of NavBar

Recommended Posts

iamtheeverydaygirl    0
iamtheeverydaygirl

Hi there,

I'm looking for a way to change the background color of the NavBar on my site. Currently, I see only those few themes (black, light grey, blue, etc) -- and ideally, I would just like a white background.

Tried a few things I read in this forum (firebug, some css code), but so far nothing is working to change it on my site!

Was wondering if there was something I was missing, a way to just disable the theme?

Thanks!

Jen

www.iamtheeverydaygirl.com

Share this post


Link to post
Share on other sites
Rob    547
Rob

Okay, this is the CSS affecting the color:


.pl-color-grey {

background: -moz-linear-gradient (center top , #FFFFFF 0%, #DCDCDC 100%) repeat scroll 0 0 transparent;

}

#FFFFFF is white. #DCDCDC is grey. You see there's a percentage after each.

Change 0% to 60%, and you'll have a nice, shadowed, white navbar I think you'll like.

Paste the edited code to Dashboard > PageLines > Site Options > Custom Code > CSS Rules


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
kgstew    2
kgstew

Hi Rob,

How you doing?

I'm trying to do the same thing. Can't seem to the background color to change with the blue theme. Tried fooling around with the .less file too but succeeded in nothing more than fooling.

I'm trying to get the navbar to use a blue closer to #0a3443

Site is http://reallocate.org

Thanks for the help. Lets chat soon.

  • Like 1

Share this post


Link to post
Share on other sites
batman    389
batman

HI kgstew

I use this to change orange the NavBar


/*--CHANGE COLOR NavBar FIXED--*/

.navbar.pl-color-black-trans {

background-color: rgba(242,102, 14, 0.9);

background-image: none;

background-repeat: repeat-x;

border-top: none;}


/*--CHANGE COLOR NavBar SEARCH--*/

.navbar .searchform .searchfield {

background-color: rgba(255, 255, 255, 0.35);

border: none;

box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1) inset, 0px 1px 0px rgba(255, 255, 255, 0.15);}


/*--CHANGE COLOR NavBar HOVER--*/

.dropdown-menu li > a:hover, .dropdown-menu li > a:focus, .dropdown-submenu:hover > a, .dropdown-menu li.current-menu-item > a {

background-color: rgb(242, 110, 14);

background-image: none;

background-repeat: repeat-x;}

You can change the color as you like

;)

  • Like 1

Life is too short to remove USB safely ...

Share this post


Link to post
Share on other sites
Rob    547
Rob

Kyle,

Batman is one of our best clients when it comes to helping others. And a very nice guy.

I checked your site:


.navbar.pl-color-blue {

background-color: #5E8DC8;

background-image: -moz-linear-gradient(center top , #0A3443, #4574B8);

background-repeat: repeat-x;

border-top: 1px solid #4574B8;

}

I placed the color you wanted in the top gradient. You can swap it around if you like.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
kgstew    2
kgstew

Thanks for your help guys.

Below is the solution I ended up using. There is a cross browser consideration as well. The fixes provided did not work in chrome, I needed to add the browser specific CSS.

.navbar.pl-color-blue {
background-color: #507282;
background: -moz-linear-gradient(center top , #507282, #468bb0);
background: -webkit-gradient(linear, left top, left bottom, from(#507282), to(#468bb0));
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#507282', endColorstr='#468bb0');
background-repeat: repeat-x;
border-top: 1px solid #4574B8;
}[/html]

  • Like 1

Share this post


Link to post
Share on other sites
James B    436
James B

Hi there, I'm glad that worked for you, are we ok to resolve this thread or do you require further assistance?


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
margeau    0
margeau

I am new to PageLlines and this thread seemed to be just what I was looking for. I am using the navbar (grey) and want the highlight color of the drop down menu to be a other than the default blue. Using FireBug I determined the following code was where the customization was needed, but the change in color only shows in FireFox. To my eye this is much the same as other code in this post, but I am obviously am missing something because it isn't doing the job.



.dropdown-menu li > a:hover, .dropdown-menu li > a:focus, .dropdown-submenu:hover > a, .dropdown-menu li.current-menu-item > a {

    background-color: #57CFC6;

    background-image: -moz-linear-gradient(center top , #61e0d5, #52bdb4);

    background-repeat: repeat-x;

    color: #FFFFFF;

    text-decoration: none;

}


.dropdown-menu .active > a, .dropdown-menu .active > a:hover {

    background-color: #57CFC6;

    background-image: -moz-linear-gradient(center top , #61e0d5, #52bdb4);

    background-repeat: repeat-x;

    color: #FFFFFF;

    outline: 0 none;

    text-decoration: none;

}

The site I am working on is in draft form here: http://prima.pagelines.me/

Any assistance would be so much appreciated. Thank you.

Share this post


Link to post
Share on other sites
margeau    0
margeau

I tried a suggestion from Jenny:

"You should try adding a #page selector in front of each CSS item, like #page .dropdown-menu li > a:hover."



#page .dropdown-menu li > a:hover, #page .dropdown-menu li > a:focus, #page .dropdown-submenu:hover > a, #page .dropdown-menu li.current-menu-item > a {

background-color: #57CFC6;

background-image: -moz-linear-gradient(center top , #61e0d5, #52bdb4);

background-repeat: repeat-x;

color: #FFFFFF;

text-decoration: none;

}


#page .dropdown-menu .active > a, #page .dropdown-menu .active > a:hover {

background-color: #57CFC6;

background-image: -moz-linear-gradient(center top , #61e0d5, #52bdb4);

background-repeat: repeat-x;

color: #FFFFFF;

outline: 0 none;

text-decoration: none;

}

I was not successful yet, but I must be close because a site in the PageLines showcase is doing it and the code I found with FireBug looks very similar, (http://harbourtownlighthouse.com/):

.dropdown-menu li > a:hover, .dropdown-menu .active > a, .dropdown-menu .active > a:hover, #site .dropdown-menu .current-menu-item > a {

background-color: #0088CC;

color: #FFFFFF;

text-decoration: none;

text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);

}

plus this:

.dropdown-menu li > a:hover, .dropdown-menu .active > a, .dropdown-menu .active > a:hover, #site .dropdown-menu .current-menu-item > a {

background-color: transparent;

color: #E30613 !important;

}

.dropdown-menu li > a:hover, .dropdown-menu .active > a, .dropdown-menu .active > a:hover {

background-color: transparent;

color: #E30613 !important;

}

Thank you for any possible help resolving this.

Share this post


Link to post
Share on other sites
catrina    103
catrina

I think you can be even more specific by adding the class for the <DIV> that menu is in. For example:

#page div.DIVLAYERNAME .dropdown-menu... etc. etc.[/CODE]


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
margeau    0
margeau

Thank you Catrina. I used what seemed to be the nearest div wrapping my bit of code, but I am still without the change in color in non-Firefox browsers. Does it seem like I have done it correctly?


#page div.navbar-inner .dropdown-menu li > a:hover, .dropdown-menu li > a:focus, .dropdown-submenu:hover > a, .dropdown-menu li.current-menu-item > a {

background-color: #57CFC6;

background-image: -moz-linear-gradient(center top , #61e0d5, #52bdb4);

background-repeat: repeat-x;

color: #FFFFFF;

text-decoration: none;

}


#page div.navbar-inner .dropdown-menu .active > a, .dropdown-menu .active > a:hover {

background-color: #57CFC6;

background-image: -moz-linear-gradient(center top , #61e0d5, #52bdb4);

background-repeat: repeat-x;

color: #FFFFFF;

outline: 0 none;

text-decoration: none;

}

I also tried this:


#page div.navbar-inner  .dropdown-menu li > a:hover, #page div.navbar-inner .dropdown-menu li > a:focus, .dropdown-submenu:hover > a, #page div.navbar-inner .dropdown-menu li.current-menu-item > a {

    background-color: #57CFC6;

    background-image: -moz-linear-gradient(center top , #61e0d5, #52bdb4);

    background-repeat: repeat-x;

    color: #FFFFFF;

    text-decoration: none;

}


#page div.navbar-inner  .dropdown-menu .active > a, #page div.navbar-inner .dropdown-menu .active > a:hover {

    background-color: #57CFC6;

    background-image: -moz-linear-gradient(center top , #61e0d5, #52bdb4);

    background-repeat: repeat-x;

    color: #FFFFFF;

    outline: 0 none;

    text-decoration: none;

}

Share this post


Link to post
Share on other sites
margeau    0
margeau

Thank you Jenny. I have purchased it, and have high hopes that this is just what I need.

I am still a bit stuck, however. The site I am working on is a trial site/proof on the pagelines.me server and I have no ftp access (that I have been given any information about, anyway). I read the comment "use the section uploader pagelines/store/get sections/upload" on the crackbar page and thought I could load it that way, but I can not find an upload feature anywhere on my site interface, in my account pages or in the store. I must be so close...

Can anyone assist?

Share this post


Link to post
Share on other sites
James B    436
James B

Hi Margeau, I've responded to your email to hello@pagelines.com regarding the above situation. If you're using firebug and not find the correct css to cover all gradients try chrome dev tools, I've just checked on the navbar and it gives the full spectrum of css for most browsers. A copy of which is pasted below.


.navbar.pl-color-orange {

    background-color: #FAA732;

    background: -moz-linear-gradient(center top , #904FFB, #0653F8);

background: -moz-linear-gradient(top,#904FFB 0%,#4574B8 100%);

background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#0653F8),color-stop(100%,#4574B8));

background: -webkit-linear-gradient(top,#904FFB 0%,#0653F8 100%);

background: -o-linear-gradient(top,#904FFB 0%,#0653F8 100%);

background: -ms-linear-gradient(top,#904FFB 0%,#0653F8 100%);

background: linear-gradient(top,#904FFB 0%,#0653F8 100%);

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#904FFB',endColorstr='#0653F8',GradientType=0);

}


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
margeau    0
margeau

THANK YOU! I have never used an emoticon, but one is surely in order. I added your supplied code to the css I had for the drop down menu and it is working.

I now realize I should have tried kgstew's advice above earlier (which shows extra browser support for gradients), but since it was used, as was yours, with the navbar portion of the css rather than the drop down I didn't think of it. I wasn't concerned with having a gradient on the drop down menu, but I needed to change the color - the gradient is fine as an avenue to get that.

My proof using the demo install is now what I needed it to be to get client approval to rework her live site using PageLines.

Thanks again to all who contributed to my success.

Share this post


Link to post
Share on other sites
Rob    547
Rob

The topic was marked as resolved.


Former PageLines Moderator, Food Expert and Raconteur

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


  • 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.


    • tkpagelines
      By tkpagelines+
      Hi there ,
      i would like to change the color of menu items on hover and the current menu item. Both should have the same color, but not the color given of the theme scheme.
      Any suggestions ? Maybe a css snippet ?
       
      Thanks
    • 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
×