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

Adding a <span> element within an <h1> tag in WordPress

I am attempting to create this layout in Wordpress using the code <h1>This is my <span>title</span></h1>, but I am unsure how to incorporate a <span> tag within the <?php the_title(); ?> function. After consulting the c ...

phphtmlcsswordpress

How to easily update a URL string in Angular 5 router without altering the state of the application

I am working on an Angular 5 application that utilizes the angular router. The majority of my entry route components are placed under a context id, which represents a name in the app store along with other relevant data for that context. Even though the na ...

javascriptangularroutesangular-routingangular-router

Retrieve the chosen selection from a dropdown menu using AngularJS and Ionic

I've been encountering some issues with the select feature in AngularJS. Despite searching extensively for solutions, none seem to be working for me. The JSON structure I'm dealing with is generated from my service.php: [ { "Name": ...

javascriptphpjsonangularjsionic-framework

Having trouble importing Material UI and working with ClickAwayListener

For my current project, I am utilizing material-ui to implement the functionality for changing passwords. In this root file, I am importing several child components: Personalize.js import React, { useContext, useState } from 'react'; import Cook ...

javascriptreactjsmaterial-uifrontendonclicklistener

What is the method for configuring Vue to utilize a value other than the value property in form fields?

I am facing a unique challenge. Consider this: <select name="screw[type]" v-model="form.screw.type"> <option value="My value" ><?php _e('My value', 'fiam'); ?></option> //[...] Now, in another part of my ...

javascriptvue.jsinternationalization

Ways to generate a customized template using the directive attribute parameter

I have developed a new directive and I am looking to incorporate a dynamic template using the attribute wm.data.typeName. wm.data.typeName = "<span>html code</span>" <fill-choose model-input="wm.data.modelInput" text="wm.data.typeName"&g ...

javascriptangularjsangularjs-directive

Input a new function

Trying to properly type this incoming function prop in a React Hook Component. Currently, I have just used any which is not ideal as I am still learning TypeScript: const FeaturedCompanies = (findFeaturedCompanies: any) => { ... } This is the plain fun ...

javascriptreactjstypescript

Adding a placeholder to a MUI Select component with different value prop and MenuItem options: a step-by-step guide

Is there a way to include a placeholder (-- Select --) in the MUI Select component below? const [country, setCountry] = useState("") <FormControl fullWidth error={!country}> <Select displayEmpty renderValue={selected => sel ...

javascriptmaterial-ui

I'm having trouble getting my Retina image code to work perfectly. The high resolution image isn't loading at its full

After learning how to display my Retina optimized logo from this tutorial (link), I encountered an issue when testing on my iPad and Samsung Galaxy Note II (using Safari, Firefox, Dolphin apps). The Retina image is showing up at its full size of 1200px x 5 ...

androidcssipadretina-display

Perform a POST request in JavaScript and handle the response in PHP

Currently, I am in the process of gathering data through a form and executing this JavaScript: fetch('process.php', { method: 'POST', body: formData, }).then(response => alert( response ) ); The execution of process.php hap ...

javascriptphp

Alert: Ajax encountered an issue with the auto-refreshing field

When running a script I created for a self-updating field, I encountered the following error message: UpdateField.html:37 Uncaught ReferenceError: fieldname is not defined at HTMLInputElement.onchange (UpdateField.html:37) Script: <!DOCTYPE ht ...

javascriptphphtmlajax

The visibility of buttons can be controlled based on the selected radio option

I have just completed setting up 4 buttons (add, edit, delete, cancel) and a table that displays data received via ajax. Each row in the table contains a radio button identified by the name "myRadio". When a radio button is clicked, I need the buttons to ...

javascriptjquerybootstrap-4

What is the best way to simultaneously check two conditions in Vue.js?

In my current scenario, I am facing a challenge with checking both conditions simultaneously. If an attachment exists in the request but the attachment field does not exist in the form, it should display a message in the modal. Similarly, if body text exis ...

javascriptvue.jsvuejs2

When an input element is being controlled from outside the modal using a portal, it is losing focus after a key press

[Resolved] The input component is experiencing a focus issue when any key is pressed, only when its value is controlled from outside of the portal. NOTE: I apologize for any confusion. While writing this post, I identified the problem in my code, but dec ...

javascriptreactjs

The issue with adjusting the top position in jQuery

As I continued scrolling on my page, I encountered an issue with adjusting the top offset using jQuery on my element. I want the element with id goToLog to become fixed on the page after scrolling 80px. This functionality is working correctly. However, wh ...

jqueryhtmlcss

Every time I try to utilize "useCallback," it results in a TypeError error popping up

I am struggling with an issue related to a const experience that involves creating 6 experiences with their respective popovers. I have been instructed to use useCallback, but every time I attempt to do so, I encounter an error message. This relates to my ...

javascriptreactjsmaterial-ui

Elevate with Ease: Tailwind's Height Transition

I've been attempting to implement a transition effect using TailwindCSS, but I haven't found an updated version with the latest features. Here's the code snippet: <div id="fadeInElement" className={visible ? " w-2/3 px-5 t ...

javascriptcssreactjsjsxtailwind-css

Retrieving location data using the Google Maps geocoder

Could someone help me with this issue in my code? function getLocationName(latitude, longitude) { if (isNaN(parseFloat(latitude)) || isNaN(parseFloat(longitude))) { return false; } var locationName; var geocoder = new google.maps. ...

javascriptjquerygoogle-mapsgoogle-maps-api-3

Tips for accessing the value of a dynamically created textbox using JavaScript

Hello everyone, I have a couple of questions that I need help with. I am currently working on developing a social networking website similar to Facebook. On this platform, there are multiple posts fetched from a database. However, I am facing an issue w ...

javascripthtmlajax

Display a div based on user selection using Ajax and Laravel

There are two div elements on the index page containing a datatable. By default, these two divs should be hidden. When an option is selected from the dropdown menu, the corresponding div should be displayed. The webpage is designed for searching within a ...

javascriptjqueryajaxlaravellaravel-5.6