I'm currently trying to make a drop down menu for my mobile design for my website. The menu should appear under my logo, but the div where the drop down menu comes from is not aligned with the logo and when I try to move this div, it causes issues with the positioning of the logo. I want the drop down menu to come down from the center of the header, no matter the screen size.
Here is the CSS that is relevent to the question:
General CSS:
#header {
height:7em;
background:black;
display: flex;
align-items: center
}
Mobile Styling:
h1 {
font-size: 3em;
text-align:center;
padding: 0;
margin: 0;
}
#shadowBox {
width:100%;
touch-action: manipulation;
text-align:center;
display: flex;
justify-content:center;
}
#header {
flex-wrap:wrap;
}
.dropdown {
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 1em;
border: none;
outline: none;
background-color: black;
font-family: inherit;
margin: 0;
padding: 0;
}
.dropbtn {
border: none;
outline: none;
background-color: black;
}
.dropdown-content {
position: absolute;
background-color: black;
min-width: 10em;
box-shadow: 0em 0.5em 1em 0em rgba(0,0,0,0.2);
z-index: 1;
opacity: .85;
top:7em;
}
.dropdown-content a {
float: none;
color: white;
padding: 0.75em 1em;
text-decoration: none;
display: grid;
text-align: center;
width: 8em;
margin:0;
}
.dropdown-content a:hover {
background-color: #3c0025;
transition: 0.5s;
}
.dropdown-content a:hover {
color: #21f6c2;
}
.dropdown-content a:active {
color: #d4f621;
}
.dropdown:hover .dropdown-content {
display: grid;
}
.hidden {
display: none;
}
}
/* Mobile Fixing */
@media (max-width: 931px) {
.dropdown {
display: inline-block;
}
#links {
display: none;
}
.dropdown-content {
display: none;
}
.dropdown:hover .dropdown-content {
display: inline-block;
}
}
And here is the relevent HTML:
<div id="header">
<div class="dropdown">
<div class="dropdown-content">
<a href="/#">home</a>
<a href="/abt">about</a>
<a href="/com">commissions</a>
<a href="/img">portfolio</a>
<a href="/cv">cv</a>
<a href="/crd">credit</a>
</div>
</div>
<div id="shadowBox">
<button class="dropbtn">
<h1 class="rainbow rainbow_text_animated">LOGO</h1>
</button>
</div>
<div id="links">
<a href="/#">home</a>
<a href="/abt">about</a>
<a href="/com">commissions</a>
<a href="/img">portfolio</a>
<a href="/cv">cv</a>
<a href="/crd">credit</a>
</div>
</div>
I'm not sure if all of the CSS is necessary or needs to be included in my question, I want to make sure I'm including everything that I may need to have.
I tried adjusting the display type to see if that would make it possible to move the div that the dropdown menu comes from, but this moves the logo and I'm currently unsure how to make the div that has my logo and the dropdown div come from overlay. Because of this I also have tried justify-content: center and align-content:center, but I don't think I did them correctly. Likewise, I also tried directly moving the dropdown-content menu, but that causes issues when the window is resized and I would like it to stay in the center no matter what the screen size is. I even tried using , despite the fact that it is depriciated, and that did not work either, oddly enough.
I am open to any suggestions on how to fix this that will help fit my needs. Thank you so much!
To use purely CSS for dropdown, I think it is important to keep the dropdown and its button in the same container. So, I adjusted your HTML to keep it as required. Then I adjusted your CSS so that logo and menu can be displayed in a column. I also set a standard screen size. As you didn't add CSS for rainbow and rainbow_text_animated so I set the logo color to white. You can change/remove it when you adjust this code into yours.
Now, in desktop view, #links menu will appear below the logo and in tablet/mobile view it will disappear. When user will hover on the logo, dropdown will appear.
#header {
height: 7em;
background: black;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
}
h1 {
font-size: 3em;
text-align: center;
padding: 0;
margin: 0;
color: #fff;
}
#shadowBox {
touch-action: manipulation;
text-align: center;
display: flex;
justify-content: center;
position: relative;
}
.dropbtn {
font-size: 1em;
border: none;
outline: none;
background-color: black;
font-family: inherit;
margin: 0;
padding: 0;
}
#shadowBox::after {
content: '';
display: block;
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 5em;
}
.dropdown-content {
display: none;
position: absolute;
background-color: black;
min-width: 10em;
box-shadow: 0em 0.5em 1em 0em rgba(0, 0, 0, 0.2);
z-index: 1;
opacity: 0.85;
top: 5.2em;
}
.dropdown-content a {
float: none;
color: white;
padding: 0.75em 1em;
text-decoration: none;
display: block;
text-align: center;
width: 8em;
margin: 0;
}
.dropdown-content a:hover {
background-color: #3c0025;
color: #21f6c2;
transition: 0.5s;
}
.dropdown-content a:active {
color: #d4f621;
}
@media (max-width: 990px) {
#links {
display: none;
}
#shadowBox:hover .dropdown-content,
.dropdown-content:hover {
display: grid;
}
#header {
justify-content: center;
}
}<html>
<head>
<title>Flip text</title>
</head>
<body>
<div id="header">
<div id="shadowBox">
<button class="dropbtn">
<h1 class="rainbow rainbow_text_animated" style="color: #fff">
LOGO
</h1>
</button>
<div class="dropdown-content">
<a href="/#">home</a>
<a href="/abt">about</a>
<a href="/com">commissions</a>
<a href="/img">portfolio</a>
<a href="/cv">cv</a>
<a href="/crd">credit</a>
</div>
</div>
<div id="links">
<a href="/#">home</a>
<a href="/abt">about</a>
<a href="/com">commissions</a>
<a href="/img">portfolio</a>
<a href="/cv">cv</a>
<a href="/crd">credit</a>
</div>
</div>
</body>
</html>