functions - How to reference different css (bootstrap) stylesheets for the header and body of a page?

admin管理员组

文章数量:1332872

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 (.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.

本文标签： functionsHow to reference different css (bootstrap) stylesheets for the header and body of a page