Trying to make header static

HTML & CSS
1

Hi there folks!

I’ve been tasked with duplicating a header and footer of a wix website so it can be used to wrap an MLS search feature. I’ve figured out stuff but I’m having a terrible time getting the header to stay put when scrolling the page. I’ve managed not only to not do that but I’ve hidden my body text underneath the header and can’t figure out how to get it right.

The wix page: http://www.therkg.com/home
My page: http://schw.im/techguys2/

Could someone tell me how to do two things:

  1. Move the body text down below the header
  2. Make the header remain visible at the top of the page when scrolling the page

I would like to do both independently so I can provide a copy of the magic header as well as one that acts like a plain old version that scrolls out of view.

Thanks for your time!

2

Give <section> a large enough margin-top to clear the header. (Around 5em seems to work OK.)

Use position:fixed, not position:absolute on the header.

3

Hi there techno and thanks very much for the help!

The secion portion of the page is just filler and will be replaced by the remotely hosted MLS search feature. Is there anything I can do to the header to ensure that any future content that gets placed below it will start after the header?

4

Try adding margin-bottom to the #header div instead.

5

My header had a position of relative and not absolute. I tried changing it to both absolute and fixed, but this happened when that attribute is changed to either: http://schw.im/techguys2/

image
image1920×1080 493 KB

It seems to have blown the header completely apart. Do I need to place the header in another container that will allow the fixed position?

6

Sorry - I misunderstood what you wanted. I thought it was just #header-bottom (the nav bar) you wanted fixed. I should have paid more attention to the Wix example site. redface-1

What happens when you try that? smile

7

Well, it was a bit successful. First, it did allow me to set the header both as absolute and fixed without blowing the header apart. The issue it did reintroduce is that the body content is once again hidden underneath. I tried the trick you suggested of adding margin-bottom to the new container div but it doesn’t seem to make any difference at all:

http://schw.im/techguys2-fixed/

This is with the container having the fixed attribute in place. The text is once again hidden underneath and I’m not having any success in getting it pushed back down.

8

Well, I’ve managed to push the content down by adding yet another div below the header and putting a padding-bottom on it. The link has the updated version. I’d love to hear if you think I’ve handled this incorrectly, however. I feel like I’m just throwing poop at the wall to see what will stick.

1 Like
9

It looks good to me, given the limitations you’re working with. If there’s a better way to do it, @Ray.H or @PaulOB would be the most likely to know. smile

1 Like
10

These days I would use position:sticky and then you don’t need to account for the height of the header as it does that automatically. This also means that the header height can change (as in a user resizing text) and still not obscure the initial content.

There was no need to absolute place the header elements either.

I’;m in a bit of a rush but here’s the header working with position sticky. (no spacer div needed).

