Jump to content
Sign in to follow this  
anlinares

Full Width Header/Nav with Fixed Width Site

Recommended Posts

anlinares    1
anlinares

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?
 
Thanks!

 

http://loweschapel.com

Share this post


Link to post
Share on other sites
greenfly    230
greenfly

Hello Anlinares 

 

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. 


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
anlinares    1
anlinares

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: http://loweschapel.com

#branding {
background-image: url('http://loweschapel.com/wp-content/uploads/2013/05/header_bg.jpg');
background-repeat: x;
width: 2960px;
}

#nav {
width: 2960px;
}

#site {
overflow-x: hidden;
}

Share this post


Link to post
Share on other sites
James B    436
James B

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.

 

#nav {
    margin-left-10%;
    margin-right-10%;
    padding-left10%;
    padding-right10%;
    width100%;
}
 
Our developer wrote an article on breaking items out using less, check out - http://nichola.us/tips/breaking-boundaries/

Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
anlinares    1
anlinares

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 (http://www.pagelines.com/store/plugins/less-factory/?product_ref=true) but not sure if that would be helpful for this particular goal or not.

 

Thank you for your help!

Share this post


Link to post
Share on other sites
James B    436
James B

Hi there,

 

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 - http://demo.pagelines.me/theming/

 

Some links which might help with understanding the basics of LESS would be

 

http://lesscss.org/

http://nichola.us/less/less-chronicles-the-basics/

http://nichola.us/less/less-chronicles-structuring/

http://nichola.us/less/less-chronicles-guards/

 

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 - http://www.pagelines.com/store/sections/wicker/ in case that can help further as well :-)


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
anlinares    1
anlinares

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?

 

http://loweschapel.com

 

Snapshot-2013-06-05-20-54-27.jpg

Share this post


Link to post
Share on other sites
James B    436
James B

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.

  • Like 1

Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
anlinares    1
anlinares

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!

Share this post


Link to post
Share on other sites
James B    436
James B

Hi there,

 

You seem to have this in your custom css,

 

#features {
    width990px !important;
}
 
If i remove that code, it slides back into place like - http://screencast.com/t/9wKmpEyvz8fa
  • Like 1

Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
anlinares    1
anlinares

WOOHOOO!  DONE...... with that part at least.  Thank you so much!  I appreciate your help - and LOVE Pagelines!  Thank you!

Share this post


Link to post
Share on other sites
greenfly    230
greenfly

Thanks for letting us know :) 


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

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  

×