'dropdown form in a navigation bar

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 class="row">
        <div class="navbar" id="navbar">
            <a class="w3-hover-shadow" onclick="navHome()">Home</a>
            <a class="w3-hover-shadow" onclick="navBoard()" style="background-color: lightgrey;">Board</a>
            <a class="w3-hover.shadow" onclick="navConf()">Configure</a>
            <a class="w3-hover-shadow" onclick="navGraph()">Graphs</a>
            <a class="w3-hover-shadow" onclick="navHist()">History</a>
            <div class="buttonnav" id="btncon" onclick="altername()">Connect</div>
            
            <div class="settingscontainer">
                <img src="node_modules/@tabler/icons/icons-png/settings.png" alt="settings" class="settingsicon">
                <div class="settingscontainer-content">
                    <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>

html css

Solution 1:^[1]

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 class="row">
        <div class="navbar" id="navbar">
            <a class="w3-hover-shadow" onclick="navHome()">Home</a>
            <a class="w3-hover-shadow" onclick="navBoard()" style="background-color: lightgrey;">Board</a>
            <a class="w3-hover.shadow" onclick="navConf()">Configure</a>
            <a class="w3-hover-shadow" onclick="navGraph()">Graphs</a>
            <a class="w3-hover-shadow" onclick="navHist()">History</a>
            <div class="buttonnav" id="btncon" onclick="altername()">Connect</div>
            
            <div class="settingscontainer">
                <img src="node_modules/@tabler/icons/icons-png/settings.png" alt="settings" class="settingsicon">
                <div class="settingscontainer-content">
                    <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>

Solution 2:^[2]

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 class="row">
            <div class="navbar" id="navbar">
                <a class="w3-hover-shadow" onclick="navHome()">Home</a>
                <a class="w3-hover-shadow" onclick="navBoard()" style="background-color: lightgrey;">Board</a>
                <a class="w3-hover.shadow" onclick="navConf()">Configure</a>
                <a class="w3-hover-shadow" onclick="navGraph()">Graphs</a>
                <a class="w3-hover-shadow" onclick="navHist()">History</a>
                <div class="buttonnav" id="btncon" onclick="altername()">Connect</div>
                
                <div class="settingscontainer">
                    <img src="node_modules/@tabler/icons/icons-png/settings.png" alt="settings" class="settingsicon">
                    <div class="settingscontainer-content">
                        <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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	ItzHex
Solution 2	ItzHex

'dropdown form in a navigation bar

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]