Full Width Header/Nav with Fixed Width Site
Posted 03 June 2013 - 04:27 PM
Hello! I'm working on a site that I'd like to be fixed width but want the header background image and nav bar background to run full width. I figure it will take some css but I can't seem to figure it out. Any help?
Posted 03 June 2013 - 04:47 PM
What CSS have you tried? please could you paste it to paste.pagelines.com and provide a link to so we can test this for you and advise.
Posted 03 June 2013 - 06:07 PM
This is my work around. It is working how I would like but I think there is a better way to achieve this. I have extended the width of the branding and nav sections and hidden the horizontal scroll. But if someone happens to minimize their window size or view from a smaller size screen it presents problems!
You can view the site at:
Posted 03 June 2013 - 11:16 PM
Hi there, you could try the below method using negative margins against positive padding to get that affect. That will keep it all inline when the screen resizes. It's not perfect, but its difficult to get any area to break out of the content container.
Posted 05 June 2013 - 02:10 PM
Thanks, James. Yeah, that works but not exactly what I had in mind. The less option looks like perhaps what I need. But I have no clue about using less. Does this code go into my css? Do I have to add a section like he discusses into the theme code somewhere? Any resource you suggest to learn more about using less? I noticed there is a plugin in the store () but not sure if that would be helpful for this particular goal or not.
Thank you for your help!
Posted 05 June 2013 - 09:29 PM
LESS can go into the custom code area inside Pagelines just like css would. If you're using the base theme or customize plugin you'll need to add a style.less instead of using the style.css for it to be able to work.
A guide to how to use LESS inside the different customisation options is available here -
Some links which might help with understanding the basics of LESS would be
The plugin listed will help you create LESS variables, I don't think it would help with breaking items out of the content area as the variable that Nick is referencing in his post is already set by the framework.
I should also advise that Nick's created a section which will add a full width image and nav into the header area. Please see -in case that can help further as well :-)
Posted 06 June 2013 - 02:02 AM
Thank you. I'm going to look through these links and try to learn how I can use LESS.
Another question - I don't mind all that much to just have a full width site, but the photo on the home page is placed in a hook and when I go to full width the photo does not stay in the same position as the window size changes.
I thought it would be easier to stretch the header and nav than to solve this problem. But maybe not. I have changed the site to full-width and everything is fine except that picture. Notice how it's floating? I would like it to stay positioned like it is in fixed-width (see image below). Is that possible?
Posted 06 June 2013 - 08:55 PM
It looks like the image has been added on top of the features section in the hook, it might be better to add it inside the media area inside the slide with a transparent background. That way it would still give the same effect next to the test but stay within the content area when being resized.
- anlinares likes this
Posted 06 June 2013 - 10:00 PM
So basically I was just trying to make that A LOT harder than it needed to be. Yay me.
I think I've got it worked out. Need to edit that feature picture to fix the shadow on the bottom but I'll do that later.
The only problem is now it seems that something is set to position: absolute in the feature because it is hugging the left side of the window. Think I'm just going blank after looking at this for so long!
Can you help me figure that out?
THANK YOU sooooooo much for your help!
Posted 06 June 2013 - 10:32 PM Best Answer
You seem to have this in your custom css,
- anlinares likes this
Posted 06 June 2013 - 11:36 PM
WOOHOOO! DONE...... with that part at least. Thank you so much! I appreciate your help - and LOVE Pagelines! Thank you!