Archived

This topic is now archived and is closed to further replies.

  • 0

Resolved Navbar CSS changes not affecting all pages


Question

Posted · Report post

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;

}

Share this post


Link to post
Share on other sites

11 answers to this question

Posted · Report post

The topic was marked as resolved.

Share this post


Link to post
Share on other sites

Posted · Report post

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

Screen%20Shot%202012-10-01%20at%2010.59.43%20PM.png

and after I click on any single post or page:

Screen%20Shot%202012-10-01%20at%2011.00.00%20PM.png

Share this post


Link to post
Share on other sites

Posted · Report post

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!

Share this post


Link to post
Share on other sites

Posted · Report post

Hi Kevan,

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

Share this post


Link to post
Share on other sites

Posted · Report post

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.

Share this post


Link to post
Share on other sites

Posted · Report post

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.

Share this post


Link to post
Share on other sites

Posted · Report post

Danny,

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

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

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

Is there a specific browser this is happening with?

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites