css - How to change header from full-width to box width

admin管理员组

文章数量:1023782

I'm using a custom theme on my website.

What I'd like to do is have the header to be boxed while having the main content staying as is.

I've looked at several other threads, but I couldn't manage to make my way to the solution with the theme.

here is my header CSS that makes its full width

.full-width-content .wrap, .full-width-content .content-sidebar-wrap {
margin: 0 auto;
max-width: 100%;
width: 100%;}

I'm using a custom theme on my website.

What I'd like to do is have the header to be boxed while having the main content staying as is.

I've looked at several other threads, but I couldn't manage to make my way to the solution with the theme.

here is my header CSS that makes its full width

.full-width-content .wrap, .full-width-content .content-sidebar-wrap {
margin: 0 auto;
max-width: 100%;
width: 100%;}

• css

Share Improve this question edited Apr 11, 2019 at 5:47 Talha khan asked Apr 11, 2019 at 4:49 Talha khanTalha khan 5311 silver badge1111 bronze badges 9

• either post your full code or provide a live example. without that how can we help? – Vishwa Commented Apr 11, 2019 at 5:41
• I provide the link first but someone said me to remove the link – Talha khan Commented Apr 11, 2019 at 5:42
• drketo.jjcreative.info/blog. Here is the live example – Talha khan Commented Apr 11, 2019 at 5:43
• without seeing the problem, we can't help. you should provide all the details you can give. and be more clear. what do you mean to be boxed? to you, it may be crystal clear, but to others it may not – Vishwa Commented Apr 11, 2019 at 5:44
• Did you see the live website I provide you with the link – Talha khan Commented Apr 11, 2019 at 5:45

 |  Show 4 more comments

1 Answer 1

Sorted by: Reset to default 1

If you want to reduce the width of your header ,

you can do few different methods.

If you use bootstrap, add class container to your header, which will add left and right padding to the element.

Or you can add your own css. With the given url, I found that your header's wrap class can be updated to get you a custom width. so here it is,

.site-container header.site-header.fixed .wrap{width: 80%;}

you can change the value as you wish

I'm using a custom theme on my website.

What I'd like to do is have the header to be boxed while having the main content staying as is.

I've looked at several other threads, but I couldn't manage to make my way to the solution with the theme.

here is my header CSS that makes its full width

.full-width-content .wrap, .full-width-content .content-sidebar-wrap {
margin: 0 auto;
max-width: 100%;
width: 100%;}

I'm using a custom theme on my website.

What I'd like to do is have the header to be boxed while having the main content staying as is.

I've looked at several other threads, but I couldn't manage to make my way to the solution with the theme.

here is my header CSS that makes its full width

.full-width-content .wrap, .full-width-content .content-sidebar-wrap {
margin: 0 auto;
max-width: 100%;
width: 100%;}

• css

Share Improve this question edited Apr 11, 2019 at 5:47 Talha khan asked Apr 11, 2019 at 4:49 Talha khanTalha khan 5311 silver badge1111 bronze badges 9

• either post your full code or provide a live example. without that how can we help? – Vishwa Commented Apr 11, 2019 at 5:41
• I provide the link first but someone said me to remove the link – Talha khan Commented Apr 11, 2019 at 5:42
• drketo.jjcreative.info/blog. Here is the live example – Talha khan Commented Apr 11, 2019 at 5:43
• without seeing the problem, we can't help. you should provide all the details you can give. and be more clear. what do you mean to be boxed? to you, it may be crystal clear, but to others it may not – Vishwa Commented Apr 11, 2019 at 5:44
• Did you see the live website I provide you with the link – Talha khan Commented Apr 11, 2019 at 5:45

 |  Show 4 more comments

1 Answer 1

Sorted by: Reset to default 1

If you want to reduce the width of your header ,

you can do few different methods.

If you use bootstrap, add class container to your header, which will add left and right padding to the element.

Or you can add your own css. With the given url, I found that your header's wrap class can be updated to get you a custom width. so here it is,

.site-container header.site-header.fixed .wrap{width: 80%;}

you can change the value as you wish

本文标签： cssHow to change header from fullwidth to box width