Adjusting the gaps between each item in a list

Question

Adjusting the gaps between each item in a list

Currently, I am working on developing a minimalist single-page website. However, I am facing challenges with spacing in the navbar section (as demonstrated below).

When using an unordered list, everything looks good until the list overlaps with the central logo. When trying to adjust the spacing by adding an empty list element, it ends up creating too much space. Is there a way to modify the spacing of individual list items?

.navbar {
  position: fixed;
  top: 0;
  height: 11.5vh;
  width: 100vw;
  /* background-color: #07470B; */
  /* opacity: 0.96; */
  background: #f6f6f6;
  z-index: 10;
  padding: 0;
  margin: 0;
}
.navbar ul {
  list-style-type: none;
  margin: 0;
  padding-left: 5vw;
  padding-top: 3vh;
}
.navbarList {
  display: inline-block;
  width: 14vw;
  font-family: 'Raleway';
  font-size: 5vh;
  padding: 0;
  margin: 0;
}
.navbarList li {
  margin: 0;
}
.navbarList a {
  color:#989898;
  text-decoration: none;
}
.navbarList a:hover{
  color: #e68935;
}

<body id="site">
<a href="#page1" class="smoothScroll"><img id="logoTop" src="images/logoHead.png"></a>
<div id="site">
  <div class="navbar">
    <ul>
      <!-- <li class="navbarList">
        <a href="#page1" class="smoothScroll">HOME</a>
      </li> -->
      <li class="navbarList">
          <a href="#divEndPage1" class="smoothScroll">ABOUT</a>
      </li>
      <!--<li class="navbarList"></li>-->
      <li class="navbarList">
          <a href="#page3" class="smoothScroll">EVENTS</a>
      </li>
      <li class="navbarList">
          <a href="#page4" class="smoothScroll">GALLERY</a>
      </li>
      <li class="navbarList"></li>
      <li class="navbarList">
        CONTACT
      </li>
      <li class="navbarList">
        CONTACT
      </li>
    </ul>
    <div id="navbarUnderline"></div>
  </div>
  </body>

html css navbar

Answer 1

Answer №1

To achieve a better logo design, consider using position:absolute and increasing the z-index.
When styling the list, avoid setting a fixed width and use padding instead.

Remember that IDs(#) should always be unique.

*,
*::before,
*::after {
  box-sizing: border-box
}
body {
  margin: 0
}
#main {
  position: relative
}
.navbar {
  position: fixed;
  top: 0;
  height: 12vh;
  width: 100vw;
  /* background-color: #07470B; */
  /* opacity: 0.96; */
  background: #f6f6f6;
  z-index: 10;
  padding: 0;
  margin: 0;
}
.navbar ul {
  list-style-type: none;
  margin: 0;
  padding-left: 5vw;
  padding-top: 3vh;
}
.navbarList {
  display: inline-block;
  font-family: 'Raleway';
  font-size: 3vw;
  padding: 2vh 2vw;
}
.navbarList li {
  margin: 0;
}
.navbarList a {
  color: #989898;
  text-decoration: none;
}
.navbarList a:hover {
  color: #e68935;
}
#logoTop {
  position: absolute;
  top: 2vh;
  left: 55%;
  z-index: 11
}

<body id="site">
  <div id="main">
    <a id="logoTop" href="#page1" class="smoothScroll">
      <img src="//lorempixel.com/30/20">
    </a>
    <div class="navbar">
      <ul>
        <!-- <li class="navbarList">
        <a href="#page1" class="smoothScroll">HOME</a>
      </li> -->
        <li class="navbarList">
          <a href="#divEndPage1" class="smoothScroll">ABOUT</a>
        </li>
        <!--<li class="navbarList"></li>-->
        <li class="navbarList">
          <a href="#page3" class="smoothScroll">EVENTS</a>
        </li>
        <li class="navbarList">
          <a href="#page4" class="smoothScroll">GALLERY</a>
        </li>
        <li class="navbarList"></li>
        <li class="navbarList">
          CONTACT
        </li>
        <li class="navbarList">
          CONTACT
        </li>
      </ul>
      <div id="navbarUnderline"></div>
    </div>
  </div>
</body>

Answer 2

To achieve a better logo design, consider using position:absolute and increasing the z-index.
When styling the list, avoid setting a fixed width and use padding instead.

Remember that IDs(#) should always be unique.

*,
*::before,
*::after {
  box-sizing: border-box
}
body {
  margin: 0
}
#main {
  position: relative
}
.navbar {
  position: fixed;
  top: 0;
  height: 12vh;
  width: 100vw;
  /* background-color: #07470B; */
  /* opacity: 0.96; */
  background: #f6f6f6;
  z-index: 10;
  padding: 0;
  margin: 0;
}
.navbar ul {
  list-style-type: none;
  margin: 0;
  padding-left: 5vw;
  padding-top: 3vh;
}
.navbarList {
  display: inline-block;
  font-family: 'Raleway';
  font-size: 3vw;
  padding: 2vh 2vw;
}
.navbarList li {
  margin: 0;
}
.navbarList a {
  color: #989898;
  text-decoration: none;
}
.navbarList a:hover {
  color: #e68935;
}
#logoTop {
  position: absolute;
  top: 2vh;
  left: 55%;
  z-index: 11
}

