The navigation bar vanishes as soon as I click the Modal button

I am experiencing an issue where the Navbar disappears when I open a modal while using Bootstrap.

Navbar before opening Modal

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

Navbar after opening Modal

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

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d5b7babaa1a6a1a7b4a595e0fbe4fbe6">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c5a7aaaab1b6b1b7a4b585f0ebf4ebf6">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>

<nav class="navbar navbar-dark bg-dark nav-custom">
  <div class="container-fluid">
    <a class="navbar-brand p-3 m-0 h1" href="index.html">
      < Back</a>
  </div>


  <!- Button trigger modal ->;
  <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
                        Launch demo modal
                    </button>

  <!- Modal ->;
  <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-fullscreen-lg-down">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          ...
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div>

Answer №1

After deleting the fade class from the parent container, everything is functioning perfectly https://i.stack.imgur.com/RdGhw.png

<div class="popup" id="exampleModal" tabindex="1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="popup-box popup-fullscreen-lg-down">
      <div class="popup-content">
        <div class="popup-header">
          <h4 class="modal-title" id="exampleModalLabel">Popup Title</h4>
          <button type="button" class="close-btn" data-bs-dismiss="popup" aria-label="Exit"></button>
        </div>
        <div class="popup-body">
          ...
        </div>
        <div class="popup-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="popup">Close</button>
          <button type="button" class="btn btn-primary">Save Changes</button>
        </div>
      </div>
    </div>
  </div>


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

Steps for adding a stroke to just the left and right sides of an SVG wave:

How do I apply a stroke only to the right and left sides of an SVG (specifically a wave SVG)? <svg class="defs-only" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <symbol id="wave"> <svg viewBox="0 0 100 50" ...

What is the best way to eliminate the blue outline around an image map?

On the landing page, I have a static background image and I've set up a clickable area using an image map. The issue is that when users click on the area, a blue border appears (see image below). I've tried several methods to remove this border b ...

Attempting to create a login and registration form

Hello, I am attempting to create a form that can generate new user accounts and passwords. These values should be stored from the input tag when the user clicks on the register button. Unfortunately, I am encountering an issue where clicking the register ...

Display a new div with its content every 5th item

I am currently working with a Smarty template that contains the following code output: Check out my other question on Stackoverflow My problem lies in the fact that the provided code does not repeat the inserted HTML after every 5 elements... Could some ...

Tips for showcasing a complete background image in a div even if the content inside is minimal

Check out the header image on ink.talentosoft.com if you get a chance. The height of the header image is precisely 388 px. I am looking to have the background of this div fully displayed. Currently, the setup for the div looks like this: background: url ...

How can we reduce the use of !important in SCSS when working with React and Material UI?

In my current project, I am developing a Select component in React with Material UI. The CSS styling for the component is managed through an external SCSS sheet imported into the script file. While working on restyling the component, I found it challengin ...

Tips for returning an element to its starting position following animation

Hey there, I’m fairly new to the world of HTML and CSS. Recently, I was working on creating a YouTube clone website and I’ve run into an issue with the navigation. On the official YouTube website, when you click on the hamburger menu icon, the naviga ...

The Python socket fails to receive a valid response after sending an HTTP 1.1 CONNECT request

I am attempting to create a simple program that establishes an https tunnel with www.google.com on port 443. Initially, I used the code below: import socket def main(): s = socket.socket(socket.AF_INET, socket.SOCK_STREAM) s.connect(("www.google. ...

Issues arise when a questionnaire is duplicated

Currently, I am working on a questionnaire that involves the cloning feature in jQuery using .clone(). The questions are answered using checkboxes with options for yes or no. These checkboxes are placed within a table and controlled by the following script ...

Tips for expanding the width of an image when employing position:relative

Below is the code snippet: <table border="1" cellpadding="2" cellspacing="2" height="250"> <tbody> <tr> <td> <div style="background: url('path to image'); width: 300px; height: 250px; position: ...

Ways to eliminate the leading bullet point from an unordered list

I am currently working on creating a gallery of images using php and css. The images are placed in an unordered list as shown below: <ul style="list-style-type:none;"> <? while($data=mysql_fetch_row($result)) { $pic=$data[2]; if ($pic) { $ ...

Reposition div when clicked

I have encountered a challenge where I am unable to perform a small task. My goal is to have the position of "div1" change upon clicking on "div2", taking into account that "div2" is nested inside "div1". Additionally, when clicking on "div2" again, "div1" ...

What is the best way to align a series of divs vertically within columns?

Struggling to find the right words to ask this question has made it difficult for me to locate relevant search results. However, I believe a picture is worth a thousand words so...https://i.stack.imgur.com/LfPMO.png I am looking to create multiple columns ...

What is the reason for the index.html file not connecting to the local .css files and .js file?

I'm currently using node.js to send an .html file that includes the following tags: <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="description" content="This is my personal profile website" /> <link r ...

The POST Method encountering issues within the <code> tag

<form name="submit_form" action="./uploads/submit.inc.php" method="POST"> <div class="wrapper"> <code id="ace-editorid" name="code_editor">Input Your Code Here</code> </div> <script sr ...

When I zoom in, a different div replaces the original div

I have recently delved into the world of HTML and CSS as I embarked on creating my own website. However, I seem to have hit a snag - when I zoom in on the content, it overlaps with the menu. I have scoured the internet for a solution to no avail, so any as ...

Browsing through dual snap points simultaneously on Google Chrome

I'm currently developing a website that incorporates scroll snapping for 3 viewport-sized <section> elements set up like so: html, body { scroll-behavior: smooth; scroll-snap-type: mandatory; scroll-snap-points-y: repeat(100vh); scrol ...

Firefox is having trouble keeping <select> tags within their designated borders

I am currently developing a mobile app that requires the use of 3 <select> elements stacked on top of each other. It is crucial for these tags to align perfectly with each other and not extend beyond the boundaries of the background div. I have manag ...

Align bootstrap button to the center on xs screens

I've spent countless hours on this issue - I just can't seem to get the button centered properly in xs mode. It keeps aligning itself based on the left side, no matter what I try. I've searched through Bootstrap but couldn't find a clea ...

Can you explain the purpose of :not(style) ~ :not(style) in CSS?

Upon investigating, I found that Mui automatically included a :not(style) ~ :not(style) selector which required the use of !important in my sx to override. .css-1rb8ayf-MuiStack-root > :not(style) ~ :not(style) { margin-top: 40px; } .css-d13d9m-MuiSta ...