<!DOCTYPE html>
<html lang="en">
<head>
<title>Wix2 Template</title>
<meta charset="utf-8">
<base href="http://schw.im/techguys2-fixed/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<style>
/* General content - Necessary for both header and footer */
@font-face {
	font-family: bscsm;
	src: url('../fonts/BarlowSemiCondensed-Medium.ttf');
}
@font-face {
	font-family: bscr;
	src: url('../fonts/BarlowSemiCondensed-Regular.ttf');
}
@font-face {
	font-family: bscsb;
	src: url('../fonts/BarlowSemiCondensed-SemiBold.ttf');
}
@font-face {
	font-family: tcr;
	src: url('../fonts/Typold-Condensed-Regular.ttf');
}
@font-face {
	font-family: ggr;
	src: url('../fonts/Galano_Grotesque.otf');
}
@font-face {
	font-family: oakesr;
	src: url('../fonts/Oakes-Regular.otf');
}
html, body {
	margin:0;
	padding:0;
	font-family: RalewayRegular, Arial, Helvetica, sans-serif;
}
/* Style the header */
#header-container {
	position:-webkit-sticky;
	position:sticky;
	top:0;
	width: 100%;
}
#header {
	position: relative;
	background-color: #e8e8e8;
	text-align: center;
	font-size: 30px;
	color: white;
}
#header-top {
	text-align: center;
}
#header-top-inner {
	width: 991px;
	margin: 0 auto;
	text-align:right;
	padding: 10px 0;
}
#header-top-inner {
	display:flex;
	justify-content: flex-end;
	align-items:center;
}
#header-top-inner > * {
	margin: 0 0 0 8px;
}
#header-top-inner img {
	display:block;
}
#foo {
	color: #413e45;
	font-family: ggr, sans-serif;
	font-size: 14px;
}
#header-bottom {
	background-color: #413e45;
	min-height: 107px;
	text-align: center;
}
#header-bottom-inner {
	width: 992px;
	margin: 0 auto;
	overflow:hidden;
}
#hbi-left {
	float:left;
	width:186px;
}
#hbi-center {
	display: inline-block;
	margin:0 auto;
	padding-top:42px;
}
#hbi-right {
	float:right;
	width:134px;
	padding-top:5px;
}
#nav-parent {
	margin-left:-14px;
	margin-top: -9px;
}
/* MENU */
.nondropbtn {
	color: #e8e8e8;
	padding-left:52px;
	font-size: 18px;
	font-family: bscsm, sans-serif;
	border: none;
}
.nondropbtn a {
	color: #e8e8e8;
	text-decoration: none;
	-o-transition:color .2s ease-out, background 2s ease-in;
	-ms-transition:color .2s ease-out, background 2s ease-in;
	-moz-transition:color .2s ease-out, background 2s ease-in;
	-webkit-transition:color .2s ease-out, background 2s ease-in;
	transition:color .2s ease-out, background 2s ease-in;
}
.nondropbtn a:hover {
	color: #bea16a;
}
.dropbtn {
	color: #e8e8e8;
	padding-left: 52px;
	padding-bottom:20px;
	font-size: 18px;
	font-family: bscsm, sans-serif;
	border: none;
}
.dropdown {
	position: relative;
	display: inline-block;
}
.dropdown-content {
	display: none;
	position: absolute;
	background-color: #2e2e2e;
	white-space: nowrap;
	box-shadow: 0px 8px 18px 0px rgba(0,0,0,0.2);
	z-index: 1;
	font-size: 18px;
	font-family: bscsm, sans-serif;
}
.dropdown-content a {
	color: #FFFFFF;
	padding: 5px 15px;
	text-decoration: none;
	display: block;
	-o-transition: color .2s ease-out, background 2s ease-in;
	-ms-transition: color .2s ease-out, background 2s ease-in;
	-moz-transition: color .2s ease-out, background 2s ease-in;
	-webkit-transition: color .2s ease-out, background 2s ease-in;
	transition: color .2s ease-out, background 2s ease-in;
}
.dropdown__area-info {
	left: 22%;
}
.dropdown__properties {
	left: 25%;
}
.dropdown__about {
	left: 10%;
}
.dropdown-content a:hover {
	color: #bea16a;
}
.dropdown:hover .dropdown-content {
	display: block;
}
/* Style the footer */
#footer {
	position: absolute;
	margin-top: 20px;
	background-color: #2e2e2e;
	text-align: center;
	color: #beb08b;
	font-size: 14px;
	width:100%;
	height: 232px;
}
#footer-top {
	width: 100%;
	text-align: center;
}
#footer-top-inner {
	width: 920px;
	margin: 0 auto;
	text-align: left;
	padding-top: 35px;
}
#footer-middle {
	width: 100%;
	text-align: center;
}
#footer-middle-inner {
	width: 1000px;
	margin: 0 auto;
	padding-left: 80px;
}
#whodat-inner {
	width: 22%;
	line-height: 25px;
	margin-top: 10px;
	padding-bottom: 40px;
	font-size: 18px;
	font-family: oakesr, sans-serif;
	display: inline-block;
	float: left;
	text-align: left;
}
.marg-right {
	margin-right: 40px;
}
#footer-bottom {
	width: 100%;
	text-align: left;
	position:absolute;
	bottom:0;
}
#footer-bottom-inner {
	width: 920px;
	margin: 0 auto;
	font-family: 'Open Sans', sans-serif;
	font-size: 16px;
	padding-bottom:5px;
}
#footer a {
	color: #beb08b;
}
/* THIS CSS JUST FOR DEKORAISHIUN. NOT NEEDED FOR HEADER OR FOOTER */

