Jump to content
Sign in to follow this  
juicebox12

Navbar (fixed) - change background image?

Recommended Posts

juicebox12

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!

Share this post


Link to post
Share on other sites
catrina
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?

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

Share this post


Link to post
Share on other sites
Danny
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]

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
juicebox12
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

Share this post


Link to post
Share on other sites
Danny
Hi Rob, No problem at all, was more than 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  

×