Navigate a Bootstrap 4 drop-down menu by scrolling rather than having it drop down

I recently designed a Navbar with dropdown menus, but I have encountered an issue where the dropdown menus do not overlay the content as intended. Instead, they create a scroll-down menu and display the contents within it. I would appreciate it if someone could provide an explanation for this behavior.

Here is the current code snippet:

$(".side-toggler").click(function(){
if ($('.hide_menu')[0]) {
    $(".sidebar").removeClass("hide_menu");
    
} else {
  $(".sidebar").addClass("hide_menu");
  
}

});
html , body, a{
color: #ffffff;
font-family: 'Source Sans Pro', sans-serif;
}

.top-header{
background: #3c8dbc;
}
.navbar{
padding: 0px;
}

... (rest of the CSS code omitted for brevity)


... (CDN links and HTML header content omitted for brevity)

jquerycsshtmlbootstrap-4

Answer №1

Make sure to enclose your navigation list items within a div that has the class collapse navbar-collapse.

For a functional Bootstrap 4 navbar, refer to this example:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</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 <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</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>

For further information, visit:

https://getbootstrap.com/docs/4.0/components/navbar/

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

Data Visualization from Database

I'm facing some issues while trying to implement a database chart. Here's what I have: My database consists of 2 rows: Date and Pcr Here's my PHP files: Data.php $query = "SELECT * FROM `table1` ORDER BY Date LIMIT 0 , 100"; $result ...

phpjquerymysqlajaxchart.js

Injecting CSS styles into a webpage using a Chrome extension before the page has completely loaded to achieve instant customization

As a newcomer to creating Chrome (or other browser) extensions, I am working on developing one that applies custom CSS rules to specific page elements. Overall, it seems to be functioning as intended, but with some minor issues. One issue I have encounter ...

javascripthtmlcssbrowsergoogle-chrome-extension

Adjust the size of an element in response to changes in the size of

I've implemented a jQuery function to resize an element dynamically based on window size changes: $(window).resize(function() { topHeight = $("#top").height(); height = $(window).height() - 210; $("#container").height(height); $("#g").height( ...

javascriptjquerycsshtml

Getting checkboxes from an HTML form in Django: A comprehensive guide

I am trying to create a form that displays checkboxes for each item in a list. Here is the structure of my form: <form action="/test"> <ul style="font-size:30px"> {% for d in Dlist %} <li type="none"><input typ ...

pythondjangohtmlformsdjango-forms

Tips for adjusting the white dashed line to align with the height of the image and text

UPDATE: It seems that the length is determined by the .main div being the parent element and sizing accordingly. Unsure how to make adjustments... How can I reduce the dashed line to be the same height as the text? Here's a link to the Fiddle: http: ...

htmlcss

What is preventing NgClass from applying the CSS styles?

I'm currently facing an issue in Angular2 where I am trying to apply different styles using ngClass within an 'NgFor' loop, but for some reason, it's not working as expected. Apologies for any language errors. <div class='line ...

cssangular

I attempted to access $.cookie but it appears to be malfunctioning

I found cookie.js on GitHub at https://github.com/carhartl/jquery-cookie and incorporated it into my code like this: $(document).ready(function(){ $("#abc").click(function() { var a = $("#text").val(); var b = $("#password").val(); alert("asdasdsd ...

jquery

Utilizing AJAX and jQuery to dynamically load a div instantly, followed by automatic refreshing at set intervals

I am utilizing jQuery and AJAX to refresh a few divs every X seconds. I am interested in finding out how to load these divs immediately upon the page loading for the first time, and then waiting (for example, 30 seconds) before each subsequent refresh. I h ...

javascriptphpjqueryajax

What is the best way to enclose a bootstrap row within a clickable link generated by the twitch.tv API?

Recently, I completed a JSON/JavaScript project for Free Code Camp that retrieves streamer information like their logo, current status, and display name. My goal is to enclose entire Bootstrap 3 rows in hyperlinks linked to the streamers' pages, elim ...

javascriptjqueryjsontwitter-bootstrap-3

Best placement for <img> tag in HTML for creating a background image using CSS (excluding CSS3)

I am currently working on a programming project called Broadway through Codeacademy. I have been given the task of adding a background image to the webpage. It seems like an easy task to accomplish. The simplest way to achieve this effect is by using the f ...

htmlcsstwitter-bootstrap

Incorporate Thymeleaf's HTML using the powerful JavaScript framework, jQuery

I am facing an issue where the Thymeleaf rendered HTML code is not being displayed by the Browser when I try to insert it using JavaScript. $('<span [[$ th:text#{some.property.key}]] id="counter" class="UI-modern"> </ ...

javascripthtmljquerythymeleaf

Mobile devices not showing the Navbar bootstrap menu

My header.php works perfectly on desktop, but the navigation bar is not displaying properly on mobile devices. Here is my code: <!DOCTYPE html> <html> <head> <title>International Pvt. Ltd.</title> <meta name="viewpo ...

phpcsstwitter-bootstrap-3menunav

Incorporating Social Share Buttons to Enhance User Engagement on Your WordPress E

Looking to enhance my product page by adding social icons right below the 'Add to Cart' button. The product page URL is https://flowersforeveryone.co.za/product/cheerful-orange-tulips/. I already have a 'social menu' set up. How can I ...

phpcsswordpresswoocommerce

What is the best approach to execute the jquery script exclusively on mobile devices?

I want to modify this code so that it only functions on mobile devices and is disabled on computers. How can I achieve this? <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <ul id="pri ...

javascriptjqueryhtmlcss

Show data based on the chosen destination

Recently, I've been working on creating a simple printer manager to monitor the status of all my printers. Although I have successfully displayed all the data, I'm facing an issue while trying to organize it by location. The error message I keep ...

javascripthtmlasp.netangulartypescript

An unanticipated SyntaxError was encountered while attempting to utilize an Ajax post, specifically in relation

I can't seem to figure out how to troubleshoot an ajax/jquery error. Here is the function I'm working with: var LogIn = { Email: $("#Name").val(), MobileNo: $("#txtMobileNumber").val(), PinCode: '', ...

javascriptjqueryajax

Issue with Bootstrap spinner not functioning properly within a table featuring a sticky header

In the Razor Page app I'm working on, the index page features a table with a sticky header and a spinner in one of the columns. However, when the table is scrolled vertically, the text in the column goes under the sticky header, while the spinner rema ...

htmlbootstrap-5

I'm struggling to understand why the background-color is affecting the margins as well

Check out this code snippet: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title></title> <style type="text/css"> * {border: 0px; padding: 0px;} ...

cssmarginbackground-color

Is it possible to resize an image to fit within its parent div using only the parent div

Is there a way to ensure that an image inside a div resizes itself based on the dimensions of the div without distorting the ratio? <div class="w-50"> <img src="" class="w-full h-full image-cover"> </div> ...

htmlcsstailwind-css

Using CSS min-height: 100vh will ensure that the container has enough height to fill the entire viewport

Utilizing min-height: 100vh; in my inner call to action div placed on top of a background video has been mostly successful. However, I've encountered an issue where using 100vh with the absolutely positioned video seems to introduce an unwanted margin ...

htmlcssruby-on-railsbootstrap-4