What is causing the section to cover the navbar?

My content is overlapping the navbar on certain screen sizes, and I'm not sure why. Any ideas on how to fix this issue? Would wrapping everything in a container help?

Currently using bootstrap v5.3.0-alpha1.

Additionally, when I have a collapsed navbar, the button becomes unclickable due to the overlapping sections. Any solutions for this?

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>test</title>

        <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f0929f9f848384829180b0c5dec3dec0dd919c" rel="nofollow">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
        <link rel="stylesheet" href="{{ url_for('static', filename='css/dashboard.css') }}" />
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c5a7aaaab1b6b1b7a4b5e8aca6aaabb685f4ebf4f5ebf6" rel="nofollow">[email protected]</a>/font/bootstrap-icons.css">
    </head>

    <body>
        <nav class="navbar bg-body-tertiary">
            <div class="container-fluid">
                <a class="navbar-brand" href="#">
                    <img src={{url_for('static', filename='/images/logo.png')}} id="logo" alt="Logo" width="50" height="50" class="d-inline-block align-text-top" style="border-radius: 5px;">
                </a>

                <div class="btn-toolbar align-items-center justify-content-center" role="toolbar" aria-label="Toolbar with button groups">
                    <div class="btn-group me-2" role="group" aria-label="sign in">
                        <div class="dropdown">
                            <!-- dropdown-toggle -->
                            <button class="btn btn-primary" id="connect_wallet_button" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                Sign In
                            </button>
                            <ul class="dropdown-menu dropdown-menu-end d-none" id="dropdown_menu">
                                <li><a class="dropdown-item" href="#" id="logout_button">Logout</a></li>
                            </ul>
                        </div>
                    </div>

                    <div class="btn-group me-2" role="group" aria-label="theme button">
                        <a href="/#">
                            <i class="bi bi-sun" id="theme_icon" style="font-size: 1.3rem;"></i>
                        </a>
                    </div>
                </div>
            </div>
        </nav>

        <div class="position-absolute top-50 start-50 translate-middle p-3">
            <div class="card">
                <div class="card-body">
                    <h3 class="card-title text-center">test form</h3>

                    <form class="needs-validation" id="form" action="/form" method="post">
                        <div class="mb-3">
                            <label for="name" class="form-label">test</label>
                            <input type="text" class="form-control" id="name" name="name" required>
                        </div>

                        <!-- more form elements here -->

                        <div class="d-none" id="form_button_group">
                            <button type="button" class="btn btn-secondary" id="clear_button">Clear</button>
                            <button type="submit" class="btn btn-primary" id="submit_button">Submit</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a6c4c9c9d2d5d2d4c7d6e693889588968bc7cad6cec797" rel="nofollow">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
        <script type="text/javascript" src="{{ url_for('static', filename='js/dashboard.js') }}"></script>
        <script type="application/javascript" src="https://cdn.ethers.io/lib/ethers-5.2.umd.min.js"></script>
    </body>
</html>
htmlcsstwitter-bootstrapbootstrap-5

Answer №1

There are several complications with this arrangement, and I'm uncertain which ones you wish to tackle. If you are solely interested in adjusting the element that appears on top, you can manipulate the z-index property. By formatting your element with the z-index attribute, you can dictate its display order. I integrated a new class named foreground into your existing code.

<!doctype html>
<style>
    .foreground {
        z-index: 50;
    }
</style>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>test</title>;

        <link href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
        <link rel="stylesheet" href="{{ url_for('static', filename='css/dashboard.css') }}" />
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font/bootstrap-icons.css">
    </head>
    <body>
        <nav class="navbar bg-body-tertiary foreground">
            <div class="container-fluid">
                <a class="navbar-brand" href="#">
                    <img src={{url_for('static', filename='/images/logo.png')}} id="logo" alt="Logo" width="50" height="50" class="d-inline-block align-text-top" style="border-radius: 5px;">
                </a>

                <div class="btn-toolbar align-items-center justify-content-center" role="toolbar" aria-label="Toolbar with button groups">
                    <div class="btn-group me-2" role="group" aria-label="sign in">
                        <div class="dropdown">
                            <button class="btn btn-primary" id="connect_wallet_button" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                Sign In
                            </button>
                            <ul class="dropdown-menu dropdown-menu-end d-none" id="dropdown_menu">
                                <li><a class="dropdown-item" href="#" id="logout_button">Logout</a></li>
                            </ul>
                        </div>
                    </div>

                    <div class="btn-group me-2" role="group" aria-label="theme button">
                        <a href="/#">
                            <i class="bi bi-sun" id="theme_icon" style="font-size: 1.3rem;"></i>
                        </a>
                    </div>
                </div>
            </div>
        </nav>

        <div class="position-absolute top-50 start-50 translate-middle p-3">
            <div class="card">
                <div class="card-body">
                    <h3 class="card-title text-center">test form</h3>

                    <form class="needs-validation" id="form" action="/form" method="post">
                        <div class="mb-3">
                            <label for="name" class="form-label">test</label>
                            <input type="text" class="form-control" id="name" name="name" required>
                        </div>

                        &(rest of the code remains unchanged)
                    </form>
                </div>
            </div>
        </div>

        (script references remain unchanged)

    </body>
