Is there an issue with the second bootstrap navbar overlapping a dropdown-menu from the first navbar?

My issue involves two fixed-top navbars, where the dropdown-menu from the first one is being overlapped by the second navbar. I've tried adjusting z-index, positioning, and overflow properties without success. I have also looked at similar questions but haven't found a solution yet. Any suggestions on what might be causing this problem?

For reference, you can view my code on FIDDLE

Here's an image demonstrating the problem (2nd navbar overlapping dropdown-menu):

https://i.sstatic.net/WR0d3.png

Here is an example of the code:

<!DOCTYPE html>
<html>
<head>
<meta>
<title>Navbar overlapping dropdown-menu</title>

<!-- Bootstrap 4 cdn's & jquery dependency -->
<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://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

</head>
<body>

    <!-- first navbar with dropdown-menu -->
    <nav class="navbar bg-dark fixed-top navbar-expand-sm">
      <div class="collapse navbar-collapse">
        <ul class="navbar-nav">
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown"> Dropdown </a>
            <div class="dropdown-menu">
              <a class="dropdown-item" href="#"> 1 </a>
                  <a class="dropdown-item" href="#"> 2 </a>
              <a class="dropdown-item" href="#"> 3 </a>
              <a class="dropdown-item" href="#"> 4 </a>
            </div>
          </li>
        </ul>
      </div>
    </nav>


    <!-- second navbar with top offset -->
    <nav class="navbar bg-primary fixed-top navbar-expand-sm" style="top:56px!important;">
    <p>hello world</p>
    </nav>

</body>
</html>
htmlcsstwitter-bootstrapbootstrap-4

Answer №1

Indeed, the issue here is related to z-index. To address this problem, try adjusting the styles to ensure that the second navbar appears lower on the z-index. It's crucial to make sure you also modify any sibling elements that may be causing the overlap. Modifying the .dropdown-menu alone won't have an impact since the root of the issue lies in the parent elements.

You can resolve this by implementing the following CSS:

.navbar {
  z-index: 90;
}

.navbar+.navbar {
  z-index: 80;
  top:56px;
}
<!DOCTYPE html>
<html>

<head>
  <meta>
  <title>Navbar overlapping dropdown-menu</title>

  <!-- Include Bootstrap 4 CDNs and jQuery dependency -->
  <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://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

</head>

<body>

  <!-- First navbar containing dropdown-menu -->
  <nav class="navbar bg-dark fixed-top navbar-expand-sm">
    <div class="collapse navbar-collapse">
      <ul class="navbar-nav">
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown"> Dropdown </a>
          <div class="dropdown-menu">
            <a class="dropdown-item" href="#"> 1 </a>
            <a class="dropdown-item" href="#"> 2 </a>
            <a class="dropdown-item" href="#"> 3 </a>
            <a class="dropdown-item" href="#"> 4 </a>
          </div>
        </li>
      </ul>
    </div>
  </nav>

  <!-- Second navbar offsetting from the top -->
  <nav class="navbar bg-primary fixed-top navbar-expand-sm">
    <p>hello world</p>
  </nav>

</body>

</html>

Answer №2

Implemented two new classes, .front and .back, along with z-index value adjustments.

Check out the revised code on JSFiddle

CSS:

.front{
 z-index: 2000 !important;
}
.back{
 z-index: -1 !important; 
}

HTML: 

<!-- first navbar with dropdown-menu -->
<nav class="navbar bg-dark fixed-top navbar-expand-sm front">
  <div class="collapse navbar-collapse">
    <ul class="navbar-nav">
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown"> Dropdown </a>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#"> 1 </a>
              <a class="dropdown-item" href="#"> 2 </a>
          <a class="dropdown-item" href="#"> 3 </a>
          <a class="dropdown-item" href="#"> 4 </a>
        </div>
      </li>
    </ul>
  </div>
</nav>

<!-- second navbar with top offset -->
<nav class="navbar bg-primary fixed-top navbar-expand-sm back" style="top:56px!important;">
<p>hello world</p>
</nav>

For more insights on z-index, visit this resource

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

Using the combination of z-index and visibility:hidden makes the button go completely undetect

Can someone please review this code? .parent { visibility: hidden; position: relative; z-index: 1; } .child { visibility: visible; } <button class="parent"> <span class="child">content</span> </button> I' ...

cssbuttonfirefoxz-index

Tips for minimizing excess white space in Shiny applications

