Html Question posted in
Some basic documentation can be found here.

I have a working CSS only navbar with hamburger menu but all other HTML content displays inline and not as block elements

I’m trying to get a CSS only repsponsive navbar working, I’ve set a breakpoint that displays a hamburger menu at 768px and below, I have the navbar working fine but when I try to add any content below the navbar when the breakpoint is above 768px the content displays inline and not as a block element.

Like this:

Screenshot of H1 tag displaying inline

I’ve tried adding a CSS grid hoping it would separate the navbar from the other elements.

.header {
  width: 100%;
  z-index: 3;
}

.header ul {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
}

.header li {
  color: #ffffff;
  font-weight: 700;
  font-size: 22px;
}

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

.header ul a:hover {
  color: #BDBDBD;
}

.header .logo {
  float: left;
  display: block;
  font-size: 2em;
  padding: 10px 20px;
}

.header .menu {
  clear: both;
  max-height: 0;
  transition: max-height .2s ease-out;
}

.header .menu-icon {
  padding: 28px 20px;
  position: relative;
  float: right;
  cursor: pointer;
}

.header .menu-icon .nav-icon {
  background: #cccccc;
  display: block;
  height: 2px;
  width: 18px;
  position: relative;
  transition: background .2s ease-out;
}

.header .menu-icon .nav-icon:before {
  background: #cccccc;
  content: "";
  display: block;
  height: 100%;
  width: 100%;
  position: absolute;
  transition: all .2s ease-out;
  top: 5px;
}

.header .menu-icon .nav-icon:after {
  background: #cccccc;
  content: "";
  display: block;
  height: 100%;
  width: 100%;
  position: absolute;
  transition: all .2s ease-out;
  top: -5px;
}

.header .menu-btn {
  display: none;
}

.header .menu-btn:checked~.menu {
  max-height: 240px;
}

.header .menu-btn:checked~.menu-icon .nav-icon {
  background: transparent;
}

.header .menu-btn:checked~.menu-icon .nav-icon:before {
  transform: rotate(-45deg);
  top: 0;
}

.header .menu-btn:checked~.menu-icon .nav-icon::after {
  transform: rotate(45deg);
  top: 0;
}

@media (min-width:48em) {
  .header li {
    float: left;
  }
  .header li a {
    padding: 20px 30px;
  }
  .header .menu {
    clear: none;
    float: right;
    max-height: none;
  }
  .header .menu-icon {
    display: none;
  }
}
<header class="header">
  <a href="/" class="logo">LK</a>
  <input class="menu-btn" type="checkbox" id="menu-btn">
  <label class="menu-icon" for="menu-btn"><span class="nav-icon"></span></label>
  <ul class="menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">Browse</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</header>

<div>
  <h1>This is a heading</h1>
</div>
Tags:

3

Answers


  1. 0

    Hello to keep the same effect and display the h1 on a new tag i would suggest to add min-height as follows:
    .header {
    display: block;
    min-height: 5vh; // adjust it as you need
    z-index: 3;
    }

    Login or Signup to reply.
  2. 0

    The problem arises from the float.

    You need to clear after it.

    This snippet just puts a clear: both into the div as a demo.

    .header {
  width: 100%;
  z-index: 3;
}

.header ul {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
}

.header li {
  color: #ffffff;
  font-weight: 700;
  font-size: 22px;
}

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

.header ul a:hover {
  color: #BDBDBD;
}

.header .logo {
  float: left;
  display: block;
  font-size: 2em;
  padding: 10px 20px;
}

.header .menu {
  clear: both;
  max-height: 0;
  transition: max-height .2s ease-out;
}

.header .menu-icon {
  padding: 28px 20px;
  position: relative;
  float: right;
  cursor: pointer;
}

.header .menu-icon .nav-icon {
  background: #cccccc;
  display: block;
  height: 2px;
  width: 18px;
  position: relative;
  transition: background .2s ease-out;
}

.header .menu-icon .nav-icon:before {
  background: #cccccc;
  content: "";
  display: block;
  height: 100%;
  width: 100%;
  position: absolute;
  transition: all .2s ease-out;
  top: 5px;
}

.header .menu-icon .nav-icon:after {
  background: #cccccc;
  content: "";
  display: block;
  height: 100%;
  width: 100%;
  position: absolute;
  transition: all .2s ease-out;
  top: -5px;
}

.header .menu-btn {
  display: none;
}

.header .menu-btn:checked~.menu {
  max-height: 240px;
}

.header .menu-btn:checked~.menu-icon .nav-icon {
  background: transparent;
}

.header .menu-btn:checked~.menu-icon .nav-icon:before {
  transform: rotate(-45deg);
  top: 0;
}

.header .menu-btn:checked~.menu-icon .nav-icon::after {
  transform: rotate(45deg);
  top: 0;
}

@media (min-width:48em) {
  .header li {
    float: left;
  }
  .header li a {
    padding: 20px 30px;
  }
  .header .menu {
    clear: none;
    float: right;
    max-height: none;
  }
  .header .menu-icon {
    display: none;
  }
}
    <header class="header">
  <a href="/" class="logo">LK</a>
  <input class="menu-btn" type="checkbox" id="menu-btn">
  <label class="menu-icon" for="menu-btn"><span class="nav-icon"></span></label>
  <ul class="menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">Browse</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</header>

<div style="clear: both;">
  <h1>This is a heading</h1>
</div>
    Login or Signup to reply.
  3. 0

    you can inspect your html+css with chrome dev tool.

    we can see in the picture:

    1. your content is block
    2. all content of header is float, so all content is not in normal flow and header has height: 0;
    3. with 1 and 2. content will show front the top of the page.
    4. in your screen shot. the page is not width enough to display all text and wrap to the next line. which makes you think is is inline.

    enter image description here

    so we can solve this:

    .header {
   overflow: hidden
}

    this trigger BFC in header. so it can contain float children and has a normal height

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search