</html>

Answer №2

The primary concern in this scenario arises from the use of absolute positioning for the test form "div", which causes it to be detached from the normal document flow. Consequently, the top position gets readjusted based on the 'top: 50% !important' rule, resulting in overlapping with the navbar or creating excessive white space between the elements.

To resolve this issue, I recommend removing the positioning rule and defining a specific width for the test form "div" (referred to as '.container' here, but can be adjusted as per your design). Furthermore, consider adding some margin to the navbar.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>test</title>

    <link
      href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="eb8984849f989f998a9babdec5d8c5dbc68a879b838ada">[email protected]</a>/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD"
      crossorigin="anonymous"
    />
    <link
      rel="stylesheet"
      href="{{ url_for('static', filename='css/dashboard.css') }}"
    />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1d7f7272696e696f7c6d30747e72736e5d2c332c2d332e">[email protected]</a>/font/bootstrap-icons.css"
    />
  </head>
  <body>
    <nav class="navbar mb-4 bg-body-tertiary">
      <div class="container-fluid">
        <a class="navbar-brand" href="#">
          <img src={{url_for('static', filename='/images/logo.png')}} id="logo"
          alt="Logo" width="50" height="50" class="d-inline-block
          align-text-top" style="border-radius: 5px;">
        </a>

        <div
          class="btn-toolbar align-items-center justify-content-center"
          role="toolbar"
          aria-label="Toolbar with button groups"
        >
          <div class="btn-group me-2" role="group" aria-label="sign in">
            <div class="dropdown">
              <!-- dropdown-toggle -->
              <button
                class="btn btn-primary"
                id="connect_wallet_button"
                type="button"
                data-bs-toggle="dropdown"
                aria-expanded="false"
              >
                Sign In
              </button>
              <ul
                class="dropdown-menu dropdown-menu-end d-none"
                id="dropdown_menu"
              >
                <li>
                  <a class="dropdown-item" href="#" id="logout_button"
                    >Logout</a
                  >
                </li>
              </ul>
            </div>
          </div>

          <div class="btn-group me-2" role="group" aria-label="theme button">
            <a href="/#">
              <i
                class="bi bi-sun"
                id="theme_icon"
                style="font-size: 1.3rem"
              ></i>
            </a>
          </div>
        </div>
      </div>
    </nav>

    <div class="container">
      <div class="card">
        <div class="card-body">
          <h3 class="card-title text-center">test form</h3>

          <form class="needs-validation" id="form" action="/form" method="post">
            <div class="mb-3">
              <label for="name" class="form-label">test</label>
              <input
                type="text"
                class="form-control"
                id="name"
                name="name"
                required
              />
            </div>
            <!-- Additional form elements repeated for the sake of brevity -->
          </form>
        </div>
      </div>
    </div>

    <script
      src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8fede0e0fbfcfbfdeeffcfbaa1bca1bfa2eee3ffe7eebe">[email protected]</a>/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
      crossorigin="anonymous"
    ></script>
    <script
      type="text/javascript"
      src="{{ url_for('static', filename='js/dashboard.js') }}"
    ></script>
    <script
      type="application/javascript"
      src="https://cdn.ethers.io/lib/ethers-5.2.umd.min.js"
    ></script>
  </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

Introducing a fresh input field that includes a dropdown selection feature

When a user clicks on the "+" button, a new row should be added with a dropdown and input field. I want the input field name to be the dropdown value for each row. If "Facebook" is selected in the first dropdown, it should not appear in the second dropdo ...

javascriptphpjqueryhtmlcss

There appears to be an unusual white line running along the right side of the page

While working on a document, I noticed an odd white line appearing in the right margin of the page. Despite setting the width to 100% or using margins to center the content, this line persists and I can't figure out why. I've read suggestions on ...

htmlcssbootstrap-4

Run JavaScript upon the webpage loading without the dependency of jQuery

Is there a way to ensure that JavaScript code is executed only after the entire page has loaded, without relying on jQuery? Take this example... <html> <head> <script type="text/javascript"> var box = document.ge ...

javascripthtml

Do CSS Modules consistently generate the same class name for a specific CSS class defined within the module?