/* Container for flexboxes */
section {
	display: -webkit-flex;
	display: flex;
}
/* Style the navigation menu */
nav {
	-webkit-flex: 1;
	-ms-flex: 1;
	flex: 1;
	background: #ccc;
	padding: 20px;
}
/* Style the list inside the menu */
nav ul {
	list-style-type: none;
	padding: 0;
}
/* Style the content */
article {
	-webkit-flex: 3;
	-ms-flex: 3;
	flex: 3;
	background-color: #FFFFFF;
	padding: 10px;
}
 @media (max-width: 600px) {
section {
	-webkit-flex-direction: column;
	flex-direction: column;
}
}
</style>
</head>
<body>
<div id="header-container">
  <div id="header">
    <div id="header-top">
      <div id="header-top-inner"> <a href="#"><img src="./images/phone.png"></a> <span id="foo">CALL US AT  706-781-5220</span> <a href="#"><img src="./images/map.png" style="padding-left:2px;"></a> <span id="foo">FIND OUR OFFICE</span> <a href="#"><img src="./images/farcebook.png" style="padding-right:2px;"></a> <a href="#"><img src="./images/goog.png" style="padding-right:2px;"></a> <a href="#"><img src="./images/camera.png"></a> </div>
    </div>
    <div id="header-bottom">
      <div id="header-bottom-inner">
        <div id="hbi-left"> <img src="./images/rkg_logo.png"> </div>
        <div id="hbi-center">
          <div id="nav-parent">
            <div class="dropdown">
              <div class="nondropbtn"><a href="https://thetechguysnc.wixsite.com/website">HOME</a></div>
            </div>
            <div class="dropdown">
              <div class="dropbtn">AREA INFO</div>
              <div class="dropdown-content dropdown__area-info"> <a href="http://www.therkg.com/area-attractions">Area Attractions</a> <a href="http://www.therkg.com/medical">Medical</a> <a href="http://www.therkg.com/murphy">Murphy</a> <a href="http://www.therkg.com/hiaw">Hiawassee</a> <a href="http://www.therkg.com/hayesville">Hayesville</a> <a href="http://www.therkg.com/blairsville">Blairsville</a> </div>
            </div>
            <div class="dropdown">
              <div class="dropbtn">PROPERTIES</div>
              <div class="dropdown-content dropdown__properties"> <a href="#">SEARCH MLS</a> <a href="#">RESIDENTIAL</a> <a href="#">WATERFRONT</a> <a href="#">ACREAGE</a> <a href="#">LOTS</a> </div>
            </div>
            <div class="dropdown">
              <div class="dropbtn">ABOUT</div>
              <div class="dropdown-content dropdown__about"> <a href="http://www.therkg.com/contact">CONTACT</a> <a href="http://www.therkg.com/agents">OUR TEAM</a> <a href="http://www.therkg.com/our-strategy">OUR STRATEGY</a> </div>
            </div>
            <div class="dropdown">
              <div class="nondropbtn"><a href="https://thetechguysnc.wixsite.com/website/meet-the-team">BLOG</a></div>
            </div>
          </div>
        </div>
        <div id="hbi-right"> <img src="./images/c21_seal.png"> </div>
      </div>
    </div>
  </div>
</div>
<!-- 
<div id="spacer"> </div>
End of header -->

