Change Site Header Width

Hello,

I want to line up my header with centred image and menu with the witdh of the main pages, because we use a background image.

I allready added some custom css:

    .site-logo {
      max-height: 200px;
      padding-top: 0px;
      padding-bottom: 0px;
    }

    @media only screen and (min-width: 992px) {
      .site-header {
        background-color: #ffffff !important;		
      }
    } 

If I change the .site-header with, it just starts from the left and I can’t center it. Can you help me with some custom css?

And maybe the same for the footer.

Thanks a lot.

Hello there,

I’d like to help, but I can’t get it clearly. Please share a link to your site and post a screenshot with some descriptive annotations to make everything clearer.

Regards,
Kharis

Heres my screenshot. I did send you the link in a message. The same with the footer.

Thank you,
Gunnar

Hello Gunnar,

Try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

    .site-header .container {
      background-color: #fff;
    }

    #masthead.site-header {
      background-color: transparent !important;
      position: static !important;
    }

    .header-clone {
      display: none;
    }

    @media only screen and (min-width: 768px) {
      .site-header .container {
        width: 720px;  
      }
    }

    @media only screen and (min-width: 992px) {
      .site-header .container {
        width: 940px;
      }
    }

    @media only screen and (min-width: 1200px) {
      .site-header .container {
        width: 1140px;
      }
    }

Regards,
Kharis

Thank you Kharis, it works great.

Can you give the the same CSS Code just for the footer?

For footer, try adding this code:

    #colophon .container,
    #sidebar-footer .container {
      background-color: #fff;
    }

    #colophon.site-footer,
    #sidebar-footer.footer-widgets {
      background-color: transparent !important;
    }

    @media only screen and (min-width: 768px) {
      #colophon .container,
      #sidebar-footer .container {
        width: 720px;  
      }
    }

    @media only screen and (min-width: 992px) {
      #colophon .container,
      #sidebar-footer .container{
        width: 940px;
      }
    }

    @media only screen and (min-width: 1200px) {
      #colophon .container,
      #sidebar-footer .container {
        width: 1140px;
      }
    }  

Let me know how it goes.

Regards,
Kharis

It does work. Can I choose different colors for the boxes and close the gaps?

And there is another problem with this gab on the mobile version:

k3

Can I move the body maybe a little bit up, so its in front of the white header? Or close the gap to the side?

Please share a link to your site, so I can get the exact selector to use depends on your current situation. Sorry for asking this, but it’d be much efficient for us.

Regards,
Kharis

I did send the link to you yesterday.

Best regards,
Gunnar

Hello there,

Try this code:

    #colophon .container,
    #sidebar-footer .container {
      background-color: #fff;
    }

    #colophon.site-footer,
    #sidebar-footer.footer-widgets {
      background-color: transparent !important;
    }

    @media only screen and (min-width: 768px) {
      #colophon .container,
      #sidebar-footer .container {
        width: 720px;  
      }
    }

    @media only screen and (min-width: 992px) {
      #colophon .container,
      #sidebar-footer .container{
        width: 940px;
      }
    }

    @media only screen and (min-width: 1200px) {
      #colophon .container,
      #sidebar-footer .container {
        width: 1140px;
      }
    }  


    .site-footer,
    .footer-widgets {
      padding-top: 0; 
      padding-bottom: 0;
      border: none;
    }

Regards,
Kharis

That worked great. Thank you. Can you now help we to push the mobile menu buttom a little bit up?

If I just close the gap between the buttom and the site, the bottom goes behind the site.

k4 k5

Hello there,

Try adding this code:

    #masthead.site-header {
      padding-bottom: 0;
    }

    .btn-menu {
      margin-top: -10px;
    }

    @media only screen and (max-width: 1024px) {
      .site-header .col-md-4 {
        margin-bottom: 0;
      }
      .site-header .col-md-8 {
        margin-bottom: 15px;
      } 
    }

Regards,
Kharis

Thanks you Kharis, worked fine

Regards,
Gunnar

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis