CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
assisrMatheus
assisrMatheus

Reputation: 475

Navbar above the content (like in an above layer)

I'm trying to put my navbar under my big header, but it is going in the front of it, isn't just even above it but kinda in the front

showing the problem

In the code the navbar it's under the "Debugando" but it is showing above it, i want it to stay under it but it is not working i can't find why. I think is something about the position or the float.

Code( First Css then html ): 

body {
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	font-family: Josefin Sans, sans-serif;
}

.navbar {
	background: #428F48;
	height: 40px;
	border-radius: 0px;

	margin: 0 0 0 0;
	padding: 0 0 0 0;
}

.nav {
	margin-top: 5px;
	margin-left: 50px;
}

.nav-pills>li {
	font-size: 24px;
	margin-left: 20px;
}

.jumbotron {
	background: #27b032;
	width: 100%;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	position: absolute;
}

.title {
	font-size: 80px;
	margin-left: 10%;
	padding:  40px 0 40px 0;

	float: left;	
}

.description {	
	font-size: 20px;
	margin-left: 5%;
	padding-left: 3%;
    border-left: 1px solid black;
    height: 60px;
    margin-top: 65px;

    float: left;
    text-align: center;
}

.description span{
	margin-top: 15px;
	position: absolute;
}

.dot {
		-webkit-animation-name: blink;
		-webkit-animation-duration: 1s;
		-webkit-animation-fill-mode: both;
		-webkit-animation-iteration-count: infinite;


		animation-name: blink;
		animation-duration: 1s;
		animation-fill-mode: both;
		animation-iteration-count: infinite;
}

@-webkit-keyframes blink {
		
		25% {opacity: 100;}
		50% {opacity: 0;}
		25% {opacity: 100;}

}

@keyframes blink {
		25% {opacity: 100;}
		50% {opacity: 0;}
		25% {opacity: 100;}
}

html:
<html>

<head>

	<title>Debugando</title>
	
	<meta charset="UTF-8">

	
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="style.css">


	<link href='http://fonts.googleapis.com/css?family=Josefin+Sans:400,700&subset=latin-ext' rel='stylesheet' type='text/css'> 

</head>

<body>
	
	<!--- Top -->
	<div class="content-fluid">

		<div class="jumbotron">

						<div class="title">
							
							<span>Debugando</span><span class="dot">.</span>

						</div>
					

						<div class="description">
							
							<span>

							Descrição foda será inserida aqui.

							</span>

						</div>
					
		</div>

		<div class="navbar">
			
			<ul class="nav-pills">

				<li>Início</li>
				<li>Contato</li>

			</ul>

		</div>

	</div>

<!--<script src="js/jquery-2.1.3.min.js"></script>-->
<script src="js/bootstrap.min.js"></script>
</body>

</html>

I can use bootstrap if needed. Thanks for trying to help!

Upvotes: 0

Views: 1777

Answers (1)

Matthew Lemieux
Matthew Lemieux

Reputation: 356

First if you are using bootstrap you'll need to add .clearfix to the div with class .jumbotron. 

<div class="jumbotron clearfix">

Then remove the absolute positioning from .jumbotron

.jumbotron {
    background: #27b032;
    width: 100%;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
}

Hope this helps.

Upvotes: 3

Related Questions