My menu stretches out in a single line, and I prefer it not to collapse but instead continue on to the next line when it becomes smaller

Unfortunately, I'm facing this issue:

I have a lengthy menu that is extending to the next line instead of collapsing, but it is not looking good.

Here is the CSS code:

.navigation li {
    display: inline;
    margin-top: 5px;
}

.navigation a:link {
    margin: 3px;
    padding: 4px;
    color: #ffffff;
    border: 2px solid #2304d1;
    font-size: 30px;
    text-decoration: none;
}

And here is the result:

https://i.sstatic.net/01REMECY.png

The output is quite messy. I want the items on the second line to have some space between them and not overlap with the first line.

Even after adding margin top, nothing seems to change...

cssmenu

Answer №1

To ensure the anchor tag respects height, set its display property to inline-block so that it calculates its height within the layout.

body {
  margin: 0;
}

label {
  user-select: none;
}

.navigation {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  padding: 10px;
  gap: 10px;
}

.navigation li {
  list-style: none;
}

.navigation a {
  background: lightblue;
  padding: 10px 20px;
  text-decoration: none;
  font-size: 18pt;
  display: inline-block;
}

.navigation a:hover {
  background: lightgreen;
}

#revert-a:checked ~ .navigation a {
  display: inline;
}
<label for="revert-a">
  Revert to inline elements
</label>
<input type="checkbox" id="revert-a" />

<ul class="navigation">
  <li><a href="#">home</a></li>
  <li><a href="#">car</a></li>
  <li><a href="#">plane</a></li>
  <li><a href="#">food</a></li>
  <li><a href="#">hair</a></li>
  <li><a href="#">noise</a></li>
  <li><a href="#">home</a></li>
  <li><a href="#">car</a></li>
  <li><a href="#">plane</a></li>
  <li><a href="#">noise</a></li>
  <li><a href="#">home</a></li>
  <li><a href="#">car</a></li>
  <li><a href="#">plane</a></li>
  <li><a href="#">food</a></li>
  <li><a href="#">hair</a></li>
  <li><a href="#">noise</a></li>
</ul>

Answer №2

Special thanks to async await

I made a small addition:

display: inline-block;

and now my project is functioning exactly how I envisioned.

.navigation a:link {
    margin-top: 3px;
    margin-right: 3px;
    margin-bottom: 3px;
    margin-left: 3px;
    padding: 4px;
    color: #ffffff;
    border: 2px solid #2304d1;
    font-size: 30px;
    text-decoration: none;
    display: inline-block;
}

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

I'm having trouble getting my <aside> HTML tag to align properly within my grid section

I'm struggling with setting up grids. I have defined the boundaries and everything seems to fall into place within the grid, except for my aside element that I want to appear on the right side of the screen. Interestingly, this issue arises when using ...

htmlcsssasscss-grid

Imitate adjustment of orientation without the need to resize the browser window

Is there a way to simulate page portrait orientation on a PC browser without resizing the window? In my HTML code, I have a <div> element that displays content dynamically based on screen orientation. Is it possible to use JavaScript to trick this & ...

javascripthtmlcss

Creating a carousel similar to the one on Skipperlimited's website can be achieved

I am working on a project and I would like to create a design similar to the one found at Specifically, I am interested in replicating the carousel of images and the rotating carousel within their logo. Can anyone provide guidance or suggestions on how to ...

jqueryhtmlcssbootstrap-4

What is the best way to add spacing between items in an unordered list using HTML and CSS?

I have put together a list that I want to display with lines in between each word... here's the progress so far: #header { position: absolute; width: 100%; } #navbar { position: relative; padding-top: 0.8em; padding-left: 31em; } ul { l ...

htmlcss

How to fix Bootstrap 4 Card Header and Form-Control wrapping onto a new line

I am currently working with Bootstrap 4 and facing an issue with the Card Header. When I add several buttons, they align in one row, but when I add a textbox, it always breaks into a new line. Can anyone provide assistance with this? I would like to have a ...

cssbootstrap-4adminlte

Adjusting the styles of dual navigation bars in the Adelle theme

I encountered an issue where my second navigation menu (nav2) is adopting the appearance of the first menu (nav1), and I'm having trouble resolving it. However, the content of the second menu is different. Snippet from header.php: <nav class="na ...

