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>

htmlcssnavbar

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

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 №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.

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

Guide to implementing onhashchange with dynamic elements

Hey there! I've encountered a problem with two select boxes on my webpage, each in different anchors (one on the page, the other in an iframe). What I'm trying to achieve is for the code to recognize which anchor it's in and then pass the se ...

javascriptjqueryhtmlurlhashchange

Issues with Vertical Alignment and Navigation

Link: Please resize the browser to mobile view. Issue with Header: I am facing alignment issues in the header. The elements do not seem to be aligned properly at the center of the header. The Android logo is aligned, but the text and dash image are not. ...

htmlcss

What is the process for displaying or hiding a large image when clicking on thumbnail images?

How can I toggle the display of a large image by clicking on thumbnails? This is what I am looking for: Check out this JSFiddle version http://jsfiddle.net/jitendravyas/Qhdaz/ If not possible with just CSS, then a jQuery solution is acceptable. Is it o ...

javascriptjquerycssmobile-safari

Issue with the positioning of the datepicker is not functioning properly

I'm currently facing an issue with the position of a date picker plugin from jquery. The search box on my website allows users to select a range of dates using the date picker, but when enabled, the date picker appears at the bottom left corner of the ...

javascriptphpjqueryhtmldatepicker

What is the significance of the A tag when parsing a URL?

So, I encountered a problem that involved parsing a URL to extract the hostname and pathname, then comparing the extracted pathname with a string. If you need help with this issue, check out this post: How do I parse a URL into hostname and path in javasc ...

javascripthtmldom

Having trouble with jQuery Animate when trying to change the background-color property?

So, I was experimenting with the jQuery .animate() function and decided to change the background color of a div based on how many pixels the user scrolled. Surprisingly, it didn't work as expected. After switching to the .css() function instead, every ...

javascriptjquerycssjquery-animate

What is the best way to navigate users to a different page when they click on a button?

I recently designed a button in Dreamweaver software. Could you please guide me on how to set up the button so that when clicked, it redirects the user to a different page using Dreamweaver? Below is the HTML code for the button: <input type="submit" ...

htmlcssbuttonhyperlinkdreamweaver

Material-UI Grid in Full Width Mode is malfunctioning

I've been delving into the Material-UI@next grid layout system to grasp its intricacies. What I'm aiming for is to have two papers that stretch across the entire width of the screen and collapse into one paper when the screen size shrinks. The d ...

cssreactjsmaterial-designmaterial-ui

What are effective ways to eliminate script tags from a webpage?

I have implemented tags on my website that users can use to interact with the site. My goal is to figure out how to make the browser only read text from a specific file I write, without any HTML. This should be restricted to certain sections of my websit ...

asp.netjavascripthtmlcss

Displaying a random div using javascript

Seeking a way to display random divs on my webpage, I came across a stackoverflow solution: Showing random divs using Jquery The recommended code can be found here: http://jsfiddle.net/nick_craver/RJMhT/ Despite following the provided instructions, I am ...

javascripthtml

What is the best way to draw a rectangle outline in Vue.js without the need for any additional packages?

I have been attempting to craft a rectangle outline using vueJS, but so far I have not had much success. I am hoping to achieve this using only CSS, but despite my efforts, I have not been able to find a solution. My goal is to create something similar to ...

javascriptcssvue.jsbootstrap-vue

The dropdown menu is being truncated

I am having an issue with a drop-down menu being cut off by its parent div. When I increase the height of the parent div, the drop-down menu becomes visible. Can someone please assist me? Below is my code snippet: MarkUp <div id="main-navigation" clas ...

csshtml

Disabling the .hover function temporarily

I am currently exploring how to temporarily disable the .hover function in jQuery based on a specific event that occurs on the page. You can view my current jsfiddle here: http://jsfiddle.net/4vhajam3/3/ (please note that I have omitted some code for simp ...

javascriptjqueryhtml

Tips for adjusting image and div sizes dynamically according to the window size

In my quest, the end goal is to craft a simplistic gallery that closely resembles this particular example: EXAMPLE: This sample gallery is created using Flash technology, but I aim to develop mine utilizing HTML, CSS & Javascript to ensure compatibil ...

javascriptjqueryhtmlcss

What is the most effective way to transfer an array from one PHP file to a different JavaScript file?

Utilizing AJAX to send a request to another php page and retrieve the result of a query, I originally used xmlhttprequest to pass the php logic along with the query information. However, I wanted to separate the presentation logic from the actual code logi ...

javascriptphphtmljsonajax

Has CSS3 been recognized as an official standard?

Can you confirm whether CSS3 has been officially recognized as a W3C standard or is it currently in the status of "CR" (Candidate Recommendation)? ...

cssw3c

Adjust the top margin of content to account for the height of a fixed header

When dealing with a fixed header that has been removed from the HTML flow, it can be tricky to adjust the content below it. The challenge arises because the height of the header can vary based on screen size. How can we dynamically adjust the margin-top fo ...

jqueryhtmlcss

Is the textarea functioning properly with the inclusion of mysterious character variables?

As per the documentation When using an unknown named character reference like &this, it results in an ambiguous ampersand error. This situation is confusing <textarea> &this </textarea> What am I misunderstanding here? Any re ...

html

Utilizing AJAX and PHP to enhance Zend_Config_Ini

As I develop my own CMS, I encountered a challenging issue that I couldn't find a solution for on Google... My dilemma lies in creating an edit_settings.php file using AJAX and PHP to integrate my Zend_Config_Ini for parsing and writing purposes with ...

phphtmlajaxzend-framework

Loading SVG images in advance

I am in possession of around one hundred simple SVG images, distributed among five different image folders. These images are currently retrieved on demand when they need to be displayed, which generally works well but occasionally results in flickering tha ...

javascriptphphtmlcsssvg