How come my vertical navigation keeps getting hidden underneath other elements?

My vertical navigation seems to be hidden behind other elements like the h1 heading and post image in this code. When I toggle the navigation, it hides behind the rest of the elements and does not work properly. How can I solve this issue? Please run the code snippets

/* CSS code for Nav Primary */
#nav-primary {
    /* Styles for nav */
}

@media only screen and (max-width: 720px) {
    /* Responsive styles for nav */
}

/* CSS code for Latest Posts section */
.blog-post {
    /* Styles for blog posts */
}

@media only screen and (max-width: 720px) {
    /* Responsive styles for blog posts */
}
<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
  <title>Swan - Bootstrap Blog Template</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="css/style.css">
</head>
<body>

<header>
    <!-- Navigation Bar -->
</header>

<main>
    <!-- Blog Entries and Sidebar -->
</main>

<footer>
    <!-- Footer content -->
</footer>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.4.4/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="js/script.js"></script>
</body>

I have been struggling with fixing the issue in my CSS code, but unable to identify the mistake. Despite numerous attempts to resolve it, the problem persists. Your assistance in solving this would be greatly appreciated.

Answer №1

By adjusting the z-index of your dropdown menu, you can ensure that it appears in front of elements with a lower z-index value.

#navbar-1 {
  z-index: 100;
  background-color: #007DBD;
  margin-top: 5px;
  border-radius: 3px;
}

Answer №2

Ensure that the z-index property is added to the element. Elements img and h1 do not have the properties position and z-index, so a smaller z-index should be used.

.navbar-collapse{
    z-index:10;
 }

/* <================= Nav Primary =================> */
#nav-primary {
    background-color: #007DBD;
    height: 45px;
}

#nav-primary a.navbar-brand {
    color: #ffffff;
}

#nav-primary a.nav-link {
    color: #ffffff;
    font-weight: 500;
    padding-left: 0;
    padding-right: 0;
    padding-top: 9px;
    margin-left: 25px;
}

#nav-primary #item-list a.nav-link:hover {
    border-bottom: 2px solid #ffffff;
    padding-bottom: 7px;
}

#nav-primary .btn-outline {
    color: #ffffff;
    border-color: #ffffff;
    font-weight: 500;
    padding: 3px 5px;
    background-color: #007DBD;

}

#nav-primary .btn-outline:hover {
    background-color: #ffffff;
    border-color: #ffffff;
    color: #007DBD;
    font-weight: 600;
}

#nav-primary button.navbar-toggler {
    color: #ffffff;
}

#nav-primary button.navbar-toggler:focus {
    outline: none;
}

#nav-primary .avatar img {
    border: 2px solid #ffffff;
    border-style: dotted;
}

#nav-primary .dropdown-menu {
    min-width: 100px;
    left: -30px;
}

#nav-primary .dropdown-menu a {
    text-decoration: none;
    color: #007DBD;
}

...

