Is it possible to stack navbar items in CSS?

I'm facing an issue with my navbar menu items overlapping on top of each other.

What could be the reason behind this?

Codepen Link:

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

Code Snippet:

<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>
htmlcss

Answer №1

When items are placed inside an unordered list (ul), they will automatically become block elements by default. To make them appear on the same line, you need to change their display property to inline-block.

For instance, you can add this code to your CSS:

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

By doing this, you'll notice that the items will now align horizontally instead of vertically.

If your options are still not displaying on one line, it's possible that your container's width is too small to accommodate all the elements. In such cases, consider expanding the width of the container or reducing the number of navigation options based on design restrictions and screen sizes.

Answer №2

To enhance the appearance of your <li> element, consider including "display: inline-block" as a style option.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using JQuery, identify cells located in the first column of a table excluding those in the header section

In the past, I had code that looked like this: $(elem).parents('li').find(...) I used this code when elem was an item in a list, making it easy to reference all items in the list. But now, I've made some changes and decided to use a table ...

javascriptjqueryhtmljquery-uijquery-selectors

Which JSF element is capable of displaying a <div> element?

For example, h:inputText will display an "input type='text'". Which JSF tag is used to render a "div" element? ...

jsfhtml

The content contained within the .each loop within the click event is only executed a single time

While working on coding a menu opening animation, I encountered an issue today. Upon clicking the menu button, the menu opens and the elements inside receive an added class (resulting in a fade-in effect). Clicking the menu button again should close the ...

javascriptjquerycss

AngularJS: intercepting custom 404 errors - handling responses containing URLs

Within my application, I have implemented an interceptor to handle any HTTP response errors. Here is a snippet of how it looks: var response = function(response) { if(response.config.url.indexOf('?page=') > -1) { skipException = true; ...

javascripthtmlangularjs

Guide to updating the value of an input field with Selenium in Python

I have an input element that I need to clear its current value and input a new one. The HTML structure is as follows: <input class="input-mini" type="text" name="daterangepicker_start" value=""> To locate this element, I used the following code: ...

pythoncssselenium

How can I implement changing the page background color based on different routes in ReactJS and React Router?

Is there a way to change the background color of the browser when navigating to a new route in ReactJS and React Router? Check out my tips below that I discovered during my experimentation: I have managed to implement this on individual page views using & ...

jquerycssreactjs

Comprehending the importance of a selector in a dropdown menu

Trying to figure out how to create a drop-down menu from CSS tricks, I found this code snippet: <nav role="navigation"> <ul> <li><a href="#">One</a></li> <li><a href="#"&g ...

htmlcss

Changing the width of an SVG path from 0 to 100% using CSS

I have an SVG design of wires that I want to animate the width from "0 to 100%", but I'm having trouble achieving this effect. It's easy to do with a div element, but not with an SVG image. Below is my code snippet: svg path { animation: f ...

htmlcssanimationsvgcss-animations

Troubleshooting common issues with PHP's simple HTML DOM parser

I've encountered an issue while working on a scraper for a website that involves crawling through links. The error message I'm receiving is as follows: PHP Fatal error: Uncaught Error: Call to a member function find() on null in D:\Projekti ...

phphtml

Selenium Python can be used to save a web page as a

Trying to print a webpage as a PDF with headers and footers to mimic the output from Google Chrome. Any suggestions? Experimented with PhantomJS but couldn't get it to include headers and footers. from selenium import webdriver import selenium def ...

pythonseleniumpdfhtml

Utilizing CSS to Select Specific Sections

I'm curious about how to target a section element with a specific id like #dress in CSS3. Here is my code snippet: <section id="dress"> <p>Lorem Ipsum..................................of Lorem Ipsum.<> </section> Here's ...

css

Issue with child div exceeding 100% height within CSS Flexbox causing inconsistency in Firefox and Chrome browsers

I am facing a challenge trying to make a div resize to match its parent's height using flexbox. This issue seems to occur only in Chrome (48), as it displays correctly in Firefox (44). You can view the example on Fiddle: https://jsfiddle.net/jvilla/k ...

htmlcssflexbox

What is the best way to maintain the formatting of a textarea in the database?

My HTML form includes a text area and a functionality to save the data into a database upon submission. The issue arises when the saved data is retrieved from the database, as the original formatting of the text gets altered. For instance: "This is a text ...

mysqlhtml

Is it possible in Javascript to trace the origins of a particular element's property inheritance for debugging purposes?

I'm currently dealing with an issue where the computed style font-size of a particular element is "16px". I've been attempting to pinpoint where in the CSS or JavaScript this font size setting is coming from, specifically within one of its parent ...

javascripthtmlcssdebuggingproperties

Having trouble accessing the value of an item in a dropdown box on a website

I am currently developing a webpage using HTML5 and Knockout Js. I am facing an issue where I am unable to retrieve the ID of the selected item from a dropdown box in order to insert a value into an SQL table. As an example, consider the following SQL tab ...

javascriptjqueryhtmlsqlknockout.js

Use Vue.js to shorten the number of decimal places and include commas in numerical values

How can I best parse a long number retrieved from a JSON using VueJS within a for loop? The JSON data is used in a v-for prop to create Li elements for a side navigation. I attempted to use vue-numeric without success since the project does not utilize ECM ...

htmlvue.jsvuejs2

What steps can I take to ensure that my logos remain visible even when I close the menu and resize the window?

On my website, I have a menu of logos that are clickable. These logos always display except on smaller screens, where they need to be toggled to show using a hamburger menu. The menu toggles fine when it is on a smaller screen, but there is an issue when y ...

javascripthtmlcssdomresponsive-design

Place a Three.js scene within a jQuery modal dialogue box

I am attempting to integrate a Three.js scene into a jQuery modal window. The objective is to utilize the Three.js scene in a larger window size. This scene should be displayed after clicking on an image that represents the scene in a smaller dimension. Y ...

javascriptjquerycsscanvasthree.js

Is it possible for iText 5 to convert PDF files into HTML format?

My latest project involved using iText 5 to generate a visually appealing report complete with tables and graphs. Now I'm curious to know if iText also has the capability to convert PDF files into HTML format. If it does, how would one go about doing ...

htmlpdfitext

Is it feasible to utilize the HTML5 video tag in conjunction with a JSON callback?

Curious about the possibility of a video page layout featuring a main screen and smaller clickable screens below it. When clicking on one of the smaller screens, the main screen would display the selected video, similar to YouTube. We have obtained data f ...

javascriptjqueryjsonhtmlhtml5-video