Minimize the vertical gap between menu items when they wrap onto a new line

Question

Minimize the vertical gap between menu items when they wrap onto a new line

When examining the screenshot of the website, you'll notice a considerable space between the first and second rows of menu items. I'm aiming to minimize this spacing as much as possible.

The following CSS pertains to this issue:


.gva-navigation {
  width: 100%;
  height: 50px;
  margin: 0;
  z-index: 99;
  position: relative;
}

#wrap {
  height: 50px;
  padding: 0;
  margin: 0;
  position: absolute;
}

.gva-navigation li {
  height: 25;
  width: auto;
  float: left;
  text-align: center;
  list-style: none;
  padding: 0;
  margin: 0;
}

.gva-navigation a {
  display: block;
}

.gva-navigation > ul > li > ul {
  display: none;
}

.gva-navigation > ul > li:hover > ul {
  display: inline;
}

How can we reduce the vertical spacing between the top menu items and those that wrap onto the second line or row?

html css whitespace

Answer 1

Answer №1

It would be beneficial to include the following CSS code:

#wrap {
  height: 50px;
  padding: 0;
  margin: 0;
  position: absolute; /* This ensures that the menu does not interfere with other elements */
  border-right: 1px solid #54879d;
  line-height:12px
}

Answer 2

It would be beneficial to include the following CSS code:

#wrap {
  height: 50px;
  padding: 0;
  margin: 0;
  position: absolute; /* This ensures that the menu does not interfere with other elements */
  border-right: 1px solid #54879d;
  line-height:12px
}

Answer 3

Answer №2

If you need to adjust the size in your CSS, just make a small change. The original code had height: 25;, but it should be updated to height: 25px. Give this revised snippet a try.

.gva-navigation li {
    height: 25px;
}

Answer 4

If you need to adjust the size in your CSS, just make a small change. The original code had height: 25;, but it should be updated to height: 25px. Give this revised snippet a try.

.gva-navigation li {
    height: 25px;
}

Minimize the vertical gap between menu items when they wrap onto a new line

Answer №1

Answer №2

Similar questions

What is the best way to use jQuery to increment the number in an input field by a specific value?

Tips on clearing notices and warnings at the bottom of a PHP questionnaire

Place the image at the center of the div element

Emphasis and dimension of form

Does using .detach() eliminate any events?

The function .classList.remove() is effective when applied to one element, but fails to work on a different element

What methods can be used to choose specific rows while styling columns with CSS?

Loading CSS files conditionally in Angular2's index.html

What could be causing the dysfunction of the jQuery class adding function?

Using Special Fonts in Visual Studio 2013

What is the method in jQuery to add a left alignment style to every element on the page?

Working towards ensuring my website is responsive

encasing a snippet of code within a customized hyperlink

I'm interested in utilizing Angular JS $anchorScroll to quickly navigate to the top of a page by using <a href>

Establish a buffering system for the <video> element

Learn how to smoothly scroll to the top of a div by clicking on a team name

Inject pure HTML code into a react div

What is the correct way to align my checkboxes with their corresponding labels?

Display a division upon clicking a button using AngularJS and HTML

Placing text at the bottom of a backdrop image