Jump to content


Photo
- - - - -

Full Width Header/Nav with Fixed Width Site


Best Answer James B , 06 June 2013 - 10:32 PM

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
Go to the full post


  • Please log in to reply
11 replies to this topic

#1 anlinares

anlinares

    Super Member

  • Members
  • 229 posts
  • Country: Country Flag

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

 

Please Login or Register to see this Hidden Content



#2 Martin Davies

Martin Davies

    Advocate

  • Members

  • 3268 posts
  • LocationManchester, England
  • Framework Version:latest
  • Country: Country Flag

Posted 03 June 2013 - 04:47 PM

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. 



#3 anlinares

anlinares

    Super Member

  • Members
  • 229 posts
  • Country: Country Flag

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:

Please Login or Register to see this Hidden Content

Please Login or Register to see this Hidden Content



#4 James B

James B

    Advocate

  • Moderators
  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

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.

 

#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 -

Please Login or Register to see this Hidden Content



#5 anlinares

anlinares

    Super Member

  • Members
  • 229 posts
  • Country: Country Flag

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 (

Please Login or Register to see this Hidden Content

) but not sure if that would be helpful for this particular goal or not.

 

Thank you for your help!



#6 James B

James B

    Advocate

  • Moderators
  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 05 June 2013 - 09:29 PM

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 -

Please Login or Register to see this Hidden Content

 

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

 

Please Login or Register to see this Hidden Content

Please Login or Register to see this Hidden Content

Please Login or Register to see this Hidden Content

Please Login or Register to see this Hidden Content

 

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 -

Please Login or Register to see this Hidden Content

in case that can help further as well :-)



#7 anlinares

anlinares

    Super Member

  • Members
  • 229 posts
  • Country: Country Flag

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?

 

Please Login or Register to see this Hidden Content

 

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



#8 James B

James B

    Advocate

  • Moderators
  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

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

#9 anlinares

anlinares

    Super Member

  • Members
  • 229 posts
  • Country: Country Flag

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!



#10 James B

James B

    Advocate

  • Moderators
  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 06 June 2013 - 10:32 PM   Best Answer

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 -

Please Login or Register to see this Hidden Content


  • anlinares likes this

#11 anlinares

anlinares

    Super Member

  • Members
  • 229 posts
  • Country: Country Flag

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!



#12 Martin Davies

Martin Davies

    Advocate

  • Members

  • 3268 posts
  • LocationManchester, England
  • Framework Version:latest
  • Country: Country Flag

Posted 07 June 2013 - 02:05 PM

Thanks for letting us know :)