How to make a horizontal navigation bar? - html

Question

I am trying to make a website with a horizontal navigation bar. I found a useful reference, but I couldn't figure it out to be adopted to my current code since I am not an expert with HTML and CSS.
I like to create similar bar like this:
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color: #111;
}
And below are my current code:
{% block sidebar %}
<ul class="sidebar-nav">
<li>Home</li>
<li>All users</li>
<li>All productss</li>
<!-- <li>All vendors</li> -->
</ul>
{% endblock %}
.sidebar-nav {
margin-top: 20px;
padding: 0;
list-style: none;
}
================================================================
Thank you for your help, but none of below three answers worked.
Here I add more of my .css code. I am guessing "col-sm-2" ruled my current code, but don't know how to adjust it to make a horizontal navigation bar.
<div class="container-fluid">
<div class="row">
<div class="col-sm-2">
{% block sidebar %}
<ul class="sidebar-nav">
<li>Home</li>
<li>All users</li>
<li>All productss</li>
<!-- <li>All vendors</li> -->
</ul>
{% endblock %}
</div>
<div class="col-sm-10 ">{% block content %}{% endblock %}</div>
</div>
'''

Answer 1

The trick to get the list elements stack horizontally is to use the attribute float:left on the list items. Try adding something like this in your css-code
.sidebar-nav li {
float:left;
}
By writing .sidebar-nav li you apply the style to all list-items (li) that is a child of sidebar-nav.

Answer 2

Update:
Now that we know you're using bootstrap, you can make a horizontal navbar just by adding a few classes:
The following code gives you a navbar with beautiful padding and margins:
Bootstrap navbar reference: https://getbootstrap.com/docs/4.3/components/navs/
<div class="container-fluid">
<div class="row">
<div class="col-12">
<!--'col-sm-12' to 'col-12' for 100% width -->
{% block sidebar %}
<ul class="sidebar-nav nav">
<li class="nav-item">
<a class="nav-link" href="{% url 'index' %">Home</a>
</li>
<li class="nav-item"><a class="nav-link" href="">All users</a></li>
<li class="nav-item">
<a class="nav-link" href="">All productss</a>
</li>
<!-- <li class="nav-item"><a class="nav-link" href="">All vendors</a></li> -->
</ul>
{% endblock %}
</div>
<div class="col-sm-10 ">{% block content %}{% endblock %}</div>
</div>
</div>
The previous 'non-bootstrap' answer:
The goal is to align the "li" items horizontally so a simple and easy way is :
.sidebar-nav li{
display: inline;
}
Display property reference:
https://www.w3schools.com/cssref/pr_class_display.asp

Answer 3

EDIT: I Assume you are using the bootstrap grid system.
The class col-sm-2 means your div will occupy 1/6th or 16.66% of the total container width on devices having screen width greater than 767px.
If you want your menu items to occupy the entire screen width, replace col-sm-2 with col-sm-12.
My preferred way to do this is using flex.
.sidebar-nav {
display: flex;
}
This will ensure all elements inside the ul are displayed in a single line and they all have the same height which is equal to the height of the ul. Hope this helps.