How to fix element at top in CSS? - html

Question

I have problem with position on CSS.
I create 3 elements: a menu navbar, a category bar (to filter content), and content.
It looks like this:
*Menu `navbar`*
Home About US
*Category bar*
Category 1 Category 2
*Content*
Lorem ipsum dolor sit amet consectetur adipisicing elit
When scrolling down, the menu show is hidden, and category bar will be fixed on top.
Screenshot:
When I add CSS code to fix category bar at top:
ul#filters {
overflow: hidden;
background-color: #333;
position: fixed;
width: 100%;
}
ul#filters li {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
It looks like:
I expected output is:
When loading page success, like the first image in my answer. When the user scrolls down, menu hidden, category bar fix top, content at below category bar.
Like this:
Note: change menu bar to category bar
Here is my code:
ul#filters {
overflow: hidden;
background-color: #333;
position: fixed;
width: 100%;
}
ul#filters li {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-fixed green child-nav">
<div class="container-fluid">
<div class="container">
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse ">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>About US</li>
</ul>
</div><!-- /.navbar-collapse -->
</div>
</div>
</nav>
<div class="container">
<ul id="filters" class="loaiduan clearfix">
<li class="li-selected">
Category 1
</li>
<li class="li-selected">
Category 2
</li>
</ul>
<div id="container" class="list">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit temporibus cumque impedit repellendus vero, modi voluptatem id dignissimos assumenda quis fuga suscipit provident ab fugiat dolores at numquam dolorem adipisci?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit temporibus cumque impedit repellendus vero, modi voluptatem id dignissimos assumenda quis fuga suscipit provident ab fugiat dolores at numquam dolorem adipisci?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit temporibus cumque impedit repellendus vero, modi voluptatem id dignissimos assumenda quis fuga suscipit provident ab fugiat dolores at numquam dolorem adipisci?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit temporibus cumque impedit repellendus vero, modi voluptatem id dignissimos assumenda quis fuga suscipit provident ab fugiat dolores at numquam dolorem adipisci?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit temporibus cumque impedit repellendus vero, modi voluptatem id dignissimos assumenda quis fuga suscipit provident ab fugiat dolores at numquam dolorem adipisci?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit temporibus cumque impedit repellendus vero, modi voluptatem id dignissimos assumenda quis fuga suscipit provident ab fugiat dolores at numquam dolorem adipisci?</p>
</div>
</div>

Answer 1

Just use bootstrap class (navbar-fixed-top)
Example:
<nav class="navbar navbar-fixed-top green child-nav">
Hope to help!

Answer 2

I'd use Bootstrap's navbar.
You can make stick it on top with just one parameter, plus it's responsive.
Let me know if it works for you.