Archived

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

  • 0

Header Problems


Question

Posted · Report post

I would like the header of the site I'm working on to be filled with the header image, and go edge to edge with no padding on either side. I do not want the image to shrink to fit.

 

I tried using the feature built in to PL of adding a custom header image. At first it was there, though it had shrunk to fit into the padded area. Then it disappeared, and I tried everything to get it back. I gave up on that.

 

Then, I made a banner that contained the graphic, and dropped the banner into the header. That worked better, but it was still being pushed over by the padding. I tried a left margin of -10px, to no avail. I tried different CSS things, trying changing the padding on selectors that I could guess at. 

 

I also want the menu to touch the sides - not be squished in by padding.

 

How do I get rid of the left and right padding in the main website area? 

What is the best method to use for putting an image in the header?

 

www.thehomeschoolingcoach.com

 

Thanks!

Share this post


Link to post
Share on other sites

2 answers to this question

Posted · Report post

Hi kmacauley, I can not see your URL live (name and password required) but...

 

I have the header background set to the content width instead of the page width on my web (http://arte-baires.com.ar)

 

If you need this, first I setup in

Pagelines > Site Option > Layout editor

this options

"Responsive with Pixel Width"

and

"Full-Width Sections" 

 

Then I add this CSS rules

 

#header.container-group {background-image: url(http://YOUR IMAGE HERE.jpg;}

Share this post


Link to post
Share on other sites

Posted · Report post

Thanks for the reply. 

 

I remembered that I could use the browser to inspect the elements, and was able to get the selector names. I added the CSS changing the padding 0px. All is well.

 

Thanks!

Share this post


Link to post
Share on other sites