I have used Bootstrap5.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="<?php echo esc_url(home_url('/')); ?>">
<?php
$logo_image_url = get_theme_mod('custom_logo_image'); // Retrieve the uploaded logo image URL
if ($logo_image_url) {
// If a custom logo image is set, display it
echo '<img src="' . esc_url($logo_image_url) . '" alt="Logo" width="100" height="100">';
} else {
// If no custom logo image is set, display a default logo
echo '<img src="' . get_template_directory_uri() . '/default-logo.png" alt="Logo" width="100" height="100">';
}
?>
</a>
<!-- Add an ID to the navbar toggler button -->
<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Define the offcanvas container -->
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasNavbarLabel">Menu</h5>
<!-- Add a close button -->
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<!-- Your navigation links -->
<?php
// Display the custom navigation menu
if (has_nav_menu('primary')) {
wp_nav_menu(array(
'theme_location' => 'primary',
'container' => false,
'menu_class' => 'navbar-nav',
'fallback_cb' => '__return_false',
'items_wrap' => '<ul id="%1$s" class="%2$s navbar-nav">%3$s</ul>',
'depth' => 3,
));
} else {
echo '<ul class="navbar-nav"><li class="nav-item"><a class="nav-link" href="#">No menu assigned</a></li></ul>';
}
?>
</div>
</div>
</div>
</nav>
To make your navbar dynamic on WordPress, you can achieve this by creating a custom navigation menu in the WordPress admin dashboard and then integrating it into your theme’s template files. Here’s how you can do it:
- Create a Custom Navigation Menu:
- Go to your WordPress admin dashboard.
- Navigate to Appearance > Menus.
- Create a new menu and add your desired menu items. You can also create dropdowns and add custom links as needed.
- Integrate the Custom Menu into your Theme:
- Open your theme’s template files (typically found in wp-content/themes/your-theme-name).
- Locate the header.php file, where the navigation menu markup is usually located.
- Replace Static Markup with WordPress Functions:
- Replace the static HTML markup of your navbar with WordPress functions to dynamically generate the menu.
- WordPress provides functions like
wp_nav_menu()displaying navigation menus.
<div class="offcanvas-body">
<!-- Your navigation links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="#">page 1
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Sample Page</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
</ul>
</div>Into
<div class="offcanvas-body">
<!-- Your navigation links -->
<?php
// Display the custom navigation menu
if (has_nav_menu('primary')) {
wp_nav_menu(array(
'theme_location' => 'primary',
'container' => false,
'menu_class' => 'navbar-nav',
'fallback_cb' => '__return_false',
'items_wrap' => '<ul id="%1$s" class="%2$s navbar-nav">%3$s</ul>',
'depth' => 3,
));
} else {
echo '<ul class="navbar-nav"><li class="nav-item"><a class="nav-link" href="#">No menu assigned</a></li></ul>';
}
?>
</div>In the above code:
wp_nav_menu()function is used to generate the dynamic navigation menu.'theme_location'parameter specifies the location of the menu. Make sure it matches the menu location you created in the WordPress admin.'container','menu_class','items_wrap', and'depth'parameters are used to customize the output of the menu.- In the wp_nav_menu() function, the items_wrap parameter is a format string that defines the structure of the HTML output for the menu items. It contains placeholders %1$s, %2$s, and %3$s which are replaced by specific values when generating the menu markup.
- %1$s: This placeholder is replaced by the ID of the menu container.
- %2$s: This placeholder is replaced by a list of CSS classes applied to the menu container.
- %3$s: This placeholder is replaced by the actual menu items.
- Let’s say you have a navigation menu with the following attributes:
- ID: primary-menu
- CSS classes: main-menu, custom-menu
<ul id="primary-menu" class="main-menu custom-menu navbar-nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<!-- Other menu items -->
</ul>
%1$s is replaced by the ID of the menu container, which is primary-menu.
%2$s is replaced by the list of CSS classes applied to the menu container, which are main-menu and custom-menu.
%3$s is replaced by the actual menu items.
