What could be the reason for the absence of an option in the navbar

As I work on creating a navbar menu that functions as an accordion on desktop and mobile, I encountered an issue. When I click on the dropdown on mobile, it displays one less item than intended. This seems to be related to a design error where the first item's height gets doubled and affects the layout of the last element.

I am relatively new to design concepts and would appreciate any guidance or insights on how to resolve this issue effectively.

Thank you in advance for any assistance or suggestions provided.

//DROPDOWN MENU FULL SIZE/ MOBILE
const dropdownbtn = document.querySelectorAll('.dropbtn');
const dropdowmContenido = document.querySelectorAll('.drop_contenido');



for (let i = 0; i < dropdownbtn.length; i++) {
    dropdownbtn[i].addEventListener('click',()=>{
      dropdowmContenido[i].classList.toggle("mostrar");
    }); 
}






// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
    if (!event.target.matches('.dropbtn')) {
      let dropdowmCont =  document.querySelectorAll('.drop_contenido');
       // var i;
        for (i = 0; i < dropdowmCont.length; i++) {
          var openDropdown = dropdowmCont[i];
          if (openDropdown.classList.contains('mostrar')) {
            openDropdown.classList.remove('mostrar');
          }
        }
    }
}



//RESPONSIVE
const btnOpciones= document.querySelector('#btnOpciones');
const opciones = document.querySelector('#opciones');

const btnUser=document.querySelector('#btnUser');
const opcionesUser = document.querySelector('#opcionesUser');

//BOton de opciones
btnOpciones.addEventListener('click', ()=>{
  if (opcionesUser.classList.contains('vermenu')) {
    opcionesUser.classList.remove('vermenu');
  } 
  opciones.classList.toggle('vermenu');
});


//Boton de Usuario
btnUser.addEventListener('click', ()=>{
  if (opciones.classList.contains('vermenu')) {
    opciones.classList.remove('vermenu');
  } 
  opcionesUser.classList.toggle('vermenu');
});
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;500&display=swap');


*, body, html{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    list-style: none;
}

:root{
    --navbar-alto: 35px;
    --navbar-ancho:100vw;
    --navbar-color: rgb(228, 226, 226);

    --navbar-texto-color: rgb(129, 129, 129);
    --navbar-texto-fuente-tamaño: 16px;

    --navbar-hover-color: rgb(218, 216, 216);
    --navbar-hover-fuente-color: rgb(19, 19, 19);

    --navbar-titulo-color: rgb(0, 0, 0);
}

/* Barra Navegacion */
.nav__bar{
    font-family: 'Montserrat', sans-serif;
    width: var(--navbar-ancho);
    height: var(--navbar-alto);
    background-color: var(--navbar-color);
    display: flex; 
    font-size: var(--navbar-texto-fuente-tamaño);
    box-shadow: 0px 0px 1px  rgb(105, 105, 105);
}

/* Estilo para los link */
.nav__bar .nav_item{
    float: left;
    display: block;
    color: #0a0a0a;
    text-align: center;
    padding: 8px;
    text-decoration: none;
    font-size: var(--navbar-texto-fuente);
}


/*************
SECCION CON LOS ITEMS DEL MENU  
**************/
/* DROPDOWN */
.dropdown{
    float: left;
    overflow: hidden;
}

/* opciones del dropdown Menu */
.drop_contenido{
   /* display: none;
   */ position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.2);
    z-index: 1;
    top: var(--navbar-alto);
}

/* opcion para mostrar el submenu */
.drop_contenido.mostrar{
  /* display: block;
*/}

/* opciones del submenu */
.subNavItem{
    color: black;
    padding: 8px;
    text-decoration: none;
    display: block;
    text-align: left;
}

/* Hover para items y subitems */
.nav_item:hover, 
.dropdown:hover, 
.subNavItem:hover{
    background-color: var(--navbar-hover-color);
    color: var(--navbar-hover-fuente-color);
}

/*Items de la barra de navegacion*/
.items, 
.acciones_extra{
    height: var(--navbar-alto);
    width: auto;
    display: flex;
}

