Tips for locking the button in the navigation bar while scrolling

I noticed that when I have 6 fields in my navbar, with 5 of them being links and one as a dropdown, the scrolling of the page causes all fields to remain fixed except for the dropdown field.Check out this image description for reference

https://i.stack.imgur.com/LnT9R.png

Here is the code snippet:

<div class="collapse navbar-collapse" id="Food-fair-toggle">
  <ul class="nav navbar-nav navbar-right">
    <li><a href="#about">about</a></li>
    <li><a href="#pricing">menu</a></li>
    <li><a href="#featured-dish">featured</a></li>
    <li><a href="#reserve">reservation</a></li>
    <li><a href="#contact">contact</a></li>
    <li>
      <div class="dropdown">
        <button class="dropbtn">Dropdown</button>
        <div class="dropdown-content">
          <a href="https://deliveroo.nl/">Deliveroo</a>
          <a href="https://www.foodora.nl/">Foodora</a>
          <a href="https://www.ubereats.com//">UberEats</a>
        </div>
      </div>
    </li>
  </ul>
</div>
<!-- /.navbar-collapse -->

javascriptcsshtmlbootstrap-4

Answer №1

Try testing out the menu bar below and explore its dropdown menus.

Answer №2

Feel free to experiment with the following HTML, JS, and CSS code snippets. Alter the structure by creating a separate section for the dropdown using the same class. Don't forget to assign an id attribute to the menu UL.

HTML:

<div class="collapse navbar-collapse" id="Food-fair-toggle">
  <ul class="nav navbar-nav navbar-right" id="myHeader">
    <li><a href="#about">about</a></li>
    <li><a href="#pricing">menu</a></li>
    <li><a href="#featured-dish">featured</a></li>
    <li><a href="#reserve">reservation</a></li>
    <li><a href="#contact">contact</a></li>    
  </ul>
  <ul class="nav navbar-nav navbar-right">
   <li>
      <div class="dropdown">
        <button class="dropbtn">Dropdown</button>
        <div class="dropdown-content">
          <a href="https://deliveroo.nl/">Deliveroo</a>
          <a href="https://www.foodora.nl/">Foodora</a>
          <a href="https://www.ubereats.com//">UberEats</a>
        </div>
      </div>
   </li>
  </ul>
</div>

JS:

Simply place the provided JS code in the footer section of your website.

<script>
    window.onscroll = function() {myFunction()};

    var header = document.getElementById("myHeader");
    var sticky = header.offsetTop;

    function myFunction() {
      if (window.pageYOffset > sticky) {
        header.classList.add("sticky");
      } else {
        header.classList.remove("sticky");
      }
    }
</script>

CSS:

ul.sticky {
    position: fixed !important;
    background: #27752A;
}

Answer №3

Learn how to implement a dropdown menu in the Bootstrap-4 navbar with the example provided below.

To make the navbar stay fixed at the top of the page, simply add class='fixed-top' to the <nav> element. This will ensure that the menu remains visible even when you scroll down.

If you prefer not to have the navbar menu fixed at the top, you can remove the fixed-top class from the navbar.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>

<nav class="bg-success navbar navbar-dark navbar-expand-sm">
  

  <!-- Links -->
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#about">ABOUT</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#pricing">MENU</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#featured-dish">FEATURED</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#reserve">RESERVATION</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#contact">CONTACT</a>
    </li>

    <!-- Dropdown -->
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
        DROPDOWN
      </a>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="https://deliveroo.nl/">Deliveroo</a>
          <a class="dropdown-item" href="https://www.foodora.nl/">Foodora</a>
          <a class="dropdown-item" href="https://www.ubereats.com//">UberEats</a>
      </div>
    </li>
  </ul>
</nav>
<br>
  
<div class="container">
  <h3>Navbar With Dropdown</h3>
  <p>This example adds a dropdown menu in the fixed navbar on Top,This example adds a dropdown menu in the fixed navbar on Top, This example adds a dropdown menu in the fixed navbar on Top, This example adds a dropdown menu in the fixed navbar on Top, This example adds a dropdown menu in the fixed navbar on Top.</p>
</div>

</body>
</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

"Interactive feature allowing database updates on a web page without the need for a page

I have a like button that contains an ID pulled from a database. My goal is to click the like button, update the database, and then switch it to unlike without having to reload the page. Below is the code for clarity: **index.php: ** <script type=&quo ...

phphtmlajax

How to customize the active color of the navigation pills in Bootstrap 4

I want to customize the background color of each pill, but I also want a faded version of that custom color with an active color matching the full color of the corresponding pill. pill one > faded red pill two > faded blue pill three > faded black When ...

cssbootstrap-4

The Javascript slider fails to function properly when utilizing AJAX to load the page

I have encountered an issue while trying to open an HTML page using ajax when a button is clicked. The HTML page that I am opening contains a JavaScript slider that functions properly when opened individually, but stops working if opened through my index. ...

javascriptajaxmootoolsslider

Equal-height columns in a responsive grid system

