css Question posted in
Some basic documentation can be found here.

Css – I have a long Menu in line, i don't want that collapse but i want continue on the next line when i make little

Sorry I Have this situation:

I have a long menu but I don’t want that collapse, I want just continue on the next line
It is doing that but the result is horrible

This is the css

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

.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;
}

and this is the result

menu

That is horrible… I want that second line have distance from the first and don’t overlay.

I have put margin top but nothing is happening….

Tags:

2

Answers


  1. 0

    You can try bootstrap navbar that probably solve your menu item problem. You can refer w3 school for bootstrap navbar.

    Login or Signup to reply.
  2. 0

    The anchor tag wont respect height by default, give it a display of inline-block to have it calculate it’s height in 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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search