<section>
  <nav>
    <h2>Navigation</h2>
    <ul>
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 2</a></li>
      <li><a href="#">Link 3</a></li>
    </ul>
  </nav>
  <article>
    <h2>Chuck Norris Facts:</h2>
    <p>Chuck Norris can slam a revolving door. Chuck Norris can have his cake and eat it, too. Chuck Norris is currently suing NBC, claiming Law and Order are trademarked names for his left and right legs Chuck Norris can slice meat so thin is only has one side, When Chuck Norris sends in his taxes, he sends blank forms and includes only a picture of himself, crouched and ready to attack. Chuck Norris has not had to pay taxes, ever Chuck Norris is the only man to ever defeat a brick wall in a game of tennis. Chuck Norris looks gift horses in the mouth. Chuck Norris doesn’t wear a watch. HE decides what time it is, The Great Wall of China was originally created to keep Chuck Norris out. It failed miserably.</p>
    <p>Chuck Norris will attain statehood in 2009. His state flower will be the Magnolia Chuck Norris has two speeds. Walk, and Kill Chuck Norris can win a game of Connect Four in only three moves If you spell Chuck Norris in Scrabble, you win. Forever. The leading causes of death in the United States are: 1. Heart Disease 2. Chuck Norris 3. Cancer.</p>
    <p>The chief export of Chuck Norris is Pain Chuck Norris is the reason you turn a light on when you enter a room. There is no theory of evolution. Just a list of animals Chuck Norris allows to live Chuck Norris received an electric shock, the result was Tron Chuck Norris is the reason why Waldo is hiding Police label anyone attacking Chuck Norris as a Code 45-11… a suicide, Fool me once, shame on you. Fool Chuck Norris once and he will roundhouse you in the face.</p>
    <p>There is no chin behind Chuck Norris’ beard. There is only another fist. If you spell Chuck Norris in Scrabble, you win. Forever If you ask Chuck Norris what time it is, he always says, “Two seconds ’til.” After you ask, “Two seconds ’til what?” he roundhouse kicks you in the face, Chuck Norris can speak a language inside of another language, A Handicapped parking sign does not signify that this spot is for handicapped people. It is actually in fact a warning, that the spot belongs to Chuck Norris and that you will be handicapped if you park there.</p>
    <p>Chuck Norris invented Kentucky Fried Chicken's famous secret recipe, with eleven herbs and spices. But nobody ever mentions the twelfth ingredient: Fear. Most people have 23 pairs of chromosomes. Chuck Norris has 72... and they're all poisonous Chuck Norris counted to infinity - twice, Chuck Norris once roundhouse kicked someone so hard that his foot broke the speed of light, went back in time, and killed Amelia Earhart while she was flying over the Pacific Ocean, Someone once videotaped Chuck Norris getting pissed off. It was called Walker: Texas Chain Saw Massacre Police label anyone attacking Chuck Norris as a Code 45-11... a suicide.</p>
    <p>Fool me once, shame on you. Fool Chuck Norris once and he will roundhouse you in the face There is no theory of evolution. Just a list of creatures Chuck Norris has allowed to live. The chief export of Chuck Norris is Pain, Chuck Norris does not have a cell phone because he hears everything Chuck Norris shops at Sam's Club, but leaves without having his receipt checked, Chuck Norris' hand is the only hand that can beat a Royal Flush. If you spell Chuck Norris in Scrabble, you win. Forever Police label anyone attacking Chuck Norris as a Code 45-11... a suicide.</p>
    <p>The leading causes of death in the United States are: 1. Heart Disease 2. Chuck Norris 3. Cancer. Chuck Norris once painted a self portrait of Winston Churchhill, The chief export of Chuck Norris is Pain. Chuck Norris doesn't go hunting... CHUCK NORRIS GOES KILLING.</p>
    <p>Chuck Norris once tried to run to the end of the horizon and tag it. He did it in 2 seconds Chuck Norris doesn't read books. He stares them down until he gets the information he wants. You either go to heaven or to Chuck Norris, You dont google Chuck Norris because one hit is fatal, When the Boogeyman goes to sleep every night, he checks his closet for Chuck Norris. When Chuck Norris surfs the Internet, he actually surfs on a virtual wave of 1's and 0's, The government calls water boarding torture. Chuck calls it a facial Outer space exists because it's afraid to be on the same planet with Chuck Norris. There is no theory of evolution. Just a list of animals Chuck Norris allows to live Chuck Norris doesn't wash his clothes, he disembowels them. Chuck Norris can lead a horse to water AND make it drink, Aa black hole is where Chuck Norris ripped the universe a new one.</p>
    <p>Chuck Norris can slam a revolving door. Chuck Norris can have his cake and eat it, too. Chuck Norris is currently suing NBC, claiming Law and Order are trademarked names for his left and right legs Chuck Norris can slice meat so thin is only has one side, When Chuck Norris sends in his taxes, he sends blank forms and includes only a picture of himself, crouched and ready to attack. Chuck Norris has not had to pay taxes, ever Chuck Norris is the only man to ever defeat a brick wall in a game of tennis. Chuck Norris looks gift horses in the mouth. Chuck Norris doesn’t wear a watch. HE decides what time it is, The Great Wall of China was originally created to keep Chuck Norris out. It failed miserably.</p>
    <p>Chuck Norris will attain statehood in 2009. His state flower will be the Magnolia Chuck Norris has two speeds. Walk, and Kill Chuck Norris can win a game of Connect Four in only three moves If you spell Chuck Norris in Scrabble, you win. Forever. The leading causes of death in the United States are: 1. Heart Disease 2. Chuck Norris 3. Cancer.</p>
    <p>The chief export of Chuck Norris is Pain Chuck Norris is the reason you turn a light on when you enter a room. There is no theory of evolution. Just a list of animals Chuck Norris allows to live Chuck Norris received an electric shock, the result was Tron Chuck Norris is the reason why Waldo is hiding Police label anyone attacking Chuck Norris as a Code 45-11… a suicide, Fool me once, shame on you. Fool Chuck Norris once and he will roundhouse you in the face.</p>
    <p>There is no chin behind Chuck Norris’ beard. There is only another fist. If you spell Chuck Norris in Scrabble, you win. Forever If you ask Chuck Norris what time it is, he always says, “Two seconds ’til.” After you ask, “Two seconds ’til what?” he roundhouse kicks you in the face, Chuck Norris can speak a language inside of another language, A Handicapped parking sign does not signify that this spot is for handicapped people. It is actually in fact a warning, that the spot belongs to Chuck Norris and that you will be handicapped if you park there.</p>
    <p>Chuck Norris invented Kentucky Fried Chicken's famous secret recipe, with eleven herbs and spices. But nobody ever mentions the twelfth ingredient: Fear. Most people have 23 pairs of chromosomes. Chuck Norris has 72... and they're all poisonous Chuck Norris counted to infinity - twice, Chuck Norris once roundhouse kicked someone so hard that his foot broke the speed of light, went back in time, and killed Amelia Earhart while she was flying over the Pacific Ocean, Someone once videotaped Chuck Norris getting pissed off. It was called Walker: Texas Chain Saw Massacre Police label anyone attacking Chuck Norris as a Code 45-11... a suicide.</p>
    <p>Fool me once, shame on you. Fool Chuck Norris once and he will roundhouse you in the face There is no theory of evolution. Just a list of creatures Chuck Norris has allowed to live. The chief export of Chuck Norris is Pain, Chuck Norris does not have a cell phone because he hears everything Chuck Norris shops at Sam's Club, but leaves without having his receipt checked, Chuck Norris' hand is the only hand that can beat a Royal Flush. If you spell Chuck Norris in Scrabble, you win. Forever Police label anyone attacking Chuck Norris as a Code 45-11... a suicide.</p>
    <p>The leading causes of death in the United States are: 1. Heart Disease 2. Chuck Norris 3. Cancer. Chuck Norris once painted a self portrait of Winston Churchhill, The chief export of Chuck Norris is Pain. Chuck Norris doesn't go hunting... CHUCK NORRIS GOES KILLING.</p>
    <p>Chuck Norris once tried to run to the end of the horizon and tag it. He did it in 2 seconds Chuck Norris doesn't read books. He stares them down until he gets the information he wants. You either go to heaven or to Chuck Norris, You dont google Chuck Norris because one hit is fatal, When the Boogeyman goes to sleep every night, he checks his closet for Chuck Norris. When Chuck Norris surfs the Internet, he actually surfs on a virtual wave of 1's and 0's, The government calls water boarding torture. Chuck calls it a facial Outer space exists because it's afraid to be on the same planet with Chuck Norris. There is no theory of evolution. Just a list of animals Chuck Norris allows to live Chuck Norris doesn't wash his clothes, he disembowels them. Chuck Norris can lead a horse to water AND make it drink, Aa black hole is where Chuck Norris ripped the universe a new one.</p>
  </article>