@media only screen and (max-width: 720px) {
        .navbar-collapse{
            z-index:10;
        }
        ...
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8>
  ...

  <!-- JS Framworks and Libraries -->
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.4.4/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

  <!-- Custom JavaScript -->
  <script src="js/script.js"></script>

</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

Level of importance menu dropdown style

While developing the interface, I encountered z-index complications with the menu and submenu. The main menu should be positioned above, while the submenus should be below. Unfortunately, in the 'Electronics' section, the submenu items are overla ...

Is there a method in CSS Grids to wrap the implicit grid while employing grid-auto-flow: column?

How can I achieve a layout consisting of two 4x2 grids that flow into each other, instead of being positioned side by side? Essentially, I want to split an 8x2 grid into two halves and stack them vertically. Is there a way to make the layout wrap around it ...

The challenge of using CSS Flexbox to position the logo with a margin-top

While learning flexbox, I encountered a challenge. I aim to center align h1, p, and button elements, with the logo positioned at the top margin-top of 1em. Essentially, I want the h1, p, and button to be centered, while the logo is positioned at the top wi ...

Is it possible to find a more effective method to align the video directly beneath the text using HTML/CSS?

Hello there! I'm diving into the world of HTML/CSS and Stack Overflow, so bear with me if I make any mistakes. My current aim: I've managed to set up a video background for my HTML website. And now, I'm exploring how to place a second video ...

Blending the widths of native elements with those of Bootstrap columns

Having trouble aligning spans in a Bootstrap 3 form to degrade into a stack on mobile: From [station1] to [station2] at [time] From [station1] to [station2] at [time] While this code works to an extent: <div class="row"> <div class="col ...

scrolling smoothly to a specific div on another webpage

Incorporating a smooth scrolling feature on my website's menu bar has been quite challenging. Specifically, I want the page to redirect to another HTML page and smoothly scroll to a specific div when a sub-item is clicked. To achieve smooth scrolling ...

Nested navigation in Bootstrap

I am currently working on creating a multilevel menu using Twitter Bootstrap. Check out the code here Below is the snippet of HTML code: <!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> ...

What is the best way to retrieve the first item in owl carousel's content?

I need help creating a slider with two sections: top and bottom. My goal is to display the content from the bottom slider on the top slider. I tried adding a class to the first item element, but it didn't work. If anyone knows how to target the first ...

The Continued Saga of IE8 Positioning Woes

Managing a social network for the cystic fibrosis community has been a rewarding experience. One particular section allows users to leave comments and engage in discussions. While the implementation using html, css, and jQuery has been seamless on Firefox, ...

AngularJS function for comparing operators

Just starting out with AngularJS and I've been given a small task to solve by my employer. Having some trouble with it, so hoping someone can lend a hand. The task involves using comparison operators in ng-options along with a number field to filter ...

Mastering the art of building a datepicker: A comprehensive guide

Looking for advice on how to create a datepicker in HTML without relying on bootstrap or pre-built JavaScript and CSS. I am interested in learning the process from the ground up and understanding how developers have designed these tools. I am specifically ...

Is there a way to verify if an element has a focused child element using JavaScript?

Currently, I am in the process of eliminating all jQuery from my codebase. In the past, I have been using the following snippet: if ($(selector).find(':focus').length === 0) { // focus is outside of my element } else { // focus is inside ...

Display Checkbox Selections in a Popup Message Box

I've run into a problem while working on an assignment. My goal is to show the checkbox values for toppings in the alert box popup upon submission. However, only the text box and radio values are displaying, while the checkbox returns as blank. Any ...

Tips for using JavaScript to set images from Flickr API as img src

I've been attempting to populate a table with images fetched from flickr. The array I'm using consists of urls like: ["https://www.flickr.com/photos/113081696@N07/24695273486", "https://www.flickr.com/photos/113081696@N07/24565358002", "https:// ...

The table refuses to load

I've been troubleshooting this issue for the past two days. The array is visible in the console, but it refuses to show up on the table. I've tried multiple approaches, but none seem to work. I suspect that "tobodyHtml" is not defined properly, a ...

Bind a function to the final element of each piece of changing content

I'm facing a challenge in associating a function with every nth element, just once for each element. The concept is to trigger an ajax call when the final element comes into view. I am utilizing a useful jquery plugin called inview. My list consists ...

CSS - Curved background image in the top left corner

Currently in the process of creating a website here. There is a postcode search div on the right side, and I am looking to round the top corner of it. I have decided to use images to achieve the rounded corners effect. My requirement is that any method us ...

When scrolling the page, the Circle Mouse Follow feature will dynamically move with your cursor

Hey everyone! I'm currently working on implementing a mouse follow effect, but I'm facing an issue where the circle I've created moves along with the page when scrolling, instead of staying fixed to the mouse. Any suggestions or tips would b ...

Multiple instances of the anchor tag are being inserted

Why is the anchor tag I specified in my code appearing multiple times when viewed in the browser? How can I fix this issue? <a href="{{ route('candidate.company.view', $company->id) }}" class="block no-overflow"> <div class="row ...

Struggling with extracting and transferring data from a span tag to another field within the same form using selenium and python

I am struggling with an issue while running a code using selenium in Python. I am trying to extract values from span tags and store them in variables named "cap1, cap2, and cap3." After saving these values, I need to input them into another field on a web ...