Valbone Valbone - 1 month ago 8
HTML Question

Header title paragraphs and misplaces itself

Previously, when my header only had 3 titles, i had no wrapping issues, however after adding another title, that specific title misplaces itself on top of the actual header.

Diagram of desired result: https://i.gyazo.com/3a71cc861daf2ec897cceed30d4bb576.png

Codepen: https://codepen.io/valik140795/pen/qadXOo

I believe the issue is coming from a dropdown button positioning(if not css), yet I am unable to specifically locate the issue.

Code of the button of the title that relocates itself:

<body>
<div class="body">
<div class="block_header">
<div class="lang"><a href="updatethislinkforrussianversion">RU</a> | <a href="updatethislinkforenglishversion">ENG</a></div>
<a href="index.html"><img src="pictures/logo.png" class="logo" width="220px;" /></a>


<ul>
<style>
.dropbtn {
background-color: #282828;
color: #AA9568;
padding: 0px;
font-size: 16px;
border: none;
cursor: pointer;
}

.dropbtn:hover, .dropbtn:focus {
background-color: #282828;
}


.dropdown {
position: relative;
z-index: 999;
display: inline-block;
}

.dropdown-content {
display: none;
position: fixed;
z-index: 999;
background-color: #282828;
min-width: 180px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
color: #AA9568;
padding: 3px 5px;
text-decoration: none;
display: block;
}

.dropdown a:hover {background-color: #282828}

.show {display:block;}
</style>

<div class="dropdown">
<button onclick="myFunction()" class="dropbtn"><a href=#fab>ФАБРИКИ</a></button>
<div id="myDropdown" class="dropdown-content">
<a href="#nobilis">Nobilis</a>
<a href="#colordeseda">Color de Seda</a>
<a href="#eugenio">Eugenio Colombo</a>
<a href="#libra">Libra</a>
</div>
</div>

<script>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}

function filterFunction() {
var input, filter, ul, li, a, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
div = document.getElementById("myDropdown");
a = div.getElementsByTagName("a");
for (i = 0; i < a.length; i++) {
if (a[i].innerHTML.toUpperCase().indexOf(filter) > -1) {
a[i].style.display = "";
} else {
a[i].style.display = "none";
}
}
}
</script>


Thanks in advance.

Answer

The dropdown element that positions on top is out of the ul element that holds the other three, you should put it in the same parent container as them.

Comments