Kleber Mota Kleber Mota - 6 months ago 19
CSS Question

Navbar display broken in two parts

Anyone can spot what's wrong with this html/code? When I view this page on the browser, the navbar is display broken in two parts, and the left menu is displayed behind the navbar:

html

<ul>
<li><a href="#" class="title">Loja</a></li>
</ul>
<ul class="right">
<li><a href="#" class="user"/>username</li>
<li><a href="#">logout</a></li>
</ul>
</header>

<main>
<aside>
<ul>
<li><a href="#">blablabla</a></li>
<li><a href="#">blablabla</a></li>
<li><a href="#">blablabla</a></li>
<li><a href="#">blablabla</a></li>
<li><a href="#">blablabla</a></li>
<li><a href="#">blablabla</a></li>
<li><a href="#">blablabla</a></li>
<li><a href="#">blablabla</a></li>
<li><a href="#">blablabla</a></li>
<li><a href="#">blablabla</a></li>
</ul>
</aside>

<article>
</article>
</main>


css

header {
position: sticky;
top: 0;
background-color: #333;
}

header ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
float: left;
}

header ul.right {
float: right;
}

header li {
float: left;
}

header li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-family: 'Oxygen Mono';
}

header li a:hover {
background-color: #111;
}

header li.active {
background-color: #4CAF50;
}


jsfiddle: https://jsfiddle.net/klebermo/ch6gtj3p/3/

Answer

You can also set position to absolute to avoid the left menu to always display behind the navbar.

@import url(https://fonts.googleapis.com/css?family=Oxygen+Mono|Special+Elite
                |Luckiest+Guy|Slabo+27px|Open+Sans);

header {
  position: absolute;
  top: 0;
  background-color: #333;
  width:100%;
}

header ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    float: left;
}

header ul.right {
  float: right;
}

header li {
  float: left;
}

header li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-family: 'Oxygen Mono';
}

header li a:hover {
    background-color: #111;
}

header li.active {
    background-color: #4CAF50;
}

aside ul {
    list-style-type: none;
    margin: 80px 0;
    padding: 0;
    width: 200px;
    background-color: #f1f1f1;
}

aside li a {
    display: block;
    color: #000;
    padding: 8px 0 8px 16px;
    text-decoration: none;
    font-family: 'Special Elite', cursive;
}

/* Change the link color on hover */
aside li a:hover {
    background-color: #555;
    color: white;
}

aside li.active {
    background-color: #4CAF50;
}

.title {
  font-family: 'Luckiest Guy', cursive;
}

.user {
  font-family: 'Slabo 27px', serif;
}

div.main {
  font-family: 'Open Sans', sans-serif;
}

button {
	overflow: visible;
	width: auto;
}

button.link {
	font-family: "Verdana" sans-serif;
	font-size: 1em;
	text-align: left;
	color: blue;
	background: none;
	margin: 0;
	padding: 0;
	border: none;
	cursor: pointer;
  -moz-user-select: text;
}

button.link span {
	text-decoration: underline;
}
button.link:hover span,
button.link:focus span {
	color: black;
}
<body>
    <header>
      <ul>
        <li><a href="#" class="title">Loja</a></li>
      </ul>
      <ul class="right">
        <li><a href="#" class="user"/>username</li>
        <li><a href="#">logout</a></li>
      </ul>
    </header>

    <main>
      <aside>
        <ul>
          <li><a href="#">blablabla</a></li>
          <li><a href="#">blablabla</a></li>
          <li><a href="#">blablabla</a></li>
          <li><a href="#">blablabla</a></li>
          <li><a href="#">blablabla</a></li>
          <li><a href="#">blablabla</a></li>
          <li><a href="#">blablabla</a></li>
          <li><a href="#">blablabla</a></li>
          <li><a href="#">blablabla</a></li>
          <li><a href="#">blablabla</a></li>
        </ul>
      </aside>

      <article>
      </article>
    </main>
  </body>