Jump to content
Sign in to follow this  
chocolate_mom

Change primary nav bar color

Recommended Posts

chocolate_mom

Hi! I have previously used your format on another site... but don't remember there being a problem changing the primary navbar color. None of the default colors go with the colors that I would like. I need a different color for the primary navbar please. Please let me know what I need to do. I have tried CSS codes that you have suggested on other forum listings here and none of them work. Thanks!

Share this post


Link to post
Share on other sites
Rob

In Dashboard > PageLines > Site Options > NavBar, you didn't have the option choices that suited your needs? I see you're using the default color. I believe the iBlogPro5 child theme uses images which may be replaced if you create custom CSS for it. Normal color changing CSS wouldn't work as the images would override the color. Are you familiar with that process? Do you have Firebug for Firefox or Chrome Inspection Tools?


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
batman

Hi If you want a simple control of your navegation bar, you change Standard NavBar to NacClassic Go to Pageline > Drag&Drop > Tempalte Setup > Header Drag the NacCassic to active section Then you can try the Simple CSS Lite plugin found in the PageLines Store. It's a free plugin that allows you control over the color of the menu. Simple CSS Lite only works on the standard navigation. Before using erase CSS code of your NavBar.


Life is too short to remove USB safely ...

Share this post


Link to post
Share on other sites
Rob

Forgive my error... Here's the CSS code:

.pl-color-black-trans {
	    background-image: -moz-linear-gradient(center top , rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.9) 100%);
	}

This bit is the color: rgba(0, 0, 0 If you change those 0's to the color code for your choice, you can create any combination of color gradient you wish. Add this to Dashboard > PageLines > Site Options > Custom Code > CSS Rules and modify as you like.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
chocolate_mom

Thank you for both of your offers to help. Since your reply I have tried the following: - install and activate the simple css lite plugin. I did this, changed the settings and NOTHING happened. - attempt to place my own css in the custom code area of site options. NOTHING - install pagelines customization plugin. I took the following code above and changed it as you see below. NOTHING .pl-color-black-trans { background-image: -moz-linear-gradient(center top , rgba(120, 74, 35, 0.8) 0%, rgba(120, 74, 35, 0.9) 100%); } - I noticed that in the code above it states .pl-color-black-trans. I made sure that the preset option in navbar options was set to black. NOTHING - I even went to the custom code area in the site options and pasted the above code into CSS rules. NOTHING -To add insult to injury I have another page lines site that somehow has a white navbar- I would not mind sprucing that one up a bit, but white is a lot better than orange. I have mirrored all settings between the 2 sites... NOTHING Just for reference- the site I am having trouble with is mychocolatepeaces.com. The site that has the white navbar is thechocolatebike.com I have spent HOURS on this and NOTHING. Please help. Pagelines is wonderful- but this issue and all the fixes that are not working are wasting my time and are ridiculous. Thank You

Share this post


Link to post
Share on other sites
batman

If you want change the color You can try add in PageLines > Site Options > Custom Code > CSS Rules

.navbar.pl-color-grey { background: red;}

You may also use color codes there, such as #C00000 , if you wish to use more specific colors. I hope this is you need.


Life is too short to remove USB safely ...

Share this post


Link to post
Share on other sites
Danny

Hello. Add the following to your custom CSS and change the color to your desired choice.

.navbar { background: red; }


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
chocolate_mom

Okay, I tried this code: .navbar.pl-color-grey { background: red;} and it works... in firefox- not internet explorer. Help? Even if I go with the Grey navbar color, it still looks horrible in internet explorer because the font is white and you cannot tell what any of the menu options are. I would prefer a brown navbar color with white font... if that is possible. I would also like it to work in the 3 major browsers- IE, Firefox, and Safari. I have also tried the simple css plugin- I think I mentioned that above. Thanks

Share this post


Link to post
Share on other sites
Rob

Which design mode are you using? To make a menu full width, you need to: 1. use full width design mode 2. have Nav Classic since the navbar actually has rounded corners and thus cannot really go full width. Also, I noted that you may not have removed some of the previously provided CSS solutions. Please make sure you do, since they can conflict with each other.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
chocolate_mom

I am not sure what you are asking about design mode. I have downloaded pagelines and beyond that- you got me. I am not asking about the nav bar being full width... so I am not sure what you are referring to there. I AM asking about navbar color. The css field is blank, thank you for the suggestion. I have selected the default grey... but it looks horrible in internet explorer as the color is light grey and the font is white. You cannot even see what the options in the bar are. Again, I HAVE tried the various css codes provided above. They work in nfirefox only and NOT internet explorer. Thoughts? Seriously, at this point I will PAY someone to figure this out.

Share this post


Link to post
Share on other sites
Rob

The code to change the color scheme is:

.pl-color-grey {
	    background: -moz-linear-gradient(center top , #FFFFFF 0%, #DCDCDC 100%) repeat scroll 0 0 transparent;
	}

The background color is #DCDCDC (grey) while the lighter (top) is #FFFFFF (white). Change those colors to the one's you like and the menu will match your goals. However, please note that the color of the font may not go well with your choices. If you use Firebug, you can find the font color selector and change that to suit. I think that manually adding CSS will help, but also, if I may be so bold, try to remove the shadow, as IE doesn't recognize any methods of shadowing text. Apologies for my confusion about full-width.


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

Sign in to follow this  

×