phpcsswordpress

Struggling with pagination when dealing with numerous identical HTML elements within a single file?

I am in the process of creating a web app for a small CTF that will be held at my school. I have designed a webpage to display the problems, but currently they are all lined up in a long row. This is how it's set up: <body class="main-body"&g ...

htmlcssflaskpaginationjinja2

Display specific content according to the hash in the URL

I have a website with a page (/categories.html) that contains around 50 p elements: <p id='BCI'>Blue_colored_items</p> <p id='RCI'>Red_colored_items</p> ... What I want is for the page to only display: Blue_co ...

javascriptjqueryhtmlcsshash

Tips for implementing a slide up animation on a dynamic element

I have one div and a button. When the button is clicked, I am appending another div. After appending the second div, I want to add a slide-up animation to the first div and a slide-down animation to the second using jQuery. <div class="main"> & ...

javascriptjqueryhtmlcssanimation

Designing a custom CSS for enhancing the look of the orchard menu

Right now, I am in the process of implementing a layout that is already established in an MVC4 project. I am facing challenges in figuring out how to create a custom menu in the latest version of Orchard (using the source version so it runs in Visual Stud ...

c#.netcssasp.net-mvcorchardcms

Should CSS variables be defined within the render method of a React component?

Yesterday, I mistakenly created and deleted a post. Now, I am facing an issue with creating a component that requires specific styling. The problem arises when the componentDidMount() method causes flickering during the rendering process, as it takes some ...

javascripthtmlcssreactjscss-variables

What's the best way to make two buttons appear side by side on a webpage?

I need to have my two buttons, Update and Cancel, displayed next to each other on the same line. Currently, there is a gap between the two buttons as shown in the attached image. Below is the HTML code I am using: <div class="form_block span2"> ...

htmlcss

The onload function in jQuery is not functioning properly when the page is refreshed

I'm just starting out with jquery and I have a simple project in mind. The idea is to have two pictures stacked on top of each other, but I want the page to start showing the second picture first (at a specific scroll point). Then as the user scrolls ...

javascriptjqueryhtmlcssonload

tapping on the division and sliding it to and fro

I am trying to achieve a functionality where clicking a div will move another div to the right by 0, and on clicking the div again, the second div will move to the right by -200. However, I am facing issues getting it to work properly. $(document).ready(f ...

jquerycss

When inline-block elements wrap onto a new line, they expand to full width

Upon my realization, an inline-block element will expand to 100% width if there are more child elements than can fit on one line: <div style="background-color:red;padding:5px"> <div style="display:inline-block;background-color:green;padding:5 ...

htmlcss

CSS Only flyout navigation - reveal/hide with a tap or click

I want to make adjustments to a CSS-only menu that has a horizontal flyout effect triggered by hovering. I am looking to achieve the same effect on touch or tap - meaning, one tap to open the menu and another tap to close it. Is it possible to accomplish ...

css

Develop dynamic and stylized CSS using PHP within the Laravel framework

I am experiencing an issue with creating CSS files in Laravel within my controller. When I try to return the result, it shows up as a normal text file instead of a CSS file. In my routes.php file, I have: Route::get('/css/{css}.css', 'File ...

phphtmlcsslaravel

Difficulty with font rendering across different web browsers such as Firefox, Chrome, and Opera

Visit the following website: I have implemented font-face on my site: @font-face { font-family: 'SegoeUI'; src: url('{site_url}themes/site_themes/agile_records/fonts/segoeui.eot?') format('eot'), url(' ...

cssfont-face

I'm having trouble changing the background color on my HTML Bootstrap website. Is there a way to easily add social network buttons as well?

I'm encountering a problem here. One of my friends assisted me with Bootstrap elements for my website, but after switching my site to Bootstrap, I am unable to change the background color on my website. Can someone lend a hand? Much appreciated! Also, ...

csshtmltwitter-bootstrap

Show secret information once radio button is selected through JQuery code

I am dealing with two checkboxes ABC XYZ When the ABC checkbox is checked, the abc content div is displayed, and when the XYZ checkbox is checked, the xyz content div is shown. Everything works fine, except that if the ABC checkbox is checked by defaul ...

jqueryhtmlcss