Resolved Navbar CSS changes not affecting all pages

[Kevan H 0]

Hey everyone,

I'm a little new to Pagelines and CSS in general, so forgive me my problem is fairly basic to solve.

I'm currently trying to style the Navbar, and everything's mostly looking how I want it to on the main blog page. However, the changes that I'm making are not being reflected on any of the single post pages, author pages, search result pages, or really anything that isn't the main/home page. Changes to fonts, colors, link highlighting, the background image, etc, are all not being reflected, and I can't seem to identify how the navbar differs on other pages with Firebug, etc.

Since I'm developing this site locally, I'm not able to provide a link for the CSS. I've copied all of the navcode below, hopefully that's of some use to someone. Any help is much appreciated!

Thanks in advance,

Kevan

#navbar {

float: left;

width:100% !important;

position: relative;

}


#navbar ul {

clear: left;

float: left;

list-style: none;

margin: 0;

padding:0;

position: relative;

left: 50%;

text-align: center;

width: auto !important;

}


#navbar ul li {

display: block;

float: left;

list-style: none;

margin: 0;

padding: 0;

position: relative;

right: 50%;

}


.navbar {

background: url(navbanner.jpg) !important;

background-repeat: no-repeat !important;

box-shadow: none;

float: none !important;

}


.navbar.navbar-content-width {

border-radius: 0px 0px 0px 0px;

}


.navbar.pl-color-black-trans {

background-color: none;

border-top: none;

}


.navbar .navline > li > a {

font-family: Dekar-webfont, Helvetica, Arial, sans-serif;

color: #454a4d;

font-size: 15px;

text-transform: uppercase;

display: block;

float: center;

letter-spacing: .25em;

padding: 10px 15px 10px 15px;

text-decoration: none;

}


.navbar .navline > li > a:hover, a:active {

background: #ffffff;

text-decoration: none;

color: #454a4d; /*darker grey*/

padding: 10px 15px 10px 15px;

}

[Rob 547]

It's appearing to be the same in Firefox on all posts and pages.

Is there a specific browser this is happening with?

[Kevan H 0]

Seems to shopping up on all browsers. Or at least, Chrome, Firefox, and Safari (I haven't tried IE, but it's probably a safe bet).

[Danny+ 1,327]

Hi,

Can you provide screenshots of the what CSS is now applying, as well as concept images of what you're trying to achieve please.

[Kevan H 0]

Certainly. Here's the nav bar as it appears on the home page:

and after I click on any single post or page:

[Danny+ 1,327]

Hi Kevan,

Thanks for the providing the image, would it be possible for you to provide a link to the site in question please.

[Kevan H 0]

Danny,

Unfortuantely, I'm developing the site locally for the time being, so there's no link to provide. Sorry!

[catrina 103]

When a live version of the site is available, would it be possible to post the link here?

[Kevan H 0]

Catrina,

The reason I'm building a site in Pagelines in the first place is to replace the theme of an existing and operational site, so my plan was to not take the new theme live until everything was in place and ready to go. Since my hosting package only provides me with one database, I'm not able to develop and test online on a separate Wordpress install, and am not comfortable switching the existing theme to the one I'm working on now when it's as broken as it is.

I'll see if I can find a work-around for getting it online to share a link. In the meantime, if anyone has any suggestions to fix this navbar problem, it'd be much appreciated!

[Rob 547]

Here's your problem:

background: url(navbanner.jpg) !important;

You are expecting WP to find an image file that has a specific location. I'm guessing you've uploaded it to your root directory. When you navigate to any other location in the site, the CSS is looking for that .jpg right there, not in the proper location, where the actual file is located. The fix would be to do this:

background-image: url('http://www.thefulldomain.com/anypathto/navbanner.jpg') !important;

Change "http://www.thefulldomain.com/anypathto/" to the full URL to that image. Keep in mind that when you navigate to a category or other section, it's like going to a different folder. As with HTML, one folder cannot see into another unless it's link is properly pathed.

[Kevan H 0]

Yep, that did it. Thanks a bunch, Rob!

[catrina 103]

The topic was marked as resolved.