CODEWITHSUNDEEP
csshtmlcss-positionmargin
VladBatozskyy
VladBatozskyy

Reputation: 13

Put content under fixed navbar

I'm trying to make the content of a site appear under the navbar, which has the positioning fixed. I set the dimensions in percent, so a padding(even in percent) wouldn't really work on different aspect ratios(The site should work similarly on mobile devices).

* {
	padding: 0;
	margin: 0;
	user-select: none;
	-ms-user-select: none;
	-moz-user-select: none;
}
body {
	font-family: sans-serif;
}
.topfix {
	position: fixed;
	width: 100%;
}
.bannertop {
	width: 80%;
	background-color: #000;
	color: #fff;
	text-align: center;
	padding: 0% 10%;
	border-top: 4px solid rgb(50, 50, 50);
}
.nav li {
	list-style-type: none;
	text-align: center;
	width: 20%;
	float: left;
	display: block;
	background-color: rgb(50, 50, 50);
	transition: 1s;
	outline: 2px solid rgb(50, 50, 50);
	outline-offset: -2px;
}
.nav li:hover {
	background-color: rgb( 240, 240, 240);
	color: #000;
	transition: 1s;
}
a {
	text-decoration: none;
	color: #fff;
	transition: 1s;
}
.content {
  text-align: center;
  width: 80%;
  margin: 0% 10%;
  background-color: #f0f0f0;
  padding-top: 10%;
}
		<div class="topfix">
			<div class="bannertop"><img class="bannerimg" src="img/bannerimg.png "></div>
				<div class="nav">
					<ul>
						<a href="#"><li>Link</li></a>
						<a href="#"><li>Link</li></a>
						<a href="#"><li>Link</li></a>
						<a href="#"><li>Link</li></a>
						<a href="#"><li>Link</li></a>
					</ul>
				</div>
			</div>
      <div class="content">Some content</div>

Upvotes: 1

Views: 766

Answers (3)

Filip Vuskovic
Filip Vuskovic

Reputation: 126

If you are referring to the content sliding "under" the fixed portion, you might then want to try giving it a z-index of 1 or higher.

.topfix {
    position: fixed;
    width: 100%;
    top: 0px;
    height: 42px;
    z-index: 2;
}

This ensures that the fixed div is above everything else, but be careful if using z-index because if you apply it to something else and put the number higher, it will overlap. With the lower ones. Generally, you'll want to keep everything at 0/1 and set the one you want on top to 2...

Also you'll want to use pixels instead of percentages!

Upvotes: 0

Ajeesh KH
Ajeesh KH

Reputation: 340

Update your css like this. use pixel instead of percentage

.topfix {
    position: fixed;
    width: 100%;
    top: 0px;
    height: 42px;
}
.content {
    text-align: center;
    width: 80%;
    margin: 0% 10%;
    background-color: #f0f0f0;
    margin-top: 42px;
}

Upvotes: 1

David
David

Reputation: 801

If you wish to fix the header you need to then apply some padding to the element below it, so that it appears below the fixed element.

Use px rather than a percent. Percentages will adjust, a pixel won't, its fixed.

Take a look: 

header {
  position:fixed;
  top:0;
  left:0;
  right:0;
  width:100%;
  height:120px;
  background: #ccc
}
main {
  padding-top:120px;
}
main {
  font-size:44px
}
<header>
   I am fixed
</header>

<main>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vitae risus sed est molestie rhoncus. Duis eget sagittis ante. Donec semper nisl vel pellentesque hendrerit. Nullam congue efficitur viverra. Duis vestibulum ligula id congue accumsan. Maecenas quis ligula ante. Nulla facilisi. Aliquam erat volutpat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam vitae elit euismod, dictum est bibendum, venenatis neque. Mauris congue tortor sed elit molestie, et gravida sem viverra. Donec dignissim, dui in pulvinar lacinia, elit purus egestas nibh, sit amet mattis sapien nisi non enim. Suspendisse dictum mi vitae elit facilisis, non aliquet nisl imperdiet. Sed eget fermentum lacus, quis dapibus mauris. Suspendisse potenti. Integer luctus, lorem ac porta convallis, massa purus rutrum risus, id porttitor magna ex elementum purus. Nulla sagittis, risus vitae ullamcorper bibendum, dui sem maximus quam, nec vestibulum nibh ex in ipsum. Suspendisse ex ligula, aliquet sed dapibus eu, venenatis et dolor. Vivamus vitae nulla nec elit blandit porta dictum vel augue. Proin ut lorem interdum, ultricies ex non, bibendum nisi. Phasellus aliquam, orci in viverra varius, nibh neque aliquam lacus, vitae hendrerit ex ante ut est. Aenean tincidunt ac augue ut mattis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec malesuada sapien metus, sed vulputate massa imperdiet eget. 
</main>

Upvotes: 2

Related Questions