I'm currently facing an issue with a layout that seems simple I am working on a design featuring 4 headline boxes. In the "desktop" view, all 4 boxes need to be of equal height. The same applies when viewed across 2 boxes in the "tablet" mode. Howeve ...

cssresponsive-designgrid-layout

Insert HTML content into an iframe with a callback function

We are receiving information from the backend server and need to transfer it to an iframe. In order to accurately set the height of the iframe to match the content, we must wait for the content to be loaded into the iframe. However, this process may not ha ...

javascripthtmliframecallback

What is the method for turning off Bootstrap for viewport width below a specific threshold?

I'm currently utilizing bootstrap for my website design. However, there's a particular CSS rule causing some frustration on one specific page: @media (min-width: 576px) .col-sm-4 { -ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-w ...

htmlcsstwitter-bootstrap

Is there a way to remove a certain child category post from appearing in a parent category?

I'm having trouble with displaying related posts by category while excluding a specific category. I've tried different methods but none seem to work, and I'm not sure how else to approach this issue. <?php $categories = get_the_terms ...

javascriptphpjquerywordpress

Mastering the art of looping through JSON values using AngularJS ng-repeat

Is there a way to use ng-repeat in order to iterate and access the name values: test01, test02, and test03 from my JSON data? Any guidance on how to achieve this using ng-repeat would be greatly appreciated. Thanks in advance! Check out this Fiddle link. ...

javascriptangularjsjsonangularjs-ng-repeat

Customizing Text Placement in HTML Lists with CSS List-Style-Image

Is there a way to adjust the vertical positioning of the "Blahs" in the list so that they appear closer to the center of each list bullet in the image displayed on my HTML code below? Here is the snippet of code: <html> <style> li { margin-to ...

htmlcssimagelistposition

Tips on modifying the content of a Material UI Card

I have a Material UI card displaying some details, along with an 'Edit' button. When the Edit button is clicked, I want to update the content of the card within the same layout. Below is the code snippet: <Card className={classes.root} variant ...

javascriptreactjsmaterial-ui

Is your Node.js asynchronous parallel function not performing as expected?

I have a series of promises that I need to execute sequentially, but it's getting messy with all the promise returns. To simplify this process, I decided to use the async library and tried out the parallel method. However, instead of running one after ...

javascriptnode.jsasynchronouspromise

Tips for concealing broken images in jQuery/JavaScript when generating dynamic content

Is there a way to hide the broken images in this dynamically generated HTML code using JavaScript? Unfortunately, I don't have access to the source code itself. I'm new to JQuery and could really use some assistance. Below is the snippet of the ...

javascriptjqueryhtmlcssimage

Tips for implementing filters in Angular2 without using the package field in the console

I am currently experiencing an issue with a filter field in my code. The filter works fine when all the package data is present, however, some items do not have a package field. As a result, I need to filter based on the package name but I am encountering ...

javascriptangulartypescriptfilter

Error Encountered: Unexpected Identifier in Angular 7 External jQuery Plugin

Struggling to convert a jQuery template to Angular7, I'm facing an issue with loading .js files from the assets folder in the original template to make it functional. Upon starting the application with: ng serve, I encounter the following error in th ...

javascriptjqueryangularwebpacktsconfig

Is there a way to serialize a dynamically loaded element with jQuery?

So here's the situation: I have a list of tags that needs to be updated using an ajax call. First, I clear out the <ul> that holds the tags. Then, with the response from the ajax call, I populate the <ul> with new <li> elements re ...

javascriptjqueryjquery-selectors

Getting the click event object data from a dynamically created button with jQuery or JavaScript

I have a task of tracking page button click events. Typically, I track the objects from statically created DOM elements using: $('input[type=button]').each(function () { $(this).bind('click', function () { ...

javascriptjqueryjquery-events

Hover over buttons for a Netflix-style effect

https://i.stack.imgur.com/7SxaL.gif Is there a way to create a hover effect similar to the one shown in the gif? Currently, I am able to zoom it on hover but how can I also incorporate buttons and other details when hovering over it? This is what I have ...

javascripthtmlcssreactjs

Interacting with a third-party application via OAuth using Node server to send REST requests

https://i.stack.imgur.com/Znrp0.png I've been working on a server to manage chat messages and need to integrate with a JIRA instance. I'm currently using the passport-atlassian-oauth strategy for authentication and BearerStrategy for requests. H ...

javascriptnode.jsexpressoauth

The PrimeNG FullCalendar feature seems to be malfunctioning and cannot be located

I've been working on integrating a FullCalendar module into my Angular 7 project. Despite following the steps provided in this link, I haven't had any luck: After executing this command: npm install <a href="/cdn-cgi/l/email-protection" clas ...

javascriptangularfullcalendarprimeng

Encountering issue with Django locating static file (1.5) showing ERROR 404 code 1649

I'm facing some difficulties in setting up my local Django site. I've reviewed the previous questions and answers, but haven't been able to find a solution. [20/Oct/2013 03:56:33] "GET /rides/ HTTP/1.1" 200 230 [20/Oct/2013 03:56:33] "GET / ...

pythoncssdjangoweb-applications