/*Posiciono las acciones extras*/
.acciones_extra{
    position: absolute;
    right: 5px; 
}

/* Icono de los items*/
.item_icon{
    margin-right: 5px;
}

/*dato sque aparace en span*/
.subDato{
    color: green;
    font-size: 15px;
}



/*************
SECCION TITULO DEL SISTEMA O PAGINA     
**************/
.titulo_logo{
    height: var(--navbar-alto);
    width: 240px;
    display: flex;
    text-justify: center;
    align-items: center;
}

.logo{
    height:calc(var(--navbar-alto) - 5px);
    width: calc(var(--navbar-alto) - 5px);
    max-height: var(--navbar-alto);
    border-radius: 50%;
}

.titulo{
    margin-left: 5px;
    margin-right: 10px;
    text-decoration: none;
    color: var(--navbar-titulo-color);
    letter-spacing: 1px;
    font-size: calc(var(--navbar-texto-fuente-tamaño) + 5px);
}

.icon_menu,
.icon_user{
    display: none;
}

.icon{
    color: black;
}

/*******************************************
 RESPONSIVE     
*******************************************/
@media screen and (max-width: 600px) {
    /* ICONOS */
    .icon{
        height: var(--navbar-alto); 
        padding: 10px;  
    }

    .icon:hover{
        background-color: var(--navbar-hover-color);
    }
    
    .icon_menu,
    .icon_user{
        display: block;
        position: absolute;
        color: black;
    }

    .icon_menu{
        right: 0px;
    }
    
    .icon_user{
        left: 0px; 
    }

    /* BARRA NAVEGACION */
    .nav__bar{
        position: relative;
    } 

    /* TITULO Y LOGO  */
    .titulo_logo{
        position: relative;
        margin: auto;
    }

    /* Items y datos de usuario y sistema*/
    .items, 
    .acciones_extra{
        position: absolute;/*con esto se logra que el menu ancho no interfiera con el contenido de arriba */
        background-color: var(--navbar-color);
        width: 100%;
        top: var(--navbar-alto);
        height: auto;
        display: none;
    }

    /* Clase para poder mostrar las opciones del menu general */
    .items.vermenu,  
    .acciones_extra.vermenu{
        display: block;
        display: flex;
        flex-direction: column;
    }
    
    /*Forma de mostrar los items en el menu responsive*/
    .nav_item{
        width: 100%;    
    }

    /* Contenido del submenu */
    .drop_contenido{
       position: relative;
    }


    .subNavItem{
        text-align: center;
        border: 0.1px solid yellow;
    }
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="navbar-submenu.css">
     <!-- CARGA FONT AWESOME-->
     <link rel="stylesheet" href="/fontawesome/css/all.min.css">
</head>
<body>
    <nav class="nav__bar">
        <a href="#" class="icon_menu icon" id="btnUser"><i class="fas fa-user"></i></a>
        <a href="#" class="icon_user icon" id="btnOpciones"><i class="fas fa-bars"></i></a>

        <!--SECCION TITULO DEL SISTEMA O PAGINA-->
     
        <div class="titulo_logo">
            <img src="logo.jpg" alt="" class="logo">
            <a href="#" class="titulo">Mi Aplicacion</a>
        </div>
          
        <!--SECCION CON LOS ITEMS DEL MENU -->
     
        <div class="items" id="opciones">
            <a href="#" class="nav_item">Inico</a>
            <a href="#" class="nav_item">Seccion B</a>
            <div class="dropdown">
                <a href="#" class="nav_item dropbtn">Drop 1</a>
                <div class="drop_contenido">
                    <a href="#" class="subNavItem">sub 1</a>
                    <a href="#" class="subNavItem">sub 2</a>
                    <a href="#" class="subNavItem">sub 3</a>
                    <a href="#" class="subNavItem">sub 4</a>
                </div>
            </div>
            <a href="#" class="nav_item">Contacto</a>
            <div class="dropdown">
                <a href="#" class="nav_item dropbtn">drop 2</a>
                <div class="drop_contenido">
                    <a href="#" class="subNavItem">submenu 1</a>
                    <a href="#" class="subNavItem">sub 2</a>
                </div>
            </div>
            <div class="dropdown">
                <a href="#" class="nav_item dropbtn">Drop 3</a>
                <div class="drop_contenido">
                    <a href="#" class="subNavItem">submenu 1 </a>
                    <a href="#" class="subNavItem">sub 2</a>
                    <a href="#" class="subNavItem">sub 3</a>
                    <a href="#" class="subNavItem">submenu 4</a>
                </div>
            </div>
           


        </div><!--/ FIN Items-->
  
        <!--SECCION PARA LOS DATOS DEL USUARIO Y CERRAR SESIOn-->
        <div class="acciones_extra" id="opcionesUser">
            <a href="#" class="nav_item"><i class="fas fa-user item_icon"></i>Pedro Peres <span class="subDato">(administrador)</span></a>
            <a href="#" class="nav_item"><i class="fas fa-sign-out-alt item_icon"></i>Cerrar Sesion</a>
        </div><!--fin acciones extras-->
    </nav>




    <script src="navbarSubmenu.js"></script>

</body>
</html>

javascripthtmlcssuinavigationbar

Answer №1

To resolve the issue you mentioned, simply remove the 'top' property from a class and relocate the menu outside of a div. Begin by eliminating 'top' from the .drop_contenido class:

.drop_contenido{
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.2);
    z-index: 1;
    /* The line to be removed --> top: var(--navbar-alto);*/
}

