Menu
If I run the code without bootstraps container and rows etc.. it does work.
But if i run the code like this snippet inside container etc. the ahref's are not working!
Unless i remove the z-index, but i want the menu to look like it is now.
This have been bugging me for a couple of hours now, and i need someone with a different way of "look" at this problem.
.row.content {
height: 200px;
margin: 20px 0px;
}
.main {
border: 1px solid #600d17;
border-radius: 4px;
margin-top: 20px;
}
.sidenav {
padding-top: 20px;
height: 100%;
}
.sidenav a:hover {
color: #550d15;
}
header {
padding: 30px;
border-bottom: 3px solid #600d17;
}
footer {
padding: 30px;
border-top: 3px solid #600d17;
}
#somename {
border: 1px solid #600d17;
border-radius: 4px;
height: 200px;
background-color: #600d17;
position: relative;
z-index: -1;
/* If i delete this, everything works... */
}
#somename a {
padding: 10px;
display: block;
text-decoration: none;
}
#topheader {
border: 1px solid #460a11;
border-radius: 4px;
background-color: #460a11;
padding: 10px 4px;
height: 50px;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>sometitle</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<header class="container-fluid">
Header text
</header>
<div class="container">
<div class="row content">
<div class="col-xs-3 sidenav">
<div id="topheader">
<p>Menu</p>
<div id="somename">
<a href="#">somelink</a>
<a href="#">somelink</a>
</div>
</div>
</div>
<div class="col-xs-6 main">
<section>
<h1>Title content</h1>
<p>
Some story...
</p>
</section>
</div>
<div class="col-xs-3 sidenav">
right menu
</div>
</div>
</div>
<footer class="container-fluid text-center">
<p>Footer Text</p>
</footer>
</body>
</html>
706
asked Jan 25 '26 12:01
Your id somenname is inside of your outer id topHeader.
You simply need to use z-index on 2 separate div in your case
Separate
topheaderandsomename
Now overlap topheader on somename by following code:
#topheader{
z-index:2;
position:relative;
}
#somename{
z-index:1;
}
.row.content {
height: 200px;
margin: 20px 0px;
}
.main {
border: 1px solid #600d17;
border-radius: 4px;
margin-top: 20px;
}
.sidenav {
padding-top: 20px;
height: 100%;
}
.sidenav a:hover {
color: #550d15;
}
header {
padding: 30px;
border-bottom: 3px solid #600d17;
}
footer {
padding: 30px;
border-top: 3px solid #600d17;
}
#somename {
border: 1px solid #600d17;
border-radius: 4px;
height: 200px;
background-color: #600d17;
position: relative;
margin: -10px 5px 0px 5px;
z-index: 1;
/* If i delete this, everything works... */
}
#somename a {
padding: 10px;
display: block;
text-decoration: none;
}
#topheader {
border: 1px solid #460a11;
border-radius: 4px;
background-color: #460a11;
padding: 10px 4px;
height: 50px;
z-index: 2;
position: relative;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>sometitle</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<header class="container-fluid">
Header text
</header>
<div class="container">
<div class="row content">
<div class="col-xs-3 sidenav">
<div id="topheader">
<p>Menu</p>
</div>
<div id="somename">
<a href="#">somelink</a>
<a href="#">somelink</a>
</div>
</div>
<div class="col-xs-6 main">
<section>
<h1>Title content</h1>
<p>
Some story...
</p>
</section>
</div>
<div class="col-xs-3 sidenav">
right menu
</div>
</div>
</div>
<footer class="container-fluid text-center">
<p>Footer Text</p>
</footer>
</body>
</html>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With