How do I change the width of the header section in my WordPress theme?

Hi Donald,

Thanks for reaching out. Can you link your website URL in the thread so that we can inspect the site and let you know what needs to be done. Also, are you using Crio Pro WordPress theme, or are you using a different BoldGrid theme?

We look forward to hearing from you!

Hi Donald,

Unfortunately Callaway does not have the same level of customization as Crio in the theme Customizer, but you should be able to make the changes you need with the help of a little custom JavaScript.

The following JS snippet changes the elements responsible for controlling the width of the header and footer to use a fixed width, like your page content, instead of the full width design.

jQuery('.site-header .bgtfw, .site-footer .bgtfw').removeClass('container-fluid').addClass('container');

Enter that code into the Custom JS area located under the Advanced section of the Customizer to apply the fix to your website.

Please let us know if you have any other questions for us Donald, we are always happy to help!

Hi Donald,

Are there any special characters preceding the custom JS code that you added in that area, specifically two slashes ( // )? If so then removing those characters should allow the code to start working as expected since the double slashes tell WordPress to skip the code instead of executing  it.

Could you send us the entire contents of the Custom JS area if the double slashes are not the problem? There could be something else responsible I would like to see if there is anything else in there that might help me figure out the issue with running the code correctly.

Hopefully that fixes the problem and gets your Header displaying at the proper width.

You’re welcome Donald, I’m happy to hear that the problem was just those pesky slashes! Please let us know if you ever have any other questions for us!