I have defined the following classes in my CSS module: .container-styles { height: 20px; width: 90%; background-color: rgb(128 , 128 , 128); } .filler-styles { height: 100%; border-radius: inherit; background-color: rgb(27, 150, 40); text-al ...

htmlcssreactjscss-modules

Is it possible to extract style information using Selenium WebDriver in Python?

I am currently attempting to extract the specific typography used by a company on Stylify Me (e.g. for I am interested in retrieving "UberMove, 'Open Sans', 'Helvetica Neue', Helvetica, sans-serif, normal, 52px, 56px, #000000"). Howeve ...

htmlpython-3.xseleniumselenium-webdriverselenium-chromedriver

Detecting the specific button that was selected with PHP

I am in the process of developing a website for a production company where, upon clicking on a director's name from the menu, all other menu items disappear and only the selected director's biography and work are displayed. My current challenge ...

phpjavascriptjquerymysqlcss

Using Vuetify to send a parameter from a select option to a method as a parameter

Just starting out with vuejs and encountering an issue passing parameters from a selected option to my JavaScript method. In my updateClientIsMaster method, the item is always undefined. However, when I added v-on:change="updateClientIsMaster in the & ...

javascripthtmlvue.jsvuetify.js

Displaying overlay when sidebar menu is expanded

I am working on creating a smooth overlay transition for when the sidebar menu opens and closes. When the overlay is clicked, I want the menu to close. This is what I have so far: $(document).ready(function() { $('#menu-toggle').click(fun ...

javascriptjqueryhtmlcsstwitter-bootstrap

Switch up the placement of the boxes by moving them in different directions, such as

I've been attempting to recreate the button movement demonstrated in this link , but I'm having trouble achieving it. Using CSS animation, I can make the buttons move in a straight line, here's what I have so far: <div id="box" style=&ap ...

javascriptjqueryhtmlcss

Is it possible to specify the same attribute multiple times within an HTML5 element?

After reviewing the HTML5 specification (W3C Recommendation 28 October 2014), I am unable to locate any specific information on whether an element can have the same attribute specified multiple times. For instance, the attribute style sometimes has a lengt ...

htmlattributes

How can JQuery be utilized to extract the information stored in the "value" parameter of a chosen option?

I have a dropdown menu that dynamically populates its options with numbers. Here is the code for that: <select name="TheServices" id="services-selector"> <option value="" disabled selected hidden>Static Select ...

javascripthtmljquery

Tips for resolving CSS issues in a vast style sheet

I'm currently facing a challenge with modifying the CSS of a Wordpress plugin I need to utilize. The learnpress.css stylesheet is very extensive, spanning over 2000 lines, making it quite complex to comprehend. All I am trying to achieve is a simple t ...

cssgoogle-chrome-devtoolsbackground-color

Extracting unique text values from nested div elements within list items using Selenium with Python

Within the HTML code provided, I am looking to extract the text of three variables (descr_confezione, aic_farmaco, and stato_confezione) for each of the four list items: <ul id="ul_lista_confezioni"> <li style="display: list-item;"> &l ...

pythonhtmlselenium

What steps should I follow to align these unordered lists side by side?

Is there a way to align these lists (unordered lists inside list items 1 through 4) side by side using CSS3? I've tried different methods, but I can't seem to figure it out. Here is the code I've been using: <footer> <ul> ...

htmlcsshtml-listsinline

I am experiencing difficulty with the Click() operation in Selenium web driver as it is not successfully redirecting me to another page

Hello everyone, I could really use your assistance with a problem I'm facing. WebElement wb=driver.findElement(By.name("NavHeader1$tabs$ctl00$btnNavHeaderTab")); Actions act=new Actions(driver); act.moveToElement(wb).perform(); ...

javascripthtmlseleniumselenium-webdriver

Is the order of SCSS (SASS) selectors important when dealing with nested classes?

Exploring SCSS Styles for List Items In this code snippet, I am investigating the order of selection for classes and pseudo-selectors in SCSS. Specifically, I am questioning whether &:before.active is equivalent to &.active:before. Here is an exa ...

csssasscss-selectors

Steps for breaking down a given string into divisions that correspond to an A4 sheet

Within my content, there are various styles applied. For example: This is a <b>bolded</b> word. I am seeking a solution to divide this long string into smaller sections that would fit on an A4 page accurately. The goal is to maintain the integ ...

javascripthtmlcssionic-framework

Having trouble showing the success message following row edits in jqgrid

I'm currently developing a web-based application with Bootstrap and I'm facing a challenge with implementing inline editing in my grid upon page load. The issue arises when displaying the success or failure message after performing an edit functi ...

javascriptjquerytwitter-bootstrapjqgrid

Add some animation to elements when the page loads

I am curious about triggering a css animation when the page loads. I am currently experimenting with css animations for the first time. Here is what I have created so far: https://jsfiddle.net/7prg793g. However, it only works upon hover at the moment. * ...

htmlcss

The jquery selector fails to retrieve all elements

On the upcoming web page, I am attempting to use Jquery to select all <li> elements. Specifically, I want to target all the products contained within <ul class=search-result-gridview-items">. You can find the products here: I have made attempt ...

javascriptjqueryhtmlcss