Mladen Railić Mladen Railić - 8 days ago 7
CSS Question

My dropdown menu doesn't push my content down?

I created a responsive dropdown menu. When the screen gets smaller I want the dropdown menu to put the other content down. My code doesn't do that. I have tried using position: relatives/position: absolute, etc to achieve some sort of desired result, but no such luck. I have seen other similar questions pertaining to this problem but it still has not helped me.

This is a snippet of my code.



$(document).ready(function() {
$(".show-menu").click(function() {
$("#menu").slideToggle();
});
});

@charset "utf-8";
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
/* Uporabno za Sticky footer na koncu internetne strani */

html,
body {
height: 100%;
}
body {
padding-top: 30px;
text-align: left;
font-size: 100%;
font-family: "Trebuchet MD", Arial, Helvetica, sans-serif;
}
/* Vse kar je v glavi internetne strani oziroma slika glave */

.header {
width: 90%;
margin: auto;
padding-bottom: 10px;
}
.header img {
width: 100%;
}
/* Konec glave internetne strani*/

/* Vse kar je v glavnem menuju internetne strani */

.full {
background-color: #00528b;
height: 70px;
width: 85%;
margin: auto;
border-radius: 5px;
}
.mainheader {
height: 70px;
background-color: #00528b;
border-radius: 5px;
}
.mainheader nav ul {
height: 70px;
width: 714px;
margin: auto;
z-index: 1000;
}
.mainheader nav ul ul.hidden {
position: absolute;
}
/* Skrij podmenuje dokler jih ne potrebuješ */

.mainheader nav ul li ul {
display: none;
}
/* Oblika podmenujev */

.mainheader nav ul li:hover ul li {
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
max-width: 200px;
}
.mainheader nav ul li:hover ul a {
color: #000;
font-size: 18px;
background-color: #fff;
padding: 5px;
}
/* Hover za povezave v podmenujih */

.mainheader nav ul li:hover ul a:hover {
background-color: #777;
}
/* Pokaži podmenuje ko je potrebno */

/* + izberi vse .hidden in .hidden:hover takoj po .mainheader nav ul li a:hover */

.mainheader nav ul li a:hover + .hidden,
.hidden:hover {
display: block;
}
/* Podmenuji se postavijo v vertikalo */

.mainheader nav ul li ul li {
display: block;
float: none;
}
.mainheader nav ul li ul li a {
width: auto;
min-width: 100px;
padding: 0 20px;
text-align: left;
}
.mainheader nav ul li {
display: inline-block;
float: left;
}
.mainheader nav a:link,
.mainheader nav a:visited {
color: #fff;
display: block;
padding: 24.5px 6px 16px 5px;
font-size: 18px;
}
.mainheader nav a:hover {
color: #777;
}
/* Oblika show-menu in skrij ga po defoltu */

.show-menu {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 18px;
color: #fff;
padding: 24.5px 6px 16px 5px;
text-decoration: none;
text-align: center;
display: none;
}
/* Skrij checkbox */

input[type=checkbox] {
display: none;
}
/* Interaktivna menujska vrstica */

@media screen and (max-width: 853px) {
/* Prikaži show-menu oziroma menujsko vrstico */
input[type=checkbox]:checked ~ #menu {
display: block;
}
.header {
width: 100%;
}
.full {
width: 95%;
}
/* Podmenuji se postavijo v linijo */
nav ul {
display: none;
}
/* Oblika pod podmenujev */
.mainheader nav ul {
width: 100%;
}
.mainheader nav ul li ul.hidden li a {
width: auto;
}
.mainheader nav ul li a:hover + .hidden,
.hidden:hover {
width: 200px;
}
/* Ustvari vertikalne presledke */
nav li {
background: #00528b;
}
nav li a {
text-align: center;
}
/* Ustvari vse povezave v popolni širini */
nav ul li {
width: 100%;
text-align: center;
}
nav ul li ul li {
width: auto;
background-color: #777;
margin-top: 0px;
}
/* Pokaži 'show menu' povezave */
.show-menu {
display: block;
cursor: pointer;
}
/* Oblika podmenuja, ki omogoča slideToggle */
li.bottom-radius {
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
#menu {
height: 494px;
border-top: 1px solid #fff;
}
}
/* Konec glavnega menuja internetne strani */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="full">
<header class="mainheader">
<nav id="mainheader">

<label for="show-menu" class="show-menu">Menijska vrstica</label>
<input type="checkbox" id="show-menu" name="button">

<ul id="menu">
<li><a href="#">Domov</a>
</li>
<li><a href="#">Novice</a>
<ul class="hidden">
<li><a href="#">Aktualno</a>
</li>
<li><a href="#">Arhiv</a>
</li>
</ul>
</li>
<li><a href="#">Predstavitev</a>
<ul class="hidden">
<li><a href="#">Karate zgodovina</a>
</li>
<li><a href="#">O klubu</a>
</li>
<li><a href="#">Organi</a>
</li>
<li><a href="#">Dokumenti</a>
</li>
</ul>
</li>
<li><a href="#">Člani kluba</a>
<ul class="hidden">
<li><a href="#">Registrirani tekmovalci</a>
</li>
<li><a href="#">Vsi člani kluba</a>
</li>
</ul>
</li>
<li><a href="#">Register pasov</a>
<ul class="hidden">
<li><a href="#">Kyu pasovi</a>
</li>
<li><a href="#">Dan pasovi</a>
</li>
</ul>
</li>
<li><a href="#">Trenerji</a>
<ul class="hidden">
<li><a href="#">Shihan</a>
</li>
<li><a href="#">Sensei</a>
</li>
</ul>
</li>
<li><a href="#">Galerija</a>
<ul class="hidden">
<li><a href="#">Slike</a>
</li>
<li><a href="#">Posnetki</a>
</li>
</ul>
</li>
<li class="bottom-radius"><a href="#">Sponzorji</a>
</li>
</ul>
</nav>
</header>
</div>
<div>
<h1>Only for preview of this exeple</h1>
</div>





I hope it's easy solution. Thanks.

Answer

This is happening because you are setting the height of the header explicitly. Remove height: 70px from your .full and .mainheader css rules.