Navbar (fixed) - change background image?

[juicebox12 0]

Hi there, I'm having trouble changing the background of the navbar on a site I'm working on. I've tried a few of the custom CSS solutions posted up by both Pagelines wonderful staff and users, but nothing seems to actually work. FYI I'm using Pagelines framework v2.2 and iBlogPro5 over the top. [reg101.com.au] What I'm hoping to achieve is to replace the grey background currently themed by the fixed navbar (top of the site) with a custom 'header' image I've mocked up, with the textual menu and search bar intact over the top. The image is here (http://reg101.com.au/wordpress/wp-content/uploads/2012/07/Header1.png) and is set to the site's fixed width, so a repeat function isn't necessary. Over the past few hours I've searched high and low through the Pagelines forums and whilst I've found many users with the same request, nothing I've entered or modified in Custom CSS has actually changed anything on the site. I was wondering is someone would be able to assist me with this? Or perhaps point me in the right direction? As always, any feedback is most appreciated!

[catrina 103]

The navbar image you're trying to set might not be working properly because it's so large compared to the size of the bar itself. You may want to resize the navbar's height by making it bigger. What's one custom CSS solution you've tried so far?

[juicebox12 0]

Ah gotcha- so I take it it's not possible to alter the dimensions of the navbar element? I can always modify the image to fit the current height (40px I believe) though it may be a bit cramped. I'm happy to look into that should the navbar's dimensions be set in stone. As for some other solutions I've tried, most have come from within the Pagelines support forum (see below): - http://www.pagelines.com/forum/discussion/3905/custom-set-of-social-icons-nav-bar-image/p1 - http://www.pagelines.com/forum/discussion/17037/customize-navigation-bar/p1 - http://www.pagelines.com/forum/discussion/17972/ribbon-effect-as-navigation-bar-background/p1 ... among others. I'm not the most CSS-savvy person in the world but understand enough about coding and the basic theory that I bluster my way through. Part of my problem (I think, I could be wrong) is the section's name- using Firebug (and Chrome's dev tools) it's either "navbar" or "navbar-content-pad fix". I always adapt the code given in the above examples with the correct section/div tag and receive no feedback when inspecting afterwards to even see if the code is present (despite it obviously not rendering). Once again, this could completely be related to the image being too large for the navbar so I guess whatever restrictions are placed upon its functionality (if any?) will need to be adhered to. Hopefully that makes sense, am I making some silly mistake? Thanks again for your feedback thusfar Catrina (including my researched posts), it is much appreciated.

[Danny+ 1,327]

Hi, I have added the code below for you which adds the image you linked above to the fixed navbar. However, it looks very odd. [code].navbar { background-image: url(http://reg101.com.au/wordpress/wp-content/uploads/2012/07/Header1.png); height: 150px; background-repeat: no-repeat; background-position: 50% 0; background-attachment: fixed; }[/code]

[juicebox12 0]

Hi Danny, Of course it was a syntax issue. Back to school for me! You're right, it does look strange but I've rendered off a more standard 40px high navbar background and foreground image so will tinker with that and see how it ends up. Many thanks to yourself and Catrina for the assistance with this, you guys rock! I'll be working on polishing my CSS skills so I shouldn't have to bother you again. Kind regards, Rob

[Danny+ 1,327]

Hi Rob, No problem at all, was more than happy to help!