I implement a Bootstrap navbar on my website, and when I scroll up, the content blocks seamlessly appear behind the fixed navbar at the top of the page

When scrolling up with my Bootstrap navbar, the block content appears behind the fixed top navbar. My Navbar code is as follows:

<main id="navfix" class="m-5">
    <nav class="navabar_bgc py-0 navbar navbar-expand navbar-light fixed-top">


        {% include 'sidebar.html' %}

        <div class="collapse navbar-collapse" id="collapsibleNavId">
            <ul class="navbar-nav ml-auto mt-lg-0">
               <div>...</div>
            </ul>
        </div>
    </nav>
</main>

<div class="block__content">
{% block content %}
{% endblock %}
</div>

Additional CSS can be found below:

#navfix {
  width: 100%;
}
.navabar_bgc {
  background-color: rgba(103, 250, 34, 0.4) !important;
  box-shadow: 0px 0px 8px !important;
  z-index: 10 !important;
}
.block__content {
  z-index: 5;
  overflow: auto;
}

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

If you have any other suggestions, please let me know. Thank you.

Answer №1

I made some adjustments to your code and included a detailed explanation of the solution. Hopefully, this resolves your issue.

Solution: I utilized block__content with a position:absolute.

#navfix {
  width: 100%;
  position: fixed;
}
.navabar_bgc {
  background-color: rgba(103, 250, 34, 0.4) !important;
  box-shadow: 0px 0px 8px !important;
  z-index: 10 !important;
}
.block__content {
    z-index: 5;
    overflow: auto;
    height: calc(100% - 100px);
    position: absolute;
    top: 60px;
}
<main id="navfix" class="m-5">
    <nav class="navabar_bgc py-0 navbar navbar-expand navbar-light fixed-top">


        {% include 'sidebar.html' %}

        <div class="collapse navbar-collapse" id="collapsibleNavId">
            <ul class="navbar-nav ml-auto mt-lg-0">
               <div>...</div>
            </ul>
        </div>
    </nav>
</main>

<div class="block__content">
<p>
  Some content...
</p>
</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

Reformat an input number by substituting commas with periods

Here's the code I'm working with: <input type="number" tabindex="3" placeholder="Item Price" step="0.01" min="0.10" max="999.99"> An example value inside this input is 1,95. I need to replace the comma with a dot. Can this be done using ...

Sending an integer through an AJAX request without relying on jQuery:

I am having trouble sending an integer named 'petadid' from my JavaScript to the Django view called 'petadlikeview'. The data doesn't seem to be reaching the view, as when I print 'petadid' in the view it displays as &apo ...

Is JavaScript generating a random sequence by dynamically adding fields?

I'm encountering an issue with my button that adds a set of text fields every time I click on the Add More button. The problem is that when I add new text fields, they are appended above the Add More button. Then, pressing the button again adds more t ...

I can't understand why my body width is so disproportionately larger than usual

https://i.stack.imgur.com/jbeyI.png Encountering a new issue now. The width of my body is unusually high and I can't seem to identify the cause. I have included the code below. Tried adjusting margins but no luck. Searched for solutions online wi ...

MUI CSS: Mastering image manipulation

My MUI React Component features a Card that contains an image and buttons <Card key={index} className="xl:w-[350px] w-[310px] max-h-[450px]"> <img src={meme.url} className="center bg-cover" alt="" /> <Box cl ...

Issues with CSS functionality

Every now and then, this thing decides to work but most of the time it just doesn't. I have multiple tables in my application and the CSS is functioning properly for all of them. There's literally no difference with this one table, yet the CSS re ...

Error encountered during Nuxt build: Syntax error on Line 1 of the SCSS component file

I'm currently working on a project in node 18.7.0 that utilizes nuxt 2.15.8. Within my Vue component, I have the following SCSS code: <style lang="scss"> .Accordion { --Accordion__margin-top: 2.5rem; &__items { margin ...

Expanding the full width of the bootstrap navbar

Let's cut to the chase - I'm working with Bootstrap 4 and trying to make my navbar fill the entire width (excluding margins). I know this question has been asked before, so I checked out a post here which suggested using the .nav-fill class, but ...

Is there a way to navigate to the next or previous image in a lightbox by using ev.target.nextElementSibling or ev.target.prevElementSibling?

I am new to the world of web development Currently, I'm facing an issue with my lightbox feature. I want to navigate between images by using ev.target.nextElementSibling and ev.target.prevElementSibling when clicking on the next/previous arrow.png ic ...

Issue with Anchor class in CakePHP where the variable $action is not defined

I'm struggling to apply a class to my anchor link when it is active. How should I define the $action variable in this case? Version: 4.2.9 Error: Undefined variable: action [ROOT\templates\layout\default.php, line 108] templates/lay ...

Managing the AJAX response from a remote CGI script

I'm currently working on a project that involves handling the response of a CGI script located on a remote machine within a PHP generated HTML page on an apache server. The challenge I am facing relates to user authentication and account creation for ...

Angular Material: creating a custom sidenav transition from detailed layouts to icon-based designs seamlessly without the need for predefined

I'm currently working on a <sidenav> that has the ability to toggle between displaying text along with icons or just icons using a menu button. The <sidenav-content> section is set to automatically resize with a smooth transition effect. ...

Looking for ways to track active sessions in Laravel cache. Open to suggestions!

Struggling with a persistent issue for days now, I am seeking help to find a solution. In my Laravel application, I am aiming to track and display the number of online users. I have successfully integrated a feature in my admin panel to show the online an ...

Is the percentage width and height for setting the size of an image in html/css mobile based on the screen's dimensions?

Currently, I'm working on an Oracle Apex jmobile query project involving an HTML page that includes the following image code: <center> <img src="#WORKSPACE_IMAGES#Logo.svg" align="center"> </center> Additionally, there is CSS to st ...

What is the best way to ensure that any words exceeding the line length automatically move to the next line?

My webpage width is currently set to 100vw and adjusts responsively as the viewport size changes. However, there seems to be a slight issue where certain words overflow without being pushed to the next line, causing a small horizontal scroll: https://i.s ...

Exploring Django's HTML QuerySet

Is there a way to verify if a student exists in the database class table, given that the student is assigned as a foreign key in the table? I am looking to achieve this without opening another loop. index.html: <ul> {% for student in studentList %} ...

Whenever I execute commands like makemigrations or createsuperuser in Django, the process becomes unresponsive and gets

My Django application is experiencing some issues. When I attempt to run python manage.py makemigrations, the terminal becomes completely unresponsive, showing no output even when I try using ctrl + C. Strangely, not all commands are affected by this issu ...

Dynamic loading of lists necessitates encapsulating nested lists

I'm currently working on a 3-level dropdown list that pulls content from a database for my project. I want the top level to resemble a tab menu, with a border surrounding the area underneath where the additional lists will appear. However, I am facing ...

Having several horizontal scrollbars at once on a single webpage

I stumbled upon a great example showcasing how to scroll a div on my page: Check out this Codepen - https://codepen.io/zheisey/pen/xxGbEOx Although, I am looking to extend this functionality to allow multiple divs to scroll together. Any suggestions? I ...

How can I dynamically populate a select menu in HTML without the need to submit any data

Looking for help with an input form in HTML that uses a combination of input and select boxes. My goal is to dynamically populate a select menu based on the data entered into the input boxes. For example: Employee One: Jim Employee Two: John Employee Thre ...