Search code examples
htmlcssnavbar

Navbar to Stay Still

I am currently styling out my navbar and have noticed whenever I make the page smaller by scrolling in the words move and the text from the navbar now heads into my paragraph.

How can I make this fixed so minimising the page won't lead to my navbar text will stick and not head into my paragraph in the homepage?

Navbar code:

nav {
 width: 100%;
 height: 80px;
 font-size: 15px;
}
 


    HTML code 
<nav>
<div class="wrap"></div>
<ul>
    <li><a href="index1.html">Happiness</a></li>
    <li><a href="Index2.html">Example 1</a></li>
    <li><a href="Index3.html">Example 2</a></li>
    <li><a href="Index4.html">Example 3</a></li>
    <li><a href="Index5.html">Example 4</a></li>
</ul>
</nav>
Solution

  • Use display flex in the nav container, then add a minMax to it. This should work.