Thanks in advance for the help, and apologies if I'm being dumb, I'm rather new. I have tried various different answers on this site, but they did not work, as they were meant for different pages. I am trying to have the header and main body have a different bootstrap version.

For the website, I created a navbar (in a file called header-topnav.php) with bootstrap 4.1.3 (https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css) and the body / rest of the website was created with bootstrap 3.3.7, and when I enqueue both in functions.php, it seems that there are major conflicts with the styling of the body but the navbar is fine.

If I only link the bootstrap 4 to the header-topnav.php file, it still conflicts with the body. Trying the following after registering bootstrap4 in functions.php did not work:

<?  function topnav_enqueue_style() {

  wp_enqueue_style( 'bootstrap4-css');
add_action( 'wp_enqueue_scripts', 'topnav_enqueue_style' ); ?>

Trying a conditional in functions.php didn't work (as expected) because my custom header is not a page, persay. Just a header.

    if( is_page( 'header-topnav' ) ) {   // Only add this style onto the Blog page.
        wp_enqueue_style( 'bootstrap4-css' );

How can I have bootstrap 4 applied to the header and ONLY the header? I would like this to be applied to the header of all pages, but only have the header utilize bootstrap 4 as of now. Is there some if statement I could use in the functions.php to do this? Thank you so much.

  • That's not really how CSS works. When you load a CSS file it's going to be loaded for the entire page. If you want styles to only affect a certain part of the page you need to write the CSS that way. Bootstrap is designed to be applied as the base CSS styles for an entire page. It's not designed to be loaded on top of an existing site just for certain elements. Commented Jun 17, 2020 at 6:51
  • Thanks so much for the quick response. Does this mean that it's not possible at all to do what I'm describing? Should I then redevelop the navbar if it's not practical to change the whole website right now? Thanks. @JacobPeattie Commented Jun 17, 2020 at 6:54


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.