How to prevent javascript element from rendering over collapsible Navbar Menu

Question

I'm trying to add a Full-Calendar to my website but the calendar div keeps rendering over the expanded Navbar.

Is there a way to make the navbar stay on top of the full-calendar? On top meaning that the menu once expanded hides the calendar.

For information I'm using bootstrap 4 for the styling and django as framework.

This is the body section from my base template:

<body>
        <!-- Header -->
        <header id="header">
            <!--Loading Navbar-->
            {% include 'navbar.html' %}

            <div id="branding">
            {% block branding %}{% endblock %}
            </div>
        </header>
        <!-- END Header -->

        <!-- Container -->
        <div id="container">

            <!-- Content -->
            <div id="content" class="{% block content_container_class %}colM{% endblock %}">
                {% block pretitle %}{% endblock %}
                
                {% block content %}{% endblock %}
            </div>
            <!-- END Content -->          
        </div>
        <!-- END Container -->

        {% include 'footer.html' %}
        <!-- Load Javascript-->
        <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://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" 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>
        {% block script %}{% endblock %}
        <!-- End Javascript-->

    </body>

My navbar:

{% load static %}

<nav class="navbar navbar-expand-md bg-light navbar-light shadow-sm">
    <div class="navbar-header justify-content-between d-flex flex-row">
        <!-- Toggler/collapsibe Button -->
        <button class="navbar-toggler border-0" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
            <img src="{% static 'img/navbar-menu.svg' %}" alt="menu" class="nav-menu">
        </button>

        <!-- Brand -->
        <a class="navbar-brand d-lg-none d-xl-none d-md-none" href="#">
            <img src="{% static 'img/navbar-logo.png' %}" alt="logo" style="width: 80px;">
        </a>
    
        <!-- Search Button-->
        <button class="navbar-toggler border-0" type="button" data-toggle="collapse" data-target="#collapsibleSearch">
            <a class="navbar-search d-lg-none d-xl-none d-md-none" href="#"><img class="search-logo" src="{% static 'img/navbar-search.svg' %}" alt="" style="width: 24px;"></a>
        </button>
    </div>
    <!-- Navbar links -->
    <div class="collapse navbar-collapse" id="collapsibleNavbar">
        <ul class="nav justify-content-center">
            <li class="nav-item">
                <a href="{% url 'home' %}" class="nav-link">
                    <figure class="nav-strip-figure">
                        <img src="{% static 'img/home.svg' %}" alt="" class="nav-strip-figure-image">
                        <figcaption class="has-text-weight-normal hero-text caption">Acceuil</figcaption>
                    </figure>
                </a>
            </li>
            <li class="nav justify-content-center">
                <a href="{% url 'event' %}" class="nav-link">
                    <figure class="nav-strip-figure">
                        <img src="{% static 'img/event.svg' %}" alt="" class="nav-strip-figure-image">
                        <figcaption class="has-text-weight-normal hero-text caption">Événements</figcaption>
                    </figure>
                </a>
            </li>
            <li class="nav justify-content-center">
                <a href="{% url 'info' %}" class="nav-link">
                    <figure class="nav-strip-figure">
                        <img src="{% static 'img/info.svg' %}" alt="" class="nav-strip-figure-image">
                        <figcaption class="has-text-weight-normal hero-text caption">Informations</figcaption>
                    </figure>
                </a>
            </li>
            <li class="nav justify-content-center">
                <a href="{% url 'members' %}" class="nav-link">
                    <figure class="nav-strip-figure">
                        <img src="{% static 'img/join.svg' %}" alt="" class="nav-strip-figure-image">
                        <figcaption class="has-text-weight-normal hero-text caption">Rejoindre</figcaption>
                    </figure>
                </a>
            </li>
            <li class="nav justify-content-center">
                <a href="{% url 'contact' %}" class="nav-link">
                    <figure class="nav-strip-figure">
                        <img src="{% static 'img/contact.svg' %}" alt="" class="nav-strip-figure-image">
                        <figcaption class="has-text-weight-normal hero-text caption">Contact</figcaption>
                    </figure>
                </a>
            </li>
            <li class="nav justify-content-center">
                <a href="{% url 'us' %}" class="nav-link">
                    <figure class="nav-strip-figure">
                        <img src="{% static 'img/us.svg' %}" alt="" class="nav-strip-figure-image">
                        <figcaption class="has-text-weight-normal hero-text caption">Nous</figcaption>
                    </figure>        
                </a>
            </li>
        </ul>
    </div> 

    <div class="collapse navbar-collapse" id="collapsibleSearch">
        <form class="form-inline" action="">
            <div class="input-group">
              <input type="text" class="form-control">
              <div class="input-group-append">
                <button class="border-0 shadow-0" type="submit">
                    <span class="input-group-text">Rechercher</span>
                </button>
              </div>
            </div> 
          </form>
    </div>
</nav>

And this is the page containing the full-calendar:

{% extends 'base.html' %}
{% load static %}

{% block header_script %}
<link href='https://cdn.jsdelivr.net/npm/fullcalendar@5.1.0/main.css' rel='stylesheet' />
<script src='https://cdn.jsdelivr.net/npm/fullcalendar@5.1.0/main.js'></script>
<script>

    document.addEventListener('DOMContentLoaded', function() {
      var calendarEl = document.getElementById('calendar');
      var calendar = new FullCalendar.Calendar(calendarEl, {
        initialView: 'dayGridMonth',
        themeSystem: 'bootstrap',
        events: [
            {
                title: 'Antred Réunion Annuelle',
                start: '2020-07-15',
                end: '2020-07-15'
            }
        ]
      });
      calendar.render();
    });

</script>
{% endblock %}


{% block content %}
<div id="calendar"></div>
    
{% endblock %}

Thanks everyone for the help !

Answer 1

Found the answer, I moved my nav into:

<div style="position:relative; z-index:10"></div>

How to prevent javascript element from rendering over collapsible Navbar Menu

Question

1 answers

solution1
0 ACCPTED 2020-07-15 22:19:44

How to prevent javascript element from rendering over collapsible Navbar Menu

Question

1 answers

solution1 0 ACCPTED 2020-07-15 22:19:44

solution1
0 ACCPTED 2020-07-15 22:19:44