Jump to content
Sign in to follow this  
lgblom

Help with changing color on fixed navbar

Recommended Posts

lgblom

Hi, i will change the color on navbar i top at the site: http://kluge.se I found this code here at forum, but it didn't work: section.container.no_clone.section-navbar.fixed-top.fix {background-color: #000;} iI will change background to same color as headline (gold) How to change it? Best regards L G

Share this post


Link to post
Share on other sites
Danny

Hi LG, Add the below code to your custom CSS.

.navbar { background: gold; }


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
lgblom

Hi Danny and thanks for your answer. But it didn't work Navbar is black. i also try to change gold -> color code but... http://kluge.se

Share this post


Link to post
Share on other sites
catrina

Please try this:

div.navbar.fix.navbar-full-width.pl-color-black-trans {background-color: #CDCD00;}

The hex code for the color is some kind of yellow that looks gold, but if you want to change it, please look here for other colors and replace the hex code with the appropriate one: http://cloford.com/resources/colours/500col.htm


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
lgblom

Hi Catrina and thanks but the only way i can change color is in "Clobal Settings" I have installed "Simple CSS Lite but it works only for standard NavBar. Hmm what to do...? Thanks for link to cloford.com :)

Share this post


Link to post
Share on other sites
catrina

Do you not have the custom CSS settings on Framework? You can still add the CSS to Custom Code > Custom CSS even if Simple CSS Lite works with the standard navbar.


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
lgblom

Yes i have the custom CSS settings and i paste code there. I hope i dont paste code in wrong place in CSS. You can se where i paste it: bottom: 0;} .clip_box .hentry, .pprow .widget { margin:0; } /* Special Corrections */ #content .content-pad{ padding-top: 1px } #branding .content-pad{ padding-top: 5px; padding-bottom: 5px; } #nav .content-pad, #secondnav .content-pad{ padding-top: 5px; padding-bottom: 5px; } body.navbar_fixed .page-canvas { padding-top: 34px !important; } div.navbar.fix.navbar-full-width.pl-color-black-trans {background-color: #A98759;} /* @ Layout Floating */ #column-wrap {float: left;} #sidebar-wrap{float:right;} /L G

Share this post


Link to post
Share on other sites
catrina

Is this your entire code as is? Nothing cut out of it? There is something missing at the top.


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
lgblom

Oh no it??s only a part of code there i paste code from you :)

Share this post


Link to post
Share on other sites
lgblom

