CSS: navbar items on top of each other?

user_3970455 0
Viewed 504

in my page the navbar menu items show on top of each other.

enter image description here

Why?

Codepen:

https://codepen.io/ogonzales/pen/mdeNNLB

Code:

<nav class="navbar navbar-expand-md navbar-light fixed-top" style="height: 70px;" id="top-navbar">
    <img src="" alt="Ministerios Elim" width="2%" height="50%"/>
    <a class="navbar-brand" href="" style="margin-right: 5%;"><span style="margin-left: 3%;">Ministerios Elim</span></a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse"
        aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarCollapse">
        <ul>
            <li>
                <a href="/">Home</a>
            </li>
            {% for item in navigation.menu_items.all %}
                <li>
                    <a href="{{ item.link }}" class="nav-link" {% if item.open_in_new_tab %} target="_blank" {% endif %}>{{ item.title }}</a>
                </li>
            {% endfor %}
        </ul>
        <form class="form-inline ml-auto">
            <a href="" class="btn btn-outline-secondary">Ingresar</a>
            <a href="" class="btn btn-primary ml-2">Registro</a>
        </form>
    </div>
</nav>
css html
2 Answers

You can add "display: inline-block" to your <li>

user_129350400

This is the default behaviour of items inside an unordered list (ul), which are block elements. You need to make them inline-block if you want them to appear on one line.

For example, try adding this code to your CSS:

#navbarCollapse ul li {
  display: inline-block;
}

You will see that the items are no longer all underneath each other.

If the options still don't all appear on one line, you are probably having the problem (at least it looks to me like you would, from your codepen you have provided) that the width of your container is not large enough to fit all the elements in it.

Consider making this wider, or displaying less navigation options if design constraints and screen sizes don't allow any more.

user_121661160
Related