CODEWITHSUNDEEP
htmlcssnav
JordanMiguel
JordanMiguel

Reputation: 740

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>

Upvotes: 0

Views: 1342

Answers (2)

sol
sol

Reputation: 22949

If you want both menus to stay fixed I'd suggest wrapping them both in a new container (in the snippet below I've given this a class wrapper).

Add the position property to this class instead.

* {
  box-sizing: border-box;
}

.wrapper {
  position: fixed;
  width: 100%;
  top: 0;
  border-bottom: 1px solid #ddd;
}

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

.header {
  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 class="wrapper">
  <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>
</div>

Upvotes: 2

ProEvilz
ProEvilz

Reputation: 5455

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>

Upvotes: 1

Related Questions