Furthermore, move the menu item out of the drop-down menu like so:

<a href="#" class="nav_item dropbtn">Drop 1</a>
<!-- Place the drop item outside the dropdown div --> 
<div class="dropdown">
    <!-- Remove the Drop item from here --> 
    <div class="drop_contenido">
        <a href="#" class="subNavItem">sub 1</a>
        <a href="#" class="subNavItem">sub 2</a>
        <a href="#" class="subNavItem">sub 3</a>
        <a href="#" class="subNavItem">sub 4</a>
    </div>
</div>

If this resolves your issue, kindly mark it as complete 😁

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

The process of compressing font files (such as ArialMT.ttf) using JSZip is experiencing issues

While zipping images and HTML files works smoothly, I encountered an issue when trying to add font files for CSS. The font file is only 1kb in size, but it cannot be opened. Even after attempting to zip the font without any other files, the problem persis ...

javascriptvue.jsjszip

Attempting to use jQuery AJAX to submit data without navigating away from the current webpage

Trying to implement the solution provided in this post where I am trying to send data to a PHP page and trigger an action, but unfortunately, it seems to just refresh the page without any visible outcome. Even after checking the network tab in the element ...

javascriptphpjqueryhtmlajax

"What is the best way to transform tab navigation into a dropdown menu with the help

I have a collection of tabs currently on display. I am looking to transform them into a dropdown menu when the screen size changes, making them more responsive. Each set of tabs corresponds to different content. Despite trying various solutions found on s ...

javascriptjqueryhtml

Ways to access the files attribute in an input tag in AngularJS without relying on getElementById

I am currently working on file uploads using AngularJS and I have a question regarding how to retrieve input files similar to regular JS. What I want to achieve: HTML: <input type="file" name="file" id="fileImg" accept="image/*"> JS: var file ...

javascripthtmlangularjsfile-uploadng-file-upload

Using HTML and CSS to capture user input data and store it in an array

I've created a form that allows users to add and remove multiple fields, ranging from one to three. My goal is to retrieve the form data and store it in an array. index.html <!DOCTYPE html> <html lang="en"> <head> ...

javascripthtmlcss

GraphQL Error (Status Code: 429) - Next.js Development issue

If you're facing a GraphQL Error (Code: 429) while working on a nextjs project, here's a handy solution. Here's what happened: I created a headless CMS using Hygraph and NextJS 13 for a blog project. I also utilized the npm package graphql ...

javascriptreactjsnext.jsgraphqlhygraph

Using `this` in a Jquery get() call to reference a callback function

