Gradient color in navbar

[bstaikos 0]

Hi All, Looking to add gradient coloring to my nav bar to make it a little bit sleaker. Any easy way to do this with custom code? Any and all help appreciated! Love using Framework! Thanks, Bill

[Danny+ 1,327]

Hi Bill, You can add this to your custom code: [code]#page .navigation_wrap { }[/code] You can use this website to create your gradient for your navbar and then add the code to the above code. http://www.colorzilla.com/gradient-editor/

[bstaikos 0]

Danny, Thanks for the quick reply. copy/paste in between the {} and not working...any other thoughts? Thanks again, Bill

[Danny+ 1,327]

Hi Bill, Sorry I should of gone into greater detail. Basically, the use the website I linked above to get the correct gradient/colors you want and then on the right hand side it provides the code for your gradient, this code is for browsers. Your code should look similar to this: [code]#page .navigation_wrap { background: #1e5799; /* Old browsers */ background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* IE10+ */ background: linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */ }[/code] Simply copy and paste this code into the code above and then copy and paste it into either your Child themes style.css, if you're not using the Base child theme but using the PageLines Customisation plug-in then add the code to the style.css of the PageLines Customisation plug-in. If you're not using either of these, then add the code to the following setting: Wordpress Admin Dashboard > PageLines > Settings > Custom Code > CSS Rules.

[bstaikos 0]

Danny - again thanks! Problem is though that this does not go across the entire nav - just up to the pages (I have it there now). Is there a way to make it go across?

[batman 389]

Hi @simple_mama give me... You may find these two topics useful: http://www.pagelines.com/forum/discussion/15956/pagelines-framework-2.0-css-tweaks.#Item_1 http://www.pagelines.com/forum/discussion/16222/common-questions-and-customizations#Item_2 I had the same problem and use the following code: [code].main_nav_container { filter: progid: DXImageTransform.Microsoft.gradient(startColorstr = '#e6e6e6', endColorstr = '#3e3d3d'); /*INNER ELEMENTS MUST NOT BREAK THIS ELEMENTS BOUNDARIES*/ /*Element must have a height (not auto)*/ /*All filters must be placed together*/ -ms-filter: "progid: DXImageTransform.Microsoft.gradient(startColorstr = '#e6e6e6', endColorstr = '#3e3d3d')"; /*Element must have a height (not auto)*/ /*All filters must be placed together*/ background-image: -moz-linear-gradient(top, #e6e6e6, #3e3d3d); background-image: -ms-linear-gradient(top, #e6e6e6, #3e3d3d); background-image: -o-linear-gradient(top, #e6e6e6, #3e3d3d); background-image: -webkit-gradient(linear, center top, center bottom, from(#e6e6e6), to(#3e3d3d)); background-image: -webkit-linear-gradient(top, #e6e6e6, #3e3d3d); background-image: linear-gradient(top, #e6e6e6, #3e3d3d); -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; /*Use "background-clip: padding-box" when using rounded corners to avoid the gradient bleeding through the corners*/ /*--IE9 WILL PLACE THE FILTER ON TOP OF THE ROUNDED CORNERS--*/ } .main_nav ul li { filter: progid: DXImageTransform.Microsoft.gradient(startColorstr = '#e6e6e6', endColorstr = '#3e3d3d'); /*INNER ELEMENTS MUST NOT BREAK THIS ELEMENTS BOUNDARIES*/ /*Element must have a height (not auto)*/ /*All filters must be placed together*/ -ms-filter: "progid: DXImageTransform.Microsoft.gradient(startColorstr = '#e6e6e6', endColorstr = '#3e3d3d')"; /*Element must have a height (not auto)*/ /*All filters must be placed together*/ background-image: -moz-linear-gradient(top, #e6e6e6, #3e3d3d); background-image: -ms-linear-gradient(top, #e6e6e6, #3e3d3d); background-image: -o-linear-gradient(top, #e6e6e6, #3e3d3d); background-image: -webkit-gradient(linear, center top, center bottom, from(#e6e6e6), to(#3e3d3d)); background-image: -webkit-linear-gradient(top, #e6e6e6, #3e3d3d); background-image: linear-gradient(top, #e6e6e6, #3e3d3d); -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; /*Use "background-clip: padding-box" when using rounded corners to avoid the gradient bleeding through the corners*/ /*--IE9 WILL PLACE THE FILTER ON TOP OF THE ROUNDED CORNERS--*/ border-right: 1px solid rgb(153,153,153); } ul.main-nav li.current-menu-item a { filter: progid: DXImageTransform.Microsoft.gradient(startColorstr = '#e6e6e6', endColorstr = '#3e3d3d'); /*INNER ELEMENTS MUST NOT BREAK THIS ELEMENTS BOUNDARIES*/ /*Element must have a height (not auto)*/ /*All filters must be placed together*/ -ms-filter: "progid: DXImageTransform.Microsoft.gradient(startColorstr = '#e6e6e6', endColorstr = '#3e3d3d')"; /*Element must have a height (not auto)*/ /*All filters must be placed together*/ background-image: -moz-linear-gradient(top, #e6e6e6, #3e3d3d); background-image: -ms-linear-gradient(top, #e6e6e6, #3e3d3d); background-image: -o-linear-gradient(top, #e6e6e6, #3e3d3d); background-image: -webkit-gradient(linear, center top, center bottom, from(#e6e6e6), to(#3e3d3d)); background-image: -webkit-linear-gradient(top, #e6e6e6, #3e3d3d); background-image: linear-gradient(top, #e6e6e6, #3e3d3d); -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; /*Use "background-clip: padding-box" when using rounded corners to avoid the gradient bleeding through the corners*/ /*--IE9 WILL PLACE THE FILTER ON TOP OF THE ROUNDED CORNERS--*/ border-right: 1px solid rgb(153,153,153); } .navigation_wrap { border-bottom: 0 none !important; } .main-nav li a:hover, .main-nav .current-menu-ancestor .current_page_item a, .main-nav li.current-menu-ancestor ul a:hover { background-color: #969696 !important; color: #000000; } .main-nav .current-menu-ancestor a, .main-nav li.current-menu-ancestor ul a, .main-nav li.current_page_item a, .main-nav li.current-menu-item a, .main-nav li.current_page_parent a, .sf-menu li li, .sf-menu li li li { background: none repeat scroll 0 0 #969696 !important; } .main_nav li a { color: #FFFFFF; }[/code] Maybe there's a simpler way, but for me it worked. You can replace the colors with the danny??s link. Sorry for my English. I hope you serve

