dropdown form in a navigation bar-CodePudding

i am trying to have a dropdown box with a form so i can change any settings in case of a misspell and, after a few research i can't find the root of the problem. I need the icon to be on the navigation bar. I already tryed to change de z-index of the settings container with no success, change the display of the boxes, used flex containers and still with no results.

This is the HTML and CSS (scripts are running as intended)

.row::after{
    content: "";
    clear: both;
    display: table;
}

@media screen and (max-width: 600px){
    .navbar {position: relative;}
}


.navbar{
    display: flex;   
    border-bottom: 1px solid black;
    overflow: hidden;
}

.navbar a{
    color: black;
    text-align: left;
    padding: 1.5% 4%;
    text-decoration: none;
    font-size: 18px;
    border-right: 1px solid black;
    cursor: pointer;
}

.buttonnav{
    border: 1px solid black;
    width: 10%;
    background-color: lightgray;
    text-align: center;
    padding-top: 0.5%;
    margin-left: 15%;
    border-radius: 5px;
    margin-top: 1%;
    margin-bottom: 1%;
    cursor: pointer;
}

.settingscontainer{
    display: inline-block;
    position: relative;
    padding-left: 2.5%;
    padding-top: 1%;
    z-index: 99;
}

.settingscontainer-content{
    display: none;
    position: absolute;
    width: 80%;
    z-index: 99;
}

.settingscontainer:hover .settingscontainer-content{
    display: block;
}

.settingscontainer-content input[type = "submit"]{
    text-align: center;
    border-radius: 5px;
    background-color: lightgreen;
    margin-top: 2.5%;
    float: right;
    margin-right: 15%;
}
.settingscontainer-content input[type = "text"]{
    width: 80%;
}

