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

Effective Ways to Redirect During or After Executing the onClick Function of Button

Use flex-grow and flex-wrap to split elements onto separate lines

Content in tab remains stagnant

How wide should the website layout be?

The embedded iframe on YouTube is displaying the incorrect video

Using jQuery to load content into a jQuery UI dialog box

Build a table with consistent columns and flexible rows utilizing CSS and HTML

Using a combination of CSS selector, several attributes, and the OR operator

I am in need of a JavaScript event that will take precedence over the CSS pointer

Using the HTML video tag to apply different background colors based on the individual machines being

How to Align Paypal Button in the Middle of a Table Cell within a Concealed Form Using HTML and

What is the method to assign multiple values to ng-disabled in AngularJS?

Is there a method to measure the time it takes to download a script apart from its actual execution time

Update cursor when hovering over a button

Moving elements upwards and downwards using CSS transitions

What is the best way to output my PHP code into separate div elements?

What are some successful methods for displaying extensive data lists to users in a meaningful and organized manner?

Tips on emphasizing all div elements and incorporating navigation to each of them

When using BeautifulSoup, there may be instances where the table element is not always detected, resulting in a 'NoneType' error being returned on occasion

The Toggle Functionality necessitates a double-click action