[catrina 103]

Let us know if the solution @batman provided works out well for you.

[bstaikos 0]

Thanks, Batman. This worked, but now the page selected nav is grey as is the sub-nav. Need to figure out how to change this - I guess I will look for the CSS on hover and perhaps repeat this for the sub nav menu.

[bstaikos 0]

I have to play around with a few things, but looks like it will work. Thanks to all...

[catrina 103]

The subnav is a separate element from the actual navbar because it's uses different CSS selectors so it'll definitely need some playing around with.

[bstaikos 0]

To all, there is an even more simply way to get gradient into the tool bar, sub-navs and get the text the way you want it: If you generate the css for the gradient via the "ultimate css gradient generator" tool that danny provided and then copy/paste this into into the relevant boxes of the Simple CSS Lite plugin, it all works. On a whim I thought I would try this out and it worked. For me this is the best solution as it minimizes the extra css in the style sheet.

[catrina 103]

Cool beans, thanks for posting your solution.

[bstaikos 0]

Hi All, I have played with the gradient and finally settled on one. However, now I see a line across the top of the nav bar. I have looked on the posts to see if I can find css to remove it, but no luck. Any thoughts? Thanks to all for your kindness!! bstaiks

[batman 389]

Hi @bstaikos I think you should try [code].navigation_wrap { border-top: none !important; } [/code] I'm just a newbie trying to learn. I do not know if it's the right solution .. :)

[Rob 547]

Great suggestion Batman! Thank you for contributing to this topic.

[batman 389]

It is a pleasure for me to help, also forces me to learn. I feel that this is one more way to thank all your support to me all the time. Thanks for the compliment. ;)

[Rob 547]

Always a pleasure!