Jump to content


Photo
Hero Nav

Make Hero Nav Full Width?

hav full width

Best Answer Evan Mattson , 24 September 2013 - 03:14 PM

With DMS, sections are explicitly defined as full-width or not.  Hero Nav is not a full-width section, but you may be able to achieve a full-width display with a little custom CSS, that is if your site layout is not 'boxed' (this is not the default though, so unless you changed it to this then it should be set for full width sections).

 

So in this case, you have Hero Nav inside a DMS section area.  The area has an inner content div that is limiting Hero Nav from displaying being full-width.  To do this, we need to remove the max-width from this area (you may want to keep HN in it's own area here as everything else in the area may not look right full-width.

 

We need to get the html ID from the containing area for our custom css.  Open up chrome developer tools and inspect the area to get the id.
fiinFl3.png

 

target the .pl-content div, and disable the max-width constraint:

fZlMbFf.png

 

My CSS

 
#pl_areaac2c9a .pl-content {
max-width: none;
}

Simply change "#pl_areaac2c9a" to your area's unique html id, and you're all set!

 

Result

4t25Oq6.png
 

Go to the full post


  • Please log in to reply
3 replies to this topic

#1 jennajonesdesign

jennajonesdesign

    Super Member

  • Members

  • 142 posts
  • LocationBillings, MT
  • Country: Country Flag

Posted 21 September 2013 - 06:08 AM

Hello! I just bought hero nav. I was mistakenly thinking it had a default option to make it full width. Looks like not. Can you give me a work around? Is there a simple way to accomplish this?

 

Thank you for your time!'

 

Jenna



#2 Evan Mattson

Evan Mattson

    Super Member

  • Members

  • 231 posts
  • LocationAnn Arbor, MI
  • Framework Version:latest stable & beta releases
  • Country: Country Flag

Posted 22 September 2013 - 01:56 PM

Greetings @jennajonesdesign,

 

To answer this I need to know what version of pagelines you're running.  Are you using DMS or PageLines Framework 2.x?



#3 jennajonesdesign

jennajonesdesign

    Super Member

  • Members

  • 142 posts
  • LocationBillings, MT
  • Country: Country Flag

Posted 22 September 2013 - 04:24 PM

dms pro



#4 Evan Mattson

Evan Mattson

    Super Member

  • Members

  • 231 posts
  • LocationAnn Arbor, MI
  • Framework Version:latest stable & beta releases
  • Country: Country Flag

Posted 24 September 2013 - 03:14 PM   Best Answer

With DMS, sections are explicitly defined as full-width or not.  Hero Nav is not a full-width section, but you may be able to achieve a full-width display with a little custom CSS, that is if your site layout is not 'boxed' (this is not the default though, so unless you changed it to this then it should be set for full width sections).

 

So in this case, you have Hero Nav inside a DMS section area.  The area has an inner content div that is limiting Hero Nav from displaying being full-width.  To do this, we need to remove the max-width from this area (you may want to keep HN in it's own area here as everything else in the area may not look right full-width.

 

We need to get the html ID from the containing area for our custom css.  Open up chrome developer tools and inspect the area to get the id.
fiinFl3.png

 

target the .pl-content div, and disable the max-width constraint:

fZlMbFf.png

 

My CSS

 #pl_areaac2c9a .pl-content {max-width: none;}

Simply change "#pl_areaac2c9a" to your area's unique html id, and you're all set!

 

Result

4t25Oq6.png
 







Also tagged with one or more of these keywords: Hero Nav, hav, full width