billybatz9
Active member
Hello can someone tell me if they know how to shorten the header to 1080px;
But... keep the background header going across white (#fff).
But... keep the background header going across white (#fff).
XF 2.0 header logo
- Thread starter billybatz9
- Start date
Brad Padgett
Well-known member
You need to use margin on the body to do that. Add something like this to your extra.less template
I assume by the way you've organized your post you want the entire page to slim down some. As a header at 1080px and the body of the page full width would not be very appealing. If so try the code i gave you to extra.less
Now for the header you can either keep it white or try a number of different backgrounds. You can even change the width of the header only if for some reason that's what you wanted to do by using the .p-header class.
See below.
The !important flag is just a way to overwrite current styling that is being used. If any of the properties I gave you do not work feel free to try with !important to make sure that it wasn't required. I'm not exactly sure which part of the styling may need it or not as I haven't tested but this code will work if you tinker with it some you can do whatever you want to the header by using the .p-header class
Anyways a lot of this you can do with style properties. Some of it you can't though. Let me know if you have any direct questions. I'll try to help out the best I can.
Code:
body {
margin-left: 80px !important;
margin-right: 80px !important;
}I assume by the way you've organized your post you want the entire page to slim down some. As a header at 1080px and the body of the page full width would not be very appealing. If so try the code i gave you to extra.less
Now for the header you can either keep it white or try a number of different backgrounds. You can even change the width of the header only if for some reason that's what you wanted to do by using the .p-header class.
See below.
Code:
.p-header {
margin-left: 80px;
margin-right: 80px;
background-color: #fff;
}The !important flag is just a way to overwrite current styling that is being used. If any of the properties I gave you do not work feel free to try with !important to make sure that it wasn't required. I'm not exactly sure which part of the styling may need it or not as I haven't tested but this code will work if you tinker with it some you can do whatever you want to the header by using the .p-header class
Anyways a lot of this you can do with style properties. Some of it you can't though. Let me know if you have any direct questions. I'll try to help out the best I can.
Similar threads
- Question
