• 0
Sign in to follow this  
Followers 0

Full-Width Header?


Question

Posted · Report post

Is there a way to make the header only full width? I changed my layout to full width in the settings but that makes the whole site full width and it also makes all section areas transparent. I fiddled around with it and added a background but I couldn't get it to work.

 

I added screenshots, all I really want to change is everything above the red line to be full width with no changes to the content/sidebar/widget areas.....I want to keep the green and white chevron background on the sides....below the menu bar.

 

[attachment=2387:Full Width Header.jpg]

Share this post


Link to post
Share on other sites

7 answers to this question

  • 0

Posted · Report post

Yeah I mentioned in my previous post, as far as I am concerned (I could be wrong), the simplest way to have a full width header and have a fixed width content area is to use the full width mode and then apply custom CSS to your content area giving it a background color, padding etc...

 

I did this quick in Chrome dev tools - https://cloudup.com/cN5FbT6R4rd

 

You're going to need use additional CSS on the footer too. In regards to that code provided in Batmans post, that code can not work in Boxed mode, I've tried and it doesn't work, but does in Full Width mode. Whether this is to do with updates to DMS or the code is out dated, I don't know. Basically, Box mode wraps everything in a container which has a specific width, margins etc.. it is not possible to achieve a full width element without extensive CSS to my knowledge.

 

The best thing I can recommend is that you play about in Chrome dev tools, I have provided the basic code I used for as a starting point, but please be aware we do not provide extensive CSS/LESS support which in my opinion this requires.

 

#pl_areau36299 .pl-content {
  background: white;
  padding: 40px;
  box-sizing: border-box;
}

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

batman thanks for the link. I've followed all the instructions on that page and it isn't working. :(

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

HI,

 

You're using Boxed Mode, the CSS as far as I can tell is only for the full width layout option. So it is not possible to make the header full width because the box container is set to width you have specified and the header element tag is placed inside the the boxed mode container.

 

To have a full width header area you're going to want to switch to the Full width option and then add CSS to the content container giving it a specific width.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Danny, ok thanks for the info. I tried switching to full width mode but I can't seem to make that work either. When I switch to full width mode then the "content areas" are transparent and the chevron background shows up everywhere. But also, when it's in full width mode the content/widget areas are the same width as the header and trying to change one changes the other.

 

also, in the link batman posted the CSS code says boxed mode no full width?

 

thanks

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Danny thanks! I messed around with it yesterday and almost got it how I wanted it. I'll add in this code you gave me and see what I can also do with that. thanks so much!

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

No problem.

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  
Followers 0