Jordan Miguel Jordan Miguel - 2 years ago 166
CSS Question

css displaying content above fixed header

How can I display content above my fixed header?

I simply want to create a 'outer header' above my main navigation header that displays a few links to social sites.

I've created the HTML markup but I can't translate this visually using CSS.

Below is the code - or check out this codepen.

Essentially, I want the

social ul with list items 1,2,3 & 4
to be above the global nav



* {
box-sizing: border-box;
}

ul,
ol {
list-style: none;
margin: 0px;
padding: 0px;
}

.header {
position: fixed;
width: 100%;
top: 0;
border-bottom: 1px solid #ddd;
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
justify-content: space-between;
}

.menu li {
padding-right: 50px;
margin-right: 20px;
}

.header .menu ul {
margin: 0;
padding: 0;
}

.header .menu ul li {
display: inline-block;
list-style: none;
}

.header .menu ul li a {
text-decoration: none;
display: block;
padding: 30px 20px;
}

<div id="global-social" class="outer-header col-1">
<div class="container">
<nav>
<ul class="social">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</nav>
</div>
</div>
<div id="global-navigation">
<!-- Global Header -->
<header class="header">
<div class="logo">
<a href="">
<!--<img src="images/rare-logo.png">-->
<h1>Rare Select</h1>
</a>
</div>
<nav class="menu">
<ul>
<li><a href="">HOME</a></li>
</ul>
</nav>
</header>
</div>




Answer Source

Your header is using a fixed position so I would advise moving the header down equal to it's height (provided the height doesn't change) E.G 80px in this case.

.header {
    top: 80px;
}

* {
  box-sizing: border-box;
}

ul,
ol {
  list-style: none;
  margin: 0px;
  padding: 0px;
}

.header {
  position: fixed;
  width: 100%;
  top: 80px;
  border-bottom: 1px solid #ddd;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}

.menu li {
  padding-right: 50px;
  margin-right: 20px;
}

.header .menu ul {
  margin: 0;
  padding: 0;
}

.header .menu ul li {
  display: inline-block;
  list-style: none;
}

.header .menu ul li a {
  text-decoration: none;
  display: block;
  padding: 30px 20px;
}
<div id="global-social" class="outer-header col-1">
  <div class="container">
    <nav>
      <ul class="social">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
      </ul>
    </nav>
  </div>
</div>
<div id="global-navigation">
  <!-- Global Header -->
  <header class="header">
    <div class="logo">
      <a href="">
        <!--<img src="images/rare-logo.png">-->
        <h1>Rare Select</h1>
      </a>
    </div>
    <nav class="menu">
      <ul>
        <li><a href="">HOME</a></li>
      </ul>
    </nav>
  </header>
</div>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download