WordPress admin bar and Bootstrap Navigation Menu fix in functions.php

Bootstrap Navigation Menu in WordPress hidden from the WordPress Admin bar issue fix code snippet


Add this code snippet to your functions.php file to fix the issue with the WordPress admin bar when logged in and the Bootstrap Navigation Menu which is hidden from the admin bar when you are logged in to your WordPress website.

function bwtdemo_wp_head(){
echo ‘<style>’.PHP_EOL;
echo ‘body{ padding-top: 0px !important; }’.PHP_EOL;
echo ‘body.logged-in .fixed-top.navbar-dark.bg-dark{ top:78px; }’.PHP_EOL;
// Using custom CSS class name.
echo ‘body.body-logged-in .fixed-top.navbar-dark.bg-dark{ top: 32px !important; }’.PHP_EOL;
// Using WordPress default CSS class name.
echo ‘body.logged-in .fixed-top.navbar-dark.bg-dark{ top: 32px !important; }’.PHP_EOL;
echo ‘</style>’.PHP_EOL;
}
add_action(‘wp_head’, ‘bwtdemo_wp_head’);

When you add the snippet above in your functions.php go to your header.php file and change the opening body tag which should looks like <body> with the snippet code below:

<body <?php body_class(); ?>>

Save both files to your server and WordPress template path and refresh the page to see the changes.

Note: .fixed-top.navbar-dark.bg-dark can be different for your WordPress Template so inspect the classes for your navigation menu and change to your navigation menu classes to get this fixed.