Encountering an issue with plot output in Shiny. When using standard ggplots, the output is correct without any extra white margins. However, when utilizing the "ggmap" package (which also produces ggplot-type outputs), white margins suddenly appear. (Ple ...

cssrshiny

The function attached to the `click` event of `#cart-continue` is not invoking

I'm currently working on implementing a navigation to a specific anchor tag when the user clicks the continue button on the cart page. This project involves a mobile application built with Cordova, and the function call is done using jQuery. Here is ...

javascriptjqueryhtmlcordova

Challenges with the efficiency of hover effects

I have a div with a background image and inside that div, there is a component called Hero. I want to add a simple hover effect on a div with a className newBigButton. However, the transition is laggy when the background image is present. Here's the c ...

htmlcssreactjsnext.js

IE compatibility problem with the alignment of input group buttons and textboxes in Bootstrap v4

Encountering an issue with input group in IE while using bootstrap v4, working fine in Chrome. Specifically using IE 11 Here is my plunkr: input group bootstrap v4 Chrome display: https://i.sstatic.net/yXtEW.png IE display: https://i.sstatic.net/WiRz ...

csstwitter-bootstrapbootstrap-4

What is the typical output value that fluctuates?

I only have one input to work with. My goal is to set the input value to "5", then display "3" in the "total" field and "4" in the "total2" field. Additionally, for every increment of +1 to the input value, I want the "total" and "total2" fields to also in ...

javascripthtml

I encountered an AJAX error while working on my project

Encountering an error with my login_process.php when using ajax, preventing me from progressing. All files are stored in a single folder. Upon running the HTML log-in page, the error becomes visible. Below is the code snippet, quite straightforward. Previo ...

phphtmlajax

Utilizing Z-Index placement in CreateJS

I'm struggling to adjust the z-index for my line Graphic(). My goal is to ensure that the line always appears behind the other two shapes. Based on my understanding, the first element added has a z-index of 0, the second one has a z-index of 1, and s ...

htmlcanvaseaseljscreatejs

Unable to render canvas element

Hey guys, I'm trying to display a red ball on the frame using this function but it's not working. I watched a tutorial and followed the steps exactly, but I can't seem to figure out what's wrong. Can someone please help me with this? I ...

javascripthtmlcanvas

Retrieve the chosen option from a dropdown menu and transfer it to the submit button in PHP

I have a unique situation where I need to extract and store selected values from two separate drop-down menus generated from arrays. The goal is to pass these selected values in the submit button link. For example, if a user selects "123" for email and "t ...

javascriptphphtmljquery

"Discover the power of D3.JS with three dazzling charts on a single page, plus a host of additional

As a student, I struggle with English and it makes me feel sorry and anxious... Despite that, I want to create three scatter plot charts on the same page using a single data file (csv). The dataset includes columns for Name, Height, Weight, and Grade (ra ...

javascripthtmlcssd3.js

Expanding Anchors to Fit Content with FontAwesome Icons

I am attempting to include two clickable icons on the right side of a list item, but the anchors containing the icons seem to be expanding too wide without any padding or margins, causing their clickable zones to overlap. Could this be an issue with the f ...

htmlcssfont-awesomebootstrap-4

Respond to adjustments in iframe height

I am currently working on a page with an embedded iframe. The height of the iframe may change dynamically while on the page. I am wondering if there is a way to adjust the height of the iframe based on its content. Even after trying to set the height at ...

javascripthtmlcssiframe

Implementing dual backgrounds in CSS

I am trying to achieve a gradient background for li elements along with different image backgrounds for each individual li. Is there a way to accomplish this? List of items: <div id="right_navigation_container"> <ul> <li id ...

htmlcss

Experience seamless video playback on both mobile and web browsers with JW Player

I have integrated the JW Player for video playback on both mobile and web browsers. Currently, I have a library of 100 videos with dimensions set at 1280*700 pixels. These videos work well on web browsers and load quickly depending on internet speed. Howe ...

jqueryhtmlflashjwplayer

jQuery - delete a single word that is case-sensitive

Is there a way to eliminate a specific case-sensitive word from a fully loaded webpage? The word in question is "Posts" and it appears within a div called #pd_top_rated_holder that is generated by Javascript. The Javascript code is sourced externally, so ...

javascriptjquerycss

Is there a way to achieve a flex layout without having to modify the HTML structure?

I am working on achieving a specific layout using CSS: https://i.stack.imgur.com/xg7ZA.png This is the HTML structure I have and it cannot be altered, along with what I have managed to add with CSS. It's almost there but missing something: .conta ...

htmlcssflexbox

I'm looking for assistance on programmatically adding or modifying the user-agent header in a Chrome browser using Selenium WebDriver. Can anyone help

Seeking assistance on programmatically adding or modifying the user-agent header for Chrome browser using Selenium WebDriver. File addonpath = new File("D:\\innpjfdalfhpcoinfnehdnbkglpmogdi_20452.crx"); ChromeOptions chrome = new ChromeOptions( ...

javajavascripthtmlseleniumtestng

Refresh an AngularJS table built with Bootstrap to display live data in real-time through the use of ng-repeat

Utilizing a bootstrap table with ng-repeat to populate data, yet encountering issues updating and displaying the table. A custom directive has been created for drag and drop functionality in AngularJS. When a file is dragged and dropped, the information i ...

javascriptjsonangularjstwitter-bootstrapngtable

Assign a distinct color to each character of the Russian alphabet within a specified text using CSS and/or JavaScript

My experiment involves testing the concept of "induced synesthesia" by assigning different colors to individual characters in text. I plan to map each character in the Russian alphabet to a specific color, for example, A is red, B is blue, and so on, resul ...

javascripthtmlcss