<body id="site">
  <div id="main">
    <a id="logoTop" href="#page1" class="smoothScroll">
      <img src="//lorempixel.com/30/20">
    </a>
    <div class="navbar">
      <ul>
        <!-- <li class="navbarList">
        <a href="#page1" class="smoothScroll">HOME</a>
      </li> -->
        <li class="navbarList">
          <a href="#divEndPage1" class="smoothScroll">ABOUT</a>
        </li>
        <!--<li class="navbarList"></li>-->
        <li class="navbarList">
          <a href="#page3" class="smoothScroll">EVENTS</a>
        </li>
        <li class="navbarList">
          <a href="#page4" class="smoothScroll">GALLERY</a>
        </li>
        <li class="navbarList"></li>
        <li class="navbarList">
          CONTACT
        </li>
        <li class="navbarList">
          CONTACT
        </li>
      </ul>
      <div id="navbarUnderline"></div>
    </div>
  </div>
</body>

Answer 3

Answer №2

If you are looking to customize the spacing for individual items, consider adding an id and assigning CSS properties such as padding or margin. Additionally, utilizing pseudo classes in CSS like "nth-child(x)" or "nth-of-type(x)" can help target specific items.

Some tips for your code: instead of using a 'div' with the class "navbar", opt for the 'nav' tag for your menu. Rather than assigning the class "navbarList" to each 'li', it is recommended to add a class to the 'ul' and then target the 'li' elements in CSS using ".classOfTheUl li". This way, you can style each 'li' within the 'ul' that has the class "classOfTheUl".

Answer 4

If you are looking to customize the spacing for individual items, consider adding an id and assigning CSS properties such as padding or margin. Additionally, utilizing pseudo classes in CSS like "nth-child(x)" or "nth-of-type(x)" can help target specific items.

Some tips for your code: instead of using a 'div' with the class "navbar", opt for the 'nav' tag for your menu. Rather than assigning the class "navbarList" to each 'li', it is recommended to add a class to the 'ul' and then target the 'li' elements in CSS using ".classOfTheUl li". This way, you can style each 'li' within the 'ul' that has the class "classOfTheUl".

Answer 5

Answer №3

If you're looking to separate them, one suggestion is to use two separate unordered lists positioned on either side of the logo. Take a look at this basic mockup that you can customize by adjusting the number of list items on each side.

HTML

    <ul class="left-nav">
      <li>One</li>
      <li>Two</li>
      <li>Three</li>
    </ul>

    <div class="logo-block"></div>

    <ul class="right-nav">
      <li>Four</li>
      <li>Five</li>
    </ul>

CSS

  ul {
    padding: 0;
  }

  li {
    list-style: none;
    float: left;
    padding: 0px 20px;
  }

  .logo-block {
    width: 40px;
    height: 40px;
    position: absolute;
    left: 50%;
    margin-left: -20px;
    background-color: red;
  }

  ul.left-nav {
    position: absolute;
    right: calc(50% + 20px);
  }

  ul.right-nav {
    position: absolute;
    left: calc(50% + 20px);
  }

Check out this CodePen link for a visual representation.

Answer 6

If you're looking to separate them, one suggestion is to use two separate unordered lists positioned on either side of the logo. Take a look at this basic mockup that you can customize by adjusting the number of list items on each side.

HTML

    <ul class="left-nav">
      <li>One</li>
      <li>Two</li>
      <li>Three</li>
    </ul>

    <div class="logo-block"></div>

    <ul class="right-nav">
      <li>Four</li>
      <li>Five</li>
    </ul>

CSS

  ul {
    padding: 0;
  }

  li {
    list-style: none;
    float: left;
    padding: 0px 20px;
  }

  .logo-block {
    width: 40px;
    height: 40px;
    position: absolute;
    left: 50%;
    margin-left: -20px;
    background-color: red;
  }

  ul.left-nav {
    position: absolute;
    right: calc(50% + 20px);
  }

  ul.right-nav {
    position: absolute;
    left: calc(50% + 20px);
  }

Check out this CodePen link for a visual representation.

Adjusting the gaps between each item in a list

Answer №1

Answer №2

Answer №3

Similar questions

Adding dynamic content to CSS in Next.JS can be achieved by utilizing CSS-in-JS

The behavior of Mozilla in handling JQuery attr() function may result in variations in design elements such as font-family or font-size

Update the JavaScript and CSS files following an AJAX request with $.get

What is the best way to distinguish a particular item in a <select> element and include a delete button for each row using jQuery?

Creating a clickable image map for the footer

Creating a Dynamic Landing Page with Node.js and Express

Creating a central navigation menu for a website

Fancybox overlay not adjusting to full height

Combining a pair of canvases

Certain parts of the CSS grid are not aligning properly within the grid lines

The rotation transformation on the Z-axis occurs once the animation has finished

Automatically switch to the designated tab depending on the URL

Scraping a p tag lacking a class attribute with the help of BeautifulSoup4 (Bs4)

Seeking Assistance with Customizing HTML Uniform Panels

Tips for resizing the dimensions of two div elements to fit the screen dimensions

I am experiencing issues with CSS functionality in my Ruby on Rails application

How to pass data between components in Angular using @Input, @Output, and EventEmitter

Building pagination functionality in AngularJS by sending parameters to an AJAX service: A step-by-step guide

Replacing one <div> with another <div> using a clickable link within the divs

Using d3.js to dynamically change the color of svg elements based on their data values