Jump to content


This topic is now archived and is closed to further replies.


Make Hero Nav Full Width?

Recommended Posts


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!'



Share this post

Link to post
Share on other sites

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?

Share this post

Link to post
Share on other sites

dms pro

Share this post

Link to post
Share on other sites

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.


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




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

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




Share this post

Link to post
Share on other sites

  • Similar Content

    • Jared Smith
      By Jared Smith+
      I'm trying to make a visible border around the entirety of a client's site.  Example on some other site here:

      So it is around the Title, Menu, and Content Area.  I'm having a bit of difficulty with this on pagelines, using the Framework theme. It's slightly more complex because the site has a "landing page" that doesn't need the border. Much like this homepage
      Right now I'm using a content width of 80%, and fullscreen.  But maybe thats not the best way to do it.  
      So, with the #site id, I can hit the whole area on most of the site, but I'm not sure how I can remove it for just one page.
      #site { border:1px solid #ccc; margin: 100px 5% 5% 50px; } anyone have any suggestions?  Maybe I need to go make a child template, not sure?  Thanks!
    • Perry
      By Perry+
      Hello There, 
      I am working with Platform 5 and have run into an unnerving problem. I am trying to position my clients picture along the bottom of the container, so that it sits right on the bottom. After a good hour of googling and messing with the CSS I figured I would ask the question here. Below is my screenshot displaying my problem. I will need to do this frequently in the future. 
      My Problem Image
      Unlike in DMS, when I add a margin to an embed or image box it simply makes the container larger while keeping the padding, I cannot have any padding or any space whatsoever on the bottom of my clients image.  Is there a way to remove all padding from the container so I can have this work across screen sizes? If not is there anyway to position an element directly at the bottom of another element in Platform 5? This seems like a basic feature and was easily attainable within DMS. 
      I cannot create an image combining all these elements as it will not scale well on mobile and will make my clients logo unreadable and her face incredibly small. 
      Thank you for any help,
    • FRevi
      By FRevi+
      I am trying to achieve a gallery (Envira Gallery plugin) that spans the full width of a page, within Platform 5 theme. Can't figure it out.
      The page should look roughly like this: www.frankrevi.photography/envira/favorites-2 (maybe minus the title, that's another story). This is a standalone gallery page and not part of my site. Nothing links to it.
      But instead it is this on the real page: www.frankrevi.photography/favorites.
      Currently I have the gallery in a Pagelines Framework Content section. My framework content wrap is set to unwrapped full width. I'm using all 12 columns. In Pagelines Settings, my Layout/Nav Content Width is set to 100%.
      How can I get the gallery on the real page URL to be the full page width please?
    • zetanet
      By zetanet+
      Look the Google tour iframe in this page:
      Is it possible to see this iframe not boxed (as you see) but in full width?
    • opwolken
      By opwolken
      I'm wondering if it's possible to apply the featured image to a page's canvas area?
      I would like to have the featured image in a canvas on the matching page.