Utilizing the this keyword in the callbacks of $.get() is my current challenge. The outline of my code looks like this: var myObject = { get: function() { $.get(server,data,function(data,status) { this.callback(); }); }, callback: func ...

javascriptjqueryajaxjquery-callback

Bidirectional binding with complex objects

In my Angular2 app, I have a class called MyClass with the following structure: export class MyClass { name: Object; } The name object is used to load the current language dynamically. Currently, for two-way binding, I am initializing it like this: it ...

javascriptangulartypescript

Executing npm scripts in Node.js

Trying to move away from using the likes of Grunt or Gulp in my projects, I've been exploring npm-scripts as a potential replacement. While npm-scripts makes use of `package.json`, I've found that more advanced build processes require command lin ...

javascriptnode.jsscriptingnpm

Is the treatment of __proto__ different in the fetch API compared to manual assignment?

When using fetch to retrieve a payload containing a __proto__, it seems that the Object prototype is not affected in the same way as when directly assigning to an object. This behavior is beneficial as it ensures that the Object prototype remains unaffect ...

javascriptjsonfetch-api

Utilizing Smarty Template: Combining <li> elements from separate <ul> tags for a seamless display

On my Prestashop website, I have implemented the "Advanced Homepage Product List" module. I removed the category names from the titles to have my items sorted without displaying the category names. Currently, this is how it appears: https://i.stack.imgur. ...

htmlcsstemplatessmartyprestashop

The Material UI Icon is missing from the location '@mui/icons-material/Send.js'

I am currently utilizing the Material UI library and attempting to import SendIcon through this import statement: import { SendIcon } from "@mui/icons-material/Send.js"; Due to including "type" : "module" in my package.json f ...

javascriptreactjsmaterial-ui

Ensure that the loader remains visible until all data has been successfully retrieved from the AngularJS service

Currently, I am facing an issue with the implementation of angularjs ui-router for state transitions along with a loader assigned to each view. The problem arises when moving from one state to another and the loader disappears before all the content from t ...

javascriptangularjs

Create a dropdown menu with selectable options using a b-form-select

I am working with a b-form-select element that displays options based on user input. I am trying to figure out how to trigger a function when the user selects one of the dynamically generated <b-form-option> elements, but I am struggling to capture b ...

javascriptvue.jsvuejs2vuetify.js

Aligning the column to the right to ensure the text is centered horizontally on the screen

<div className={css.title} > <div className={css.row}> <div className={css.columnLeft}> <div className={css.header}>Images</div> </div> <div className={css.col ...

cssreactjsflexbox

How come this particular design is being passed down from a predecessor (and not a direct parent) div?

Web development can be frustrating at times. Hopefully, someone out there can shed some light on this issue and offer a solution. You can view the HTML/CSS code below or check out this example on JSFiddle The problem arises when I have a header div and a ...

htmlcss

The function canvas.toDataURL() is not recognized - error originating from a node-webGL wrapper

I am currently working on converting client-side volume rendering code in the browser to server-side rendering using pure JavaScript. On the server side, I am utilizing node-webgl. My objective is to send the server's canvas content to the client so ...

javascriptnode.jscanvas

Mixing Module Federation with different React versions and individual CSS isolation

In my setup, the module federation remote repository is: developed using react 17 utilizing material-ui 4 with jss incorporating global CSS from third-party libraries that cannot be modified Meanwhile, I have several hosts that consist of: different ver ...

cssreactjsmaterial-uiwebpack-module-federation

When removing the class "img-responsive" from an image, the bootstrap columns begin to overlap

Just starting out with Bootstrap while working on an Angular2 project and I have a question. Currently, I have a map-component taking up 3 columns on the left-hand side, but every time I resize the browser, the image also resizes. I want the image to rema ...

htmlcsstwitter-bootstrapangularangular-ui-bootstrap

Reveal or conceal interactive material using data attributes

I am having difficulty in achieving a certain functionality on my website. Here is the HTML code I am using: <div id="menu"></div> <ul class="countries"> <li data-country="country-1" data-countryname="France">Category France</ ...

jqueryhtml