</section>

<!-- Start of footer -->
<div id="footer">
  <div id="footer-top">
    <div id="footer-top-inner">
      <div id="fti-left"> <span style="font-family: 'Open Sans Condensed', sans-serif; font-size: 19.5px;">TO CONTACT OUR SALES TEAM</span><br>
        <span style="font-family: 'Open Sans Condensed', sans-serif; font-size: 19.5px;">PLEASE CALL OR EMAIL US:</span> </div>
    </div>
  </div>
  <div id="footer-middle">
    <div id="footer-middle-inner">
      <div id="whodat-inner" class="marg-right"> Richard Kelley<br>
        706.781.5220<br>
        <a href="mailto:richard@theRKG.com">richard@theRKG.com</a> </div>
      <div id="whodat-inner" class="marg-right"> Emily Kelley Price<br>
        828.361.8323<br>
        <a href="mailto:emily@theRKG.com">emily@theRKG.com</a> </div>
      <div id="whodat-inner" class="marg-right"> Michael Anderson<br>
        828.361.5126<br>
        <a href="mailto:mca236@gmail.com">mca236@gmail.com</a> </div>
      <div id="whodat-inner"> Kim McClure<br>
        &nbsp;<br>
        <a href="mailto:kim@theRKG.com">kim@theRKG.com</a> </div>
    </div>
  </div>
  <div id="footer-bottom">
    <div id="footer-bottom-inner"> &copy;2019 by The Richard Kelley Group. Designed by <a href="https://thetechguysnc.com/" target="_blank">The Tech Guys</a>. </div>
  </div>
</div>
</body>
</html>
<!-- End of footer -->

You hadn’t contained the floats but as you are using flex you could have done that with flex anyway and avoid float problems. (I didn’t have time to go through and tidy everything up but the above is a start)

2 Likes
11

Always the problem with fixed headers. The margin to clear it has to be a magic number.

12

Doesn’t really have to be, but… the HTML/CSS workaround is objectionable to conscientious coders.

1 Like
13

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.