.settingsicon{
    width: 25px;
    height: 25px;
    cursor: pointer;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="styletest.css" type="text/css">

    <title>Document</title>
</head>
<body>
    
    <div >
        <div  id="navbar">
            <a  onclick="navHome()">Home</a>
            <a  onclick="navBoard()" style="background-color: lightgrey;">Board</a>
            <a  onclick="navConf()">Configure</a>
            <a  onclick="navGraph()">Graphs</a>
            <a  onclick="navHist()">History</a>
            <div  id="btncon" onclick="altername()">Connect</div>
            
            <div >
                <img src="node_modules/@tabler/icons/icons-png/settings.png" alt="settings" >
                <div >
                    <form action="">
                        <label for="nameboardset">Name of the board:</label><br>
                        <input type="text" name="nameboardset" id="nameboardset" placeholder="Board 1"><br>
                        <label for="">IP address:</label><br>
                        <input type="text" name="ipaddset" id="ipaddset" placeholder="192.168.1.1"><br>
                        <label for="portset">Port:</label><br>
                        <input type="text" name="portset" id="portset" placeholder="8080"><br>
                        <label for="fileset">Image:</label><br>
                        <input type="file" name="fileset" id="fileset">
                        <input type="submit" value="Save Changes">
                    </form>
                </div>
            </div>
            
        </div>
    </div>


    <!--Body Content-->



</body>
</html>

CodePudding user response：

it is because you set the navber overflow: hidden and when ever your dropdown box overflows it becomes invisible. your code

CodePudding user response：

Removing overflow: hidden from your navbar should fix the issue.

.row::after{
    content: "";
    clear: both;
    display: table;
}

@media screen and (max-width: 600px){
    .navbar {position: relative;}
}


.navbar{
    display: flex;   
    border-bottom: 1px solid black;
}

.navbar a{
    color: black;
    text-align: left;
    padding: 1.5% 4%;
    text-decoration: none;
    font-size: 18px;
    border-right: 1px solid black;
    cursor: pointer;
}

.buttonnav{
    border: 1px solid black;
    width: 10%;
    background-color: lightgray;
    text-align: center;
    padding-top: 0.5%;
    margin-left: 15%;
    border-radius: 5px;
    margin-top: 1%;
    margin-bottom: 1%;
    cursor: pointer;
}

.settingscontainer{
    display: inline-block;
    position: relative;
    padding-left: 2.5%;
    padding-top: 1%;
    z-index: 99;
}

.settingscontainer-content{
    display: none;
    position: absolute;
    width: 80%;
    z-index: 99;
}

.settingscontainer:hover .settingscontainer-content{
    display: block;
}

.settingscontainer-content input[type = "submit"]{
    text-align: center;
    border-radius: 5px;
    background-color: lightgreen;
    margin-top: 2.5%;
    float: right;
    margin-right: 15%;
}
.settingscontainer-content input[type = "text"]{
    width: 80%;
}

.settingsicon{
    width: 25px;
    height: 25px;
    cursor: pointer;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="styletest.css" type="text/css">

    <title>Document</title>
</head>
<body>
    
    <div >
        <div  id="navbar">
            <a  onclick="navHome()">Home</a>
            <a  onclick="navBoard()" style="background-color: lightgrey;">Board</a>
            <a  onclick="navConf()">Configure</a>
            <a  onclick="navGraph()">Graphs</a>
            <a  onclick="navHist()">History</a>
            <div  id="btncon" onclick="altername()">Connect</div>
            
            <div >
                <img src="node_modules/@tabler/icons/icons-png/settings.png" alt="settings" >
                <div >
                    <form action="">
                        <label for="nameboardset">Name of the board:</label><br>
                        <input type="text" name="nameboardset" id="nameboardset" placeholder="Board 1"><br>
                        <label for="">IP address:</label><br>
                        <input type="text" name="ipaddset" id="ipaddset" placeholder="192.168.1.1"><br>
                        <label for="portset">Port:</label><br>
                        <input type="text" name="portset" id="portset" placeholder="8080"><br>
                        <label for="fileset">Image:</label><br>
                        <input type="file" name="fileset" id="fileset">
                        <input type="submit" value="Save Changes">
                    </form>
                </div>
            </div>
            
        </div>
    </div>


    <!--Body Content-->



</body>
</html>

CodePudding user response：

CSS File:-

  .row::after{
    content: "";
    clear: both;
    display: table;
}

@media screen and (max-width: 600px){
    .navbar {position: relative;}
}


.navbar{
    display: flex;   
    border-bottom: 1px solid black;
}

.navbar a{
    color: black;
    text-align: left;
    padding: 1.5% 4%;
    text-decoration: none;
    font-size: 18px;
    border-right: 1px solid black;
    cursor: pointer;
}

.buttonnav{
    border: 1px solid black;
    width: 10%;
    background-color: lightgray;
    text-align: center;
    padding-top: 0.5%;
    margin-left: 15%;
    border-radius: 5px;
    margin-top: 1%;
    margin-bottom: 1%;
    cursor: pointer;
}

.settingscontainer{
    display: inline-block;
    position: relative;
    padding-left: 2.5%;
    padding-top: 1%;
    z-index: 99;
}

.settingscontainer-content{
    display: none;
    position: absolute;
    width: 80%;
    z-index: 99;
}

.settingscontainer:hover .settingscontainer-content{
    display: block;
}

.settingscontainer-content input[type = "submit"]{
    text-align: center;
    border-radius: 5px;
    background-color: lightgreen;
    margin-top: 2.5%;
    float: right;
    margin-right: 15%;
}
.settingscontainer-content input[type = "text"]{
    width: 80%;
}

.settingsicon{
    width: 25px;
    height: 25px;
    cursor: pointer;
}

HTML File:-

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="styletest.css" type="text/css">

    <title>Document</title>
</head>
<body>
    
    <div >
        <div  id="navbar">
            <a  onclick="navHome()">Home</a>
            <a  onclick="navBoard()" style="background-color: lightgrey;">Board</a>
            <a  onclick="navConf()">Configure</a>
            <a  onclick="navGraph()">Graphs</a>
            <a  onclick="navHist()">History</a>
            <div  id="btncon" onclick="altername()">Connect</div>
            
            <div >
                <img src="node_modules/@tabler/icons/icons-png/settings.png" alt="settings" >
                <div >
                    <form action="">
                        <label for="nameboardset">Name of the board:</label><br>
                        <input type="text" name="nameboardset" id="nameboardset" placeholder="Board 1"><br>
                        <label for="">IP address:</label><br>
                        <input type="text" name="ipaddset" id="ipaddset" placeholder="192.168.1.1"><br>
                        <label for="portset">Port:</label><br>
                        <input type="text" name="portset" id="portset" placeholder="8080"><br>
                        <label for="fileset">Image:</label><br>
                        <input type="file" name="fileset" id="fileset">
                        <input type="submit" value="Save Changes">
                    </form>
                </div>
            </div>
            
        </div>
    </div>


   



</body>
</html>