03-31-2022, 08:07 PM
Bootstrap Sticky Navbar Menu on Scroll using CSS and JavaScript
<div style="margin: 5px 5% 10px 5%;"><img src="https://www.sickgaming.net/blog/wp-content/uploads/2022/03/bootstrap-sticky-navbar-menu-on-scroll-using-css-and-javascript.jpg" width="550" height="135" title="" alt="" /></div><div><div class="modified-on" readability="7.1304347826087"> by <a href="https://phppot.com/about/">Vincy</a>. Last modified on January 13th, 2022.</div>
<p>The Bootstrap navbar is a menu <a href="https://phppot.com/php/bootstrap-ecommerce-product-category-subcategory-page-with-filter-and-navigation/">responsive header with navigation</a>. Bootstrap supports enabling many UI effects with this navbar component. For example,</p>
<ol>
<li>Sticky navbar on scrolling the content.</li>
<li>Slide-in effect by using Bootstrap expand-collapse</li>
<li>Mobile-friendly responsive menu navigation.</li>
</ol>
<p>This article is for creating a Bootstrap sticky navbar on the page top header. It shows both static and dynamic content on the navigation header. Let us see how to display a sticky navbar on a page using Bootstrap.</p>
<p>This quick example shows code to display the stick navbar. It includes Boostrap into the code by using CDN URL. You can also install <a href="https://getbootstrap.com/" target="_blank" rel="noopener">Bootstrap</a> via composer into your application vendor directory.</p>
<p>It uses Bootstrap <i>sticky-top</i> to the .navbar element.</p>
<div class="post-section-highlight" readability="43">
<h2>Quick Example</h2>
<p class="code-heading">Include this into the HTML <head></p>
<pre class="prettyprint"><code class="language-html">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> </code></pre>
<p class="code-heading">Put this Bootstrap sticky navbar into the <body></p>
<pre class="prettyprint"><code class="language-html">
<nav class="navbar navbar-expand-lg navbar navbar-expand-sm sticky-top navbar-dark bg-dark"> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"><a class="nav-link" href="#">Home</a></li> <li class="nav-item active"><a class="nav-link" href="#">Contact</a> </li> <li class="nav-item active"><a class="nav-link" href="#">About</a> </ul> </div>
</nav> </code></pre>
</div>
<h2>Bootstrap navbar default behaviour</h2>
<p>The below list shows the default behaviour of the Bootstrap navbar. This article features this UI component more by making it sticky on scrolling.</p>
<ul>
<li>Navbar is <a href="https://alistapart.com/article/responsive-web-design/" target="_blank" rel="noopener">responsive </a>by default in any viewport.</li>
<li>It is hidden for printing but can be overridden by adding .d-print to the .navbar.</li>
<li>It lets assistive mechanism to identify navbar by using <nav>. Bootstrap recommends to add role=”navigation” attribute for the <div> like containers.</li>
</ul>
<h2>Uses of Bootstrap sticky navbar</h2>
<p>The Bootstrap sticky navbar provides a fixed header element mostly at the top. Sometimes, it will be used in the page and form footer.</p>
<p>The following list of items shows some of the uses of a sticky navbar in a website.</p>
<ol>
<li>To create a fixed header menu. Eg: The header menu links like ‘Contact’, ‘Request a quote’ will be useful if they are sticky on scroll.</li>
<li>To create fixed footer links. Eg: The social media share option in the footer can be sticky to let the user to share the content at any time of reading.</li>
<li>To keep a <a href="https://phppot.com/php/how-to-show-php-sticky-contact-form-using-css/">HTML form footer sticky</a> on scroll. The payment form with the ‘Pay now’ or ‘Buy now’ control should be fixed regardless of the page scroll. It reduces friction and allows users to buy the product easily.</li>
</ol>
<h2>Bootstrap sicky navbar with static menu HTML</h2>
<p>This code will help users having static websites who want to add a <a href="https://phppot.com/css/sticky-header-using-css/">sticky navbar in the header</a>.</p>
<p>This example includes an expandable static header menu. It shows the <a href="https://phppot.com/css/multilevel-dropdown-menu-with-pure-css/">sub-menu dropdown on clicking the main menu</a> link.</p>
<p class="code-heading">bootstrap-sticky-navbar-static.php</p>
<pre class="prettyprint"><code class="language-html">
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<style>
.container { height: 1000px;
}
</style>
<body> <nav class="navbar navbar-expand-lg navbar navbar-expand-sm sticky-top navbar-dark bg-dark"> <a class="navbar-brand" href="#">Site logo</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"><a class="nav-link" href="#">Home</a></li> <li class="nav-item active"><a class="nav-link" href="#">Contact</a> </li> <li class="nav-item active"><a class="nav-link" href="#">About</a> </li> <li class="nav-item dropdown active"><a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Services </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="#">Map integration</a> <a class="dropdown-item" href="#">Chart generation</a> <a class="dropdown-item" href="#">Report generation </a> </div></li> <li class="nav-item dropdown active"><a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Projects </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="#"> Chat plugin</a> <a class="dropdown-item" href="#">Form builder</a> </div></li> <li class="nav-item active"><a class="nav-link disabled" href="#">What's new</a></li> </ul> <form class="form-inline my-2 my-lg-0"> <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> </form> </div> </nav> <div class="container"> <div class="row"> <div class="col-12 py-4"> <h1>Page scroll content</h1> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tincidunt dolor eget lorem blandit, auctor porttitor enim faucibus. Mauris sed elit sollicitudin, aliquam lorem nec, suscipit ex. Sed mollis rhoncus scelerisque. Morbi varius a est sed luctus. Morbi sapien velit, venenatis a sapien vitae, commodo rutrum erat. Nam volutpat diam ac convallis egestas. Nunc convallis tempor hendrerit. Aenean turpis quam, viverra eu eros quis, ornare tristique velit. </div> </div> </div>
</body>
</html> </code></pre>
<h2>Bootstrap navbar with data-target link</h2>
<p>In the bootstrap sticky navbar, it allows specifying the data target to expand.</p>
<p>In this example, the header navbar shows a cart icon on page load. The header HTML also contains the <a href="https://phppot.com/php/shopping-cart-software-product-quick-view-with-bootstrap-tooltip/">cart info</a> hidden by default.</p>
<p>The navbar cart element targets this hidden cart info to expand it on the click event.</p>
<p class="code-heading">navbar-with-data-target.php</p>
<pre class="prettyprint"><code class="language-html">
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<style>
.container { height: 1000px;
}
</style>
<body> <div class="pos-f-t sticky-top"> <div class="collapse " id="navbarToggleExternalContent"> <div class="bg-dark p-4 text-right"> <div class="text-light ">Item count = 5</div> <div class="text-light ">Total price = $375</div> </div> </div> <nav class="navbar navbar-dark bg-dark"> <div class="col-lg-12"> <button class="navbar-toggler float-right" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-shopping-cart"> <circle cx="9" cy="21" r="1"></circle> <circle cx="20" cy="21" r="1"></circle> <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path></svg> </button> </div> </nav> </div> <div class="container"> <div class="row"> <div class="col-12 py-4"> <h1>Page scroll content</h1> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tincidunt dolor eget lorem blandit, auctor porttitor enim faucibus. Mauris sed elit sollicitudin, aliquam lorem nec, suscipit ex. Sed mollis rhoncus scelerisque. Morbi varius a est sed luctus. Morbi sapien velit, venenatis a sapien vitae, commodo rutrum erat. Nam volutpat diam ac convallis egestas. Nunc convallis tempor hendrerit. Aenean turpis quam, viverra eu eros quis, ornare tristique velit. </div> </div> </div>
</body>
</html> </code></pre>
<p>The below screenshot cart icon and the expanded cart info. It displays the number of items in the cart and the total amount.</p>
<p><img loading="lazy" class="alignnone size-large wp-image-16014" src="https://phppot.com/wp-content/uploads/2022/01/bootstrap-sticky-navbar-cart-info-550x135.jpg" alt="bootstrap sticky navbar cart info" width="550" height="135" srcset="https://phppot.com/wp-content/uploads/2022/01/bootstrap-sticky-navbar-cart-info-550x135.jpg 550w, https://phppot.com/wp-content/uploads/20...300x74.jpg 300w, https://phppot.com/wp-content/uploads/20...t-info.jpg 600w" sizes="(max-width: 550px) 100vw, 550px"></p>
<p><img loading="lazy" class="alignnone size-large wp-image-16015" src="https://phppot.com/wp-content/uploads/2022/01/bootstrap-data-target-550x268.jpg" alt="bootstrap data target" width="550" height="268" srcset="https://phppot.com/wp-content/uploads/2022/01/bootstrap-data-target-550x268.jpg 550w, https://phppot.com/wp-content/uploads/20...00x146.jpg 300w, https://phppot.com/wp-content/uploads/20...target.jpg 600w" sizes="(max-width: 550px) 100vw, 550px"></p>
<h2>Dynamic menu in the sticky navbar</h2>
<p>This example includes HTML as like as the static menu example. The difference is the menu items are from the database.</p>
<p>This code uses a PHP class DataSource.php to process the database operations. It uses <a href="https://phppot.com/php/crud-with-mysqli-prepared-statement-using-php/">MySqli with prepared-statement</a> to access the database.</p>
<p class="code-heading">bootstrap-sticky-navbar-dynamic.php</p>
<pre class="prettyprint"><code class="language-html">
<?php
namespace Phppot; use Phppot\DataSource;
require_once __DIR__ . '/DataSource.php';
$conn = new DataSource();
$query = "SELECT * FROM tbl_menu where parent = 0";
$mainresult = $conn->select($query);
?>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<style>
.container { height: 1000px;
}
</style>
<body> <nav class="navbar navbar-expand-lg navbar navbar-expand-sm sticky-top navbar-dark bg-dark"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mr-auto"> <?php foreach ($mainresult as $key => $val){?> <li class="nav-item dropdown active"><a class="nav-link " href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><?php echo $mainresult[$key]["menu_name"];?></a> <?php $query = "SELECT * FROM tbl_menu where parent= ?"; $paramType = "i"; $paramValue = array( $mainresult[$key]["id"] ); $subresult = $conn->select($query, $paramType, $paramValue); ?> <?php if (! empty($subresult)) {?> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <?php foreach ($subresult as $k => $v) {?> <a class="dropdown-item" href="#"><?php echo $subresult[$k]["menu_name"];?></a> <?php }?> </div> <?php } } ?> </li> </ul> <form class="form-inline my-2 my-lg-0"> <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> </form> </div> </nav> <div class="container"> <div class="row"> <div class="col-12 py-4"> <h1>Page scroll content</h1> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tincidunt dolor eget lorem blandit, auctor porttitor enim faucibus. Mauris sed elit sollicitudin, aliquam lorem nec, suscipit ex. Sed mollis rhoncus scelerisque. Morbi varius a est sed luctus. Morbi sapien velit, venenatis a sapien vitae, commodo rutrum erat. Nam volutpat diam ac convallis egestas. Nunc convallis tempor hendrerit. Aenean turpis quam, viverra eu eros quis, ornare tristique velit. </div> </div> </div>
</body>
</html> </code></pre>
<h2>Responsive Bootstrap sticky navbar</h2>
<p>Bootstrap navbar is responsive by default. In a mobile viewport, it displays a <a href="https://phppot.com/jquery/responsive-menu-with-jquery-and-css/">slide-down responsive menu</a>. On clicking the menu-expand icon it drops down the menu items.</p>
<p class="code-heading">responsive-navbar.php</p>
<pre class="prettyprint"><code class="language-html">
<?php
namespace Phppot; use Phppot\DataSource;
require_once __DIR__ . '/DataSource.php';
$conn = new DataSource();
$query = "SELECT * FROM tbl_menu";
$result = $conn->select($query);
?>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<style>
.container { height: 1000px;
}
</style>
<body> <nav class="navbar navbar-expand-lg sticky-top navbar-dark bg-dark"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarTogglerDemo03"> <ul class="navbar-nav mr-auto mt-2 mt-lg-0"> <?php foreach ($result as $key => $val){?> <li class="nav-item active"><a class="nav-link" href="#"><?php echo $result[$key]["responsive_name"];?> </li> </a><?php }?> </ul> <form class="form-inline my-2 my-lg-0"> <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> </form> </div> </nav> <div class="container"> <div class="row"> <div class="col-12 py-4"> <h1>Page scroll content</h1> Dolor sit amet, consectetur adipiscing elit. </div> </div> </div>
</body>
</html> </code></pre>
<h2>Database script</h2>
<p>Import this database script to display a dynamic Bootstrap sticky navbar. It contains menu items and the parent-child relationship data.</p>
<p class="code-heading">database.sql</p>
<pre class="prettyprint"><code class="language-html">
CREATE TABLE `tbl_menu` ( `id` int(11) NOT NULL, `menu_name` text NOT NULL, `parent` varchar(255) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4; --
-- Dumping data for table `tbl_menu`
-- INSERT INTO `tbl_menu` (`id`, `menu_name`, `parent`) VALUES
(1, 'Site logo', '0'),
(2, 'Home', '0'),
(3, 'Contact', '0'),
(4, 'About', '0'),
(5, 'Services', '0'),
(8, 'Map integration', '5'),
(9, 'Chart generation', '5'),
(10, 'Report generation', '5'),
(11, 'Projects', '0'),
(12, 'Chat plugin', '11'),
(13, 'Form builder', '11'),
(14, 'What\'s new', '0'); --
-- Indexes for table `tbl_menu`
--
ALTER TABLE `tbl_menu` ADD PRIMARY KEY (`id`); ALTER TABLE `tbl_menu` MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=15; </code></pre>
<h2>Bootstrap sticky navbar output</h2>
<p><img loading="lazy" class="alignnone size-large wp-image-15934" src="https://phppot.com/wp-content/uploads/2021/12/bootstrap-sticky-navbar-550x266.jpg" alt="bootstrap sticky navbar" width="550" height="266" srcset="https://phppot.com/wp-content/uploads/2021/12/bootstrap-sticky-navbar-550x266.jpg 550w, https://phppot.com/wp-content/uploads/20...00x145.jpg 300w, https://phppot.com/wp-content/uploads/20...navbar.jpg 602w" sizes="(max-width: 550px) 100vw, 550px"></p>
<p><img loading="lazy" class="alignnone size-full wp-image-15935" src="https://phppot.com/wp-content/uploads/2021/12/responsive-sticky-navbar.jpg" alt="responsive sticky navbar" width="477" height="749" srcset="https://phppot.com/wp-content/uploads/2021/12/responsive-sticky-navbar.jpg 477w, https://phppot.com/wp-content/uploads/20...91x300.jpg 191w" sizes="(max-width: 477px) 100vw, 477px"><br /><a class="download" href="https://phppot.com/downloads/bootstrap-sticky-navbar.zip">Download</a></p>
<p> <!-- #comments --> </p>
<div class="related-articles">
<h2>Popular Articles</h2>
</p></div>
<p> <a href="https://phppot.com/bootstrap/bootstrap-sticky-navbar/#top" class="top">↑ Back to Top</a> </p>
</div>
https://www.sickgaming.net/blog/2022/01/...avascript/
<div style="margin: 5px 5% 10px 5%;"><img src="https://www.sickgaming.net/blog/wp-content/uploads/2022/03/bootstrap-sticky-navbar-menu-on-scroll-using-css-and-javascript.jpg" width="550" height="135" title="" alt="" /></div><div><div class="modified-on" readability="7.1304347826087"> by <a href="https://phppot.com/about/">Vincy</a>. Last modified on January 13th, 2022.</div>
<p>The Bootstrap navbar is a menu <a href="https://phppot.com/php/bootstrap-ecommerce-product-category-subcategory-page-with-filter-and-navigation/">responsive header with navigation</a>. Bootstrap supports enabling many UI effects with this navbar component. For example,</p>
<ol>
<li>Sticky navbar on scrolling the content.</li>
<li>Slide-in effect by using Bootstrap expand-collapse</li>
<li>Mobile-friendly responsive menu navigation.</li>
</ol>
<p>This article is for creating a Bootstrap sticky navbar on the page top header. It shows both static and dynamic content on the navigation header. Let us see how to display a sticky navbar on a page using Bootstrap.</p>
<p>This quick example shows code to display the stick navbar. It includes Boostrap into the code by using CDN URL. You can also install <a href="https://getbootstrap.com/" target="_blank" rel="noopener">Bootstrap</a> via composer into your application vendor directory.</p>
<p>It uses Bootstrap <i>sticky-top</i> to the .navbar element.</p>
<div class="post-section-highlight" readability="43">
<h2>Quick Example</h2>
<p class="code-heading">Include this into the HTML <head></p>
<pre class="prettyprint"><code class="language-html">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> </code></pre>
<p class="code-heading">Put this Bootstrap sticky navbar into the <body></p>
<pre class="prettyprint"><code class="language-html">
<nav class="navbar navbar-expand-lg navbar navbar-expand-sm sticky-top navbar-dark bg-dark"> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"><a class="nav-link" href="#">Home</a></li> <li class="nav-item active"><a class="nav-link" href="#">Contact</a> </li> <li class="nav-item active"><a class="nav-link" href="#">About</a> </ul> </div>
</nav> </code></pre>
</div>
<h2>Bootstrap navbar default behaviour</h2>
<p>The below list shows the default behaviour of the Bootstrap navbar. This article features this UI component more by making it sticky on scrolling.</p>
<ul>
<li>Navbar is <a href="https://alistapart.com/article/responsive-web-design/" target="_blank" rel="noopener">responsive </a>by default in any viewport.</li>
<li>It is hidden for printing but can be overridden by adding .d-print to the .navbar.</li>
<li>It lets assistive mechanism to identify navbar by using <nav>. Bootstrap recommends to add role=”navigation” attribute for the <div> like containers.</li>
</ul>
<h2>Uses of Bootstrap sticky navbar</h2>
<p>The Bootstrap sticky navbar provides a fixed header element mostly at the top. Sometimes, it will be used in the page and form footer.</p>
<p>The following list of items shows some of the uses of a sticky navbar in a website.</p>
<ol>
<li>To create a fixed header menu. Eg: The header menu links like ‘Contact’, ‘Request a quote’ will be useful if they are sticky on scroll.</li>
<li>To create fixed footer links. Eg: The social media share option in the footer can be sticky to let the user to share the content at any time of reading.</li>
<li>To keep a <a href="https://phppot.com/php/how-to-show-php-sticky-contact-form-using-css/">HTML form footer sticky</a> on scroll. The payment form with the ‘Pay now’ or ‘Buy now’ control should be fixed regardless of the page scroll. It reduces friction and allows users to buy the product easily.</li>
</ol>
<h2>Bootstrap sicky navbar with static menu HTML</h2>
<p>This code will help users having static websites who want to add a <a href="https://phppot.com/css/sticky-header-using-css/">sticky navbar in the header</a>.</p>
<p>This example includes an expandable static header menu. It shows the <a href="https://phppot.com/css/multilevel-dropdown-menu-with-pure-css/">sub-menu dropdown on clicking the main menu</a> link.</p>
<p class="code-heading">bootstrap-sticky-navbar-static.php</p>
<pre class="prettyprint"><code class="language-html">
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<style>
.container { height: 1000px;
}
</style>
<body> <nav class="navbar navbar-expand-lg navbar navbar-expand-sm sticky-top navbar-dark bg-dark"> <a class="navbar-brand" href="#">Site logo</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"><a class="nav-link" href="#">Home</a></li> <li class="nav-item active"><a class="nav-link" href="#">Contact</a> </li> <li class="nav-item active"><a class="nav-link" href="#">About</a> </li> <li class="nav-item dropdown active"><a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Services </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="#">Map integration</a> <a class="dropdown-item" href="#">Chart generation</a> <a class="dropdown-item" href="#">Report generation </a> </div></li> <li class="nav-item dropdown active"><a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Projects </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="#"> Chat plugin</a> <a class="dropdown-item" href="#">Form builder</a> </div></li> <li class="nav-item active"><a class="nav-link disabled" href="#">What's new</a></li> </ul> <form class="form-inline my-2 my-lg-0"> <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> </form> </div> </nav> <div class="container"> <div class="row"> <div class="col-12 py-4"> <h1>Page scroll content</h1> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tincidunt dolor eget lorem blandit, auctor porttitor enim faucibus. Mauris sed elit sollicitudin, aliquam lorem nec, suscipit ex. Sed mollis rhoncus scelerisque. Morbi varius a est sed luctus. Morbi sapien velit, venenatis a sapien vitae, commodo rutrum erat. Nam volutpat diam ac convallis egestas. Nunc convallis tempor hendrerit. Aenean turpis quam, viverra eu eros quis, ornare tristique velit. </div> </div> </div>
</body>
</html> </code></pre>
<h2>Bootstrap navbar with data-target link</h2>
<p>In the bootstrap sticky navbar, it allows specifying the data target to expand.</p>
<p>In this example, the header navbar shows a cart icon on page load. The header HTML also contains the <a href="https://phppot.com/php/shopping-cart-software-product-quick-view-with-bootstrap-tooltip/">cart info</a> hidden by default.</p>
<p>The navbar cart element targets this hidden cart info to expand it on the click event.</p>
<p class="code-heading">navbar-with-data-target.php</p>
<pre class="prettyprint"><code class="language-html">
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<style>
.container { height: 1000px;
}
</style>
<body> <div class="pos-f-t sticky-top"> <div class="collapse " id="navbarToggleExternalContent"> <div class="bg-dark p-4 text-right"> <div class="text-light ">Item count = 5</div> <div class="text-light ">Total price = $375</div> </div> </div> <nav class="navbar navbar-dark bg-dark"> <div class="col-lg-12"> <button class="navbar-toggler float-right" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-shopping-cart"> <circle cx="9" cy="21" r="1"></circle> <circle cx="20" cy="21" r="1"></circle> <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path></svg> </button> </div> </nav> </div> <div class="container"> <div class="row"> <div class="col-12 py-4"> <h1>Page scroll content</h1> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tincidunt dolor eget lorem blandit, auctor porttitor enim faucibus. Mauris sed elit sollicitudin, aliquam lorem nec, suscipit ex. Sed mollis rhoncus scelerisque. Morbi varius a est sed luctus. Morbi sapien velit, venenatis a sapien vitae, commodo rutrum erat. Nam volutpat diam ac convallis egestas. Nunc convallis tempor hendrerit. Aenean turpis quam, viverra eu eros quis, ornare tristique velit. </div> </div> </div>
</body>
</html> </code></pre>
<p>The below screenshot cart icon and the expanded cart info. It displays the number of items in the cart and the total amount.</p>
<p><img loading="lazy" class="alignnone size-large wp-image-16014" src="https://phppot.com/wp-content/uploads/2022/01/bootstrap-sticky-navbar-cart-info-550x135.jpg" alt="bootstrap sticky navbar cart info" width="550" height="135" srcset="https://phppot.com/wp-content/uploads/2022/01/bootstrap-sticky-navbar-cart-info-550x135.jpg 550w, https://phppot.com/wp-content/uploads/20...300x74.jpg 300w, https://phppot.com/wp-content/uploads/20...t-info.jpg 600w" sizes="(max-width: 550px) 100vw, 550px"></p>
<p><img loading="lazy" class="alignnone size-large wp-image-16015" src="https://phppot.com/wp-content/uploads/2022/01/bootstrap-data-target-550x268.jpg" alt="bootstrap data target" width="550" height="268" srcset="https://phppot.com/wp-content/uploads/2022/01/bootstrap-data-target-550x268.jpg 550w, https://phppot.com/wp-content/uploads/20...00x146.jpg 300w, https://phppot.com/wp-content/uploads/20...target.jpg 600w" sizes="(max-width: 550px) 100vw, 550px"></p>
<h2>Dynamic menu in the sticky navbar</h2>
<p>This example includes HTML as like as the static menu example. The difference is the menu items are from the database.</p>
<p>This code uses a PHP class DataSource.php to process the database operations. It uses <a href="https://phppot.com/php/crud-with-mysqli-prepared-statement-using-php/">MySqli with prepared-statement</a> to access the database.</p>
<p class="code-heading">bootstrap-sticky-navbar-dynamic.php</p>
<pre class="prettyprint"><code class="language-html">
<?php
namespace Phppot; use Phppot\DataSource;
require_once __DIR__ . '/DataSource.php';
$conn = new DataSource();
$query = "SELECT * FROM tbl_menu where parent = 0";
$mainresult = $conn->select($query);
?>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<style>
.container { height: 1000px;
}
</style>
<body> <nav class="navbar navbar-expand-lg navbar navbar-expand-sm sticky-top navbar-dark bg-dark"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mr-auto"> <?php foreach ($mainresult as $key => $val){?> <li class="nav-item dropdown active"><a class="nav-link " href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><?php echo $mainresult[$key]["menu_name"];?></a> <?php $query = "SELECT * FROM tbl_menu where parent= ?"; $paramType = "i"; $paramValue = array( $mainresult[$key]["id"] ); $subresult = $conn->select($query, $paramType, $paramValue); ?> <?php if (! empty($subresult)) {?> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <?php foreach ($subresult as $k => $v) {?> <a class="dropdown-item" href="#"><?php echo $subresult[$k]["menu_name"];?></a> <?php }?> </div> <?php } } ?> </li> </ul> <form class="form-inline my-2 my-lg-0"> <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> </form> </div> </nav> <div class="container"> <div class="row"> <div class="col-12 py-4"> <h1>Page scroll content</h1> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tincidunt dolor eget lorem blandit, auctor porttitor enim faucibus. Mauris sed elit sollicitudin, aliquam lorem nec, suscipit ex. Sed mollis rhoncus scelerisque. Morbi varius a est sed luctus. Morbi sapien velit, venenatis a sapien vitae, commodo rutrum erat. Nam volutpat diam ac convallis egestas. Nunc convallis tempor hendrerit. Aenean turpis quam, viverra eu eros quis, ornare tristique velit. </div> </div> </div>
</body>
</html> </code></pre>
<h2>Responsive Bootstrap sticky navbar</h2>
<p>Bootstrap navbar is responsive by default. In a mobile viewport, it displays a <a href="https://phppot.com/jquery/responsive-menu-with-jquery-and-css/">slide-down responsive menu</a>. On clicking the menu-expand icon it drops down the menu items.</p>
<p class="code-heading">responsive-navbar.php</p>
<pre class="prettyprint"><code class="language-html">
<?php
namespace Phppot; use Phppot\DataSource;
require_once __DIR__ . '/DataSource.php';
$conn = new DataSource();
$query = "SELECT * FROM tbl_menu";
$result = $conn->select($query);
?>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<style>
.container { height: 1000px;
}
</style>
<body> <nav class="navbar navbar-expand-lg sticky-top navbar-dark bg-dark"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarTogglerDemo03"> <ul class="navbar-nav mr-auto mt-2 mt-lg-0"> <?php foreach ($result as $key => $val){?> <li class="nav-item active"><a class="nav-link" href="#"><?php echo $result[$key]["responsive_name"];?> </li> </a><?php }?> </ul> <form class="form-inline my-2 my-lg-0"> <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> </form> </div> </nav> <div class="container"> <div class="row"> <div class="col-12 py-4"> <h1>Page scroll content</h1> Dolor sit amet, consectetur adipiscing elit. </div> </div> </div>
</body>
</html> </code></pre>
<h2>Database script</h2>
<p>Import this database script to display a dynamic Bootstrap sticky navbar. It contains menu items and the parent-child relationship data.</p>
<p class="code-heading">database.sql</p>
<pre class="prettyprint"><code class="language-html">
CREATE TABLE `tbl_menu` ( `id` int(11) NOT NULL, `menu_name` text NOT NULL, `parent` varchar(255) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4; --
-- Dumping data for table `tbl_menu`
-- INSERT INTO `tbl_menu` (`id`, `menu_name`, `parent`) VALUES
(1, 'Site logo', '0'),
(2, 'Home', '0'),
(3, 'Contact', '0'),
(4, 'About', '0'),
(5, 'Services', '0'),
(8, 'Map integration', '5'),
(9, 'Chart generation', '5'),
(10, 'Report generation', '5'),
(11, 'Projects', '0'),
(12, 'Chat plugin', '11'),
(13, 'Form builder', '11'),
(14, 'What\'s new', '0'); --
-- Indexes for table `tbl_menu`
--
ALTER TABLE `tbl_menu` ADD PRIMARY KEY (`id`); ALTER TABLE `tbl_menu` MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=15; </code></pre>
<h2>Bootstrap sticky navbar output</h2>
<p><img loading="lazy" class="alignnone size-large wp-image-15934" src="https://phppot.com/wp-content/uploads/2021/12/bootstrap-sticky-navbar-550x266.jpg" alt="bootstrap sticky navbar" width="550" height="266" srcset="https://phppot.com/wp-content/uploads/2021/12/bootstrap-sticky-navbar-550x266.jpg 550w, https://phppot.com/wp-content/uploads/20...00x145.jpg 300w, https://phppot.com/wp-content/uploads/20...navbar.jpg 602w" sizes="(max-width: 550px) 100vw, 550px"></p>
<p><img loading="lazy" class="alignnone size-full wp-image-15935" src="https://phppot.com/wp-content/uploads/2021/12/responsive-sticky-navbar.jpg" alt="responsive sticky navbar" width="477" height="749" srcset="https://phppot.com/wp-content/uploads/2021/12/responsive-sticky-navbar.jpg 477w, https://phppot.com/wp-content/uploads/20...91x300.jpg 191w" sizes="(max-width: 477px) 100vw, 477px"><br /><a class="download" href="https://phppot.com/downloads/bootstrap-sticky-navbar.zip">Download</a></p>
<p> <!-- #comments --> </p>
<div class="related-articles">
<h2>Popular Articles</h2>
</p></div>
<p> <a href="https://phppot.com/bootstrap/bootstrap-sticky-navbar/#top" class="top">↑ Back to Top</a> </p>
</div>
https://www.sickgaming.net/blog/2022/01/...avascript/