Here is code from top -> where i paste code from you: /* Theme Name: PageLines Framework Description: A responsive drag-and-drop platform for professional websites based on HTML5 and CSS3. PageLines will help you do amazing things faster & easier than ever before. Designed by PageLines in California. Twitter @pagelines Version: 2.2.5 Author: PageLines Author URI: http://www.pagelines.com/'>http://www.pagelines.com/ Theme URI: http://www.pagelines.com/'>http://www.pagelines.com/tour Tags: rtl-language-support, editor-style, theme-options, one-column, two-columns, three-columns, left-sidebar, right-sidebar, flexible-width, custom-menu, fixed-width, threaded-comments, custom-background, custom-header, custom-colors, custom-menu, photoblogging, translation-ready, white, silver, light, blue, green, yellow License: GPL License URI: http://www.gnu.org/licenses/gpl-2.0.html'>http://www.gnu.org/licenses/gpl-2.0.html * Important * Don't add customizations to this file! - Customization CSS in PageLines - Customize PageLines by adding CSS in the settings, child themes, or plugins - Don't add it here; as it will either get overwritten by updates, and will prevent you from updating at all! * Copyright 2008-2012 PageLines, Inc. http://www.pagelines.com/'>http://www.pagelines.com/ * * This program is free software; you can redistribute it and/or modify it under * the terms of the GNU General Public License version 2, as published by the * Free Software Foundation. * * You may NOT assume that you can use any other version of the GPL. * * This program is distributed in the hope that it will be useful, but WITHOUT * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS * FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details * * You should have received a copy of the GNU General Public License along with * this program; if not, write to: * * Free Software Foundation, Inc. * 51 Franklin St, Fifth Floor * Boston, MA 02110-1301 USA * * The license for this software can also likely be found here: * http://www.gnu.org/licenses/gpl-2.0.html'>http://www.gnu.org/licenses/gpl-2.0.html */ /* Reset *****************************/ html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}:focus{outline:0}ins{text-decoration:none}del{text-decoration:line-through}table{border-collapse:collapse;border-spacing:0} article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } /* * Defaults ****************************/ body{ font-size: 14px; line-height: 155%; /* min-height:100%; overflow-x: hidden;*/ } .sticky{} .gallery-caption{} .bypostauthor{} /* * IE ****************************/ a:active, a:focus, input.searchfield:active { outline: none !important; ie-dummy: expression(this.hideFocus=true); } /* * Common Text *****************************/ a:focus{outline:1px dotted invert;} hr{border:0 transparent solid;border-bottom-width:1px;clear:both;height:0} ol,ul{list-style-type:none} .hentry ol{list-style:decimal} .hentry ol ol{list-style:lower-roman} .hentry ol ol ol{list-style:lower-alpha} .hentry ul{list-style:disc;} dt {font-weight:bold;} dd {font-style: italic;} sup {font-size:.7em;vertical-align: top;vertical-align:super;} sub {font-size:.7em;vertical-align: bottom;} big {font-size: 1.3em;} abbr, acronym{ border-bottom: .1em dotted; cursor: help; } q:before, q:after{ content: "'";} code,pre {padding: 0 3px 2px;font-family: Menlo, Monaco, "Courier New", monospace;font-size: 12px;} code {padding: 2px 4px;} pre {display: block;padding: 8.5px;margin: 1em;font-size: 12.025px;line-height: 18px;white-space: pre;white-space: pre-wrap;word-break: break-all;word-wrap: break-word;} pre code {padding: 0;color: inherit;background-color: transparent;border: 0; } .pre-scrollable {max-height: 340px;overflow-y: scroll;} /* * Layout Design **********************************/ /* @ Layout Framework */ #site { position:relative; } #wrapper { padding-bottom: 3.5em; } #page, #dynamic-content { min-height: 400px; zoom:1;} #feature-area { box-shadow: none !important; } .fixed_width #page, .fixed_width #footer, .canvas .page-canvas{ width: 100%; margin: 0 auto; position: relative; } .page-canvas{ margin: 0 auto; } .content { width: 100%; margin: 0 auto; position: relative;} /* @ Layout Spacing */ /* Default Spacing */ section.container, .hentry, .clip_box, .widget{ margin: 0;} section.copy{margin: 1.6em 0;} .content-pad{padding: 5px;} .hentry, .clip_box{margin-bottom: 1.8em} .widget-pad{padding: 10px;} #pagelines_content .clip{ width:47%; } /* Adjustments */ .mcolumn-pad > article .hentry-pad:first-of-type {padding-top: 0;} .mcolumn-pad > :first-child, .copy-pad > :first-child, .scolumn-pad > :first-child, .sidebar_widgets > :first-child{margin-top: 0;} .mcolumn-pad > :last-child, .copy-pad > :last-child, .scolumn-pad > :last-child, .sidebar_widgets > :last-child{margin-bottom: 0;} .clip_box .hentry, .pprow .widget { margin:0; } /* Special Corrections */ #content .content-pad{ padding-top: 1px } #branding .content-pad{ padding-top: 5px; padding-bottom: 5px; } #nav .content-pad, #secondnav .content-pad{ padding-top: 5px; padding-bottom: 5px; } body.navbar_fixed .page-canvas { padding-top: 34px !important; } div.navbar.fix.navbar-full-width.pl-color-black-trans {background-color: #A98759;}

Share this post


Link to post
Share on other sites
catrina

Replace this:

div.navbar.fix.navbar-full-width.pl-color-black-trans {background-color: #A98759;}
...with this:
#navbar div.navbar.fix {background-color: #A98759;}


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
lgblom

I am sorry Catrin...it didn't work. The only way for me to change color is in Global settings - NavBar-Fixed NavBar - Select Theme...

Share this post


Link to post
Share on other sites
Danny

You're adding custom CSS to the PageLines style.css. This is the incorrect location to add your custom CSS. You should not make any changes to any of the core files, it will cause issues/errors and also these changes will be removed upon updating PageLines. It actually has this statement in the file. * Important * Don't add customizations to this file! - Customization CSS in PageLines - Customize PageLines by adding CSS in the settings, child themes, or plugins - Don't add it here; as it will either get overwritten by updates, and will prevent you from updating at all! Therefore, you will need to add all your custom CSS to either a child theme, the PageLines Customisation plugin or the CSS Rules area in Site Options > Custom Code > CSS Rules.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
lgblom

Hi Danny...i didn??t now about it... Many thanks for your help! I have now paste .navbar { background: gold; } in field CSS Rules and it works :) But how to change color on text?

Share this post


Link to post
Share on other sites
Danny

Hi LG, Add the following code to your custom CSS.

.navbar .navline > li > a { color: white; }

Keep in mind we can't design your site for you so if you need CSS help, make sure you've downloaded Firebug for Firefox and check out W3 Schools for more info. Also please be sure to watch our Firebug video tutorial here.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
lgblom

Thanks Danny, I am so grateful for all the help here on the forum. Thanks to everyone who helped me with this problem! L G

Share this post


Link to post
Share on other sites
Danny

No Problem, LG happy to help!


Please search our forums, before posting!

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  

×