Generate separation among the navigation links in HTML/CSS

Just starting out with HTML/CSS and I'm facing an issue with spacing out the items on my nav-link. Specifically, the "collections" and "spark" items are overlapping. Can anyone provide guidance on why this is happening and how I can resolve it? Should I be using Flexbox or grid for this? Below is the code snippet for reference.

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial- 
    scale=1.0">
    <title>My Website</title>
    <link rel="stylesheet" href="nav.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" 
    crossorigin>
    <link href="https://fonts.googleapis.com/css2? 
    family=Ubuntu:wght@500&display=swap" rel="stylesheet">
    </head>

    <body>

    <div class="navigation-wrapper">

        <div class="left-column">
            <img src="Logos/codepen-wordmark-display-inside- 
   <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c8bfa0a1bcad88f9f8b0e6b8a6af">[email protected]</a>" alt="Logo">
        </div>


        <div class="center-column">
            <div class="links-wrapper">

                <div class="nav-link">
                    <a href="pens.html">Pens</a>
                </div>

                <div class="nav-link">
                    <a href="projects.html">Projects</a>
                </div>

                <div class="nav-link">
                    <a href="posts.html">Posts</a>
                </div>

                <div class="nav-link">
                    <a href="collections.html">Collections</a>
                </div>

                <div class="nav-link">
                    <div class="icon">
                            <i class="fas fa-chevron-down"></i>
                        <a href="spark.html">Spark</a>
                    </div>    
                    
                </div>
            </div>
        </div>
    </div>
    
   </body>
   </html>

    .navigation-wrapper {
    color: #cbcbcb ;
    height: 30px;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 50px 10px 35px 5px;
    background-color: black;
    }

    .navigation-wrapper > .left-column {
    margin-left: 15px;
    margin-bottom: 30px;
    width: 250px;
    }

    .navigation-wrapper > .left-column img {
    align-items: top;
    width: 175px;
    padding: 30px 50px 10px 15px;
    }

    ...

    .nav-link a {
    color:#cbcbcb;
    text-decoration: none;
    font-family: 'Ubuntu', sans-serif;
    font-size: 20px;
    font-weight: bold;
    transition: 1.0s;
    }
htmlcss

Answer №1

The issue can be found here :

.navigation-wrapper > .center-column > .links-wrapper > .nav-link {
  width: 70px;
  text-align: center;
}

The problem arises from the fixed width applied to the nav-link class causing content overlap. To resolve this, modify the CSS as follows:

.navigation-wrapper > .center-column > .links-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 4rem; /* include some gap */
}

.navigation-wrapper > .center-column > .links-wrapper > .nav-link {
  /* width: 70px; */
  text-align: center;
}

Answer №2

        .header{
            display:flex;
        }
        .navigation{
            display:flex;
        }
        a{
            text-decoration:none;
            margin-right:2rem;
        }
        li{
            list-style:none;
        }

        img{
            width:10%;
        }
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Doc</title>

  </head>

  <body>
    <header class="header">
        <div class="logo">
            <img src="https://images.unsplash.com/photo-1575881875475-31023242e3f9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8Mnx8fGVufDB8fHx8&w=1000&q=80" alt="">
        </div>
      <nav class="navigation">
        <li><a href="#">Pens</a></li>
        <li><a href="#">Projects</a></li>
        <li><a href="#">Posts</a></li>
        <li><a href="#">Collections</a></li>
        <li><a href="#">Spark</a></li>
      </nav>
    </header>
  </body>
</html>

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

What's preventing canvas from working offline but functioning properly on the TRYIT platform?

I have created some canvas-related code that works perfectly on TRYIT editor, but it fails to work locally when I copied the code into a file and tried to run it. This code is designed to take an image, set the width and height of a canvas based on that i ...

javascripthtmlcanvas

I have a page division with scroll bars and I want to ensure that the entire content of the division is displayed

I am facing an issue with a div and table on my webpage: <div id="tablediv"> <table id="table"> <tr><th>headers</th></tr> <tr><td>contents</td></tr> </table> <d ...

htmlcssbrowserprintingmedia-queries

Dominating React Components with Unique CSS Styles

Currently, I have developed a NavBar component. I've implemented some JavaScript code that changes the navbar's background color once it reaches 50px. However, I am facing an issue in applying this scroll effect to only one specific file and not ...

javascripthtmlcssreactjs

Tips for adding an image to HTML after clicking on a div element

Is there a way to prompt users to upload an image by clicking on a <div> that contains an <img>? The current code I have is: <div class="container"> <img src="..." alt="Profile image" class="profileImg"> ...

html

Multiple instances of the anchor tag are being inserted

Why is the anchor tag I specified in my code appearing multiple times when viewed in the browser? How can I fix this issue? <a href="{{ route('candidate.company.view', $company->id) }}" class="block no-overflow"> <div class="row ...

htmllaravellaravel-blade

Column with a set width in Bootstrap

Is it possible to create a fixed width right column in Bootstrap while keeping the left column responsive? I am currently working with Bootstrap 2.3.2 https://i.stack.imgur.com/xOhQo.png (source: toile-libre.org) I want the right column to maintain it ...

htmlcsstwitter-bootstraptwitter-bootstrap-2

Instructions for implementing tooltips on a pie chart slice when hovering with the mouse pointer, using the canvas

var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var cw = canvas.width; var ch = canvas.height; ctx.lineWidth = 2; ctx.font = '14px verdana'; var PI2 = Math.PI * 2; var myColor = ["Gr ...

javascriptjqueryhtmlcanvas

Deselect all checkboxes other than the daily selection

I recently designed an E-commerce website that includes a package customization feature where users can modify their packages. The initial question presents three radio button options: 1. Daily 2. Weekly 3. Monthly If the user selects 'daily&apos ...

javascriptjqueryhtmljquery-ui

What are the best methods to activate grayscale and transition effects on Firefox and Internet Explorer?

In order to achieve a grayscale effect for all images on Internet Explorer 10 and IE 11, I came across a helpful solution in this post: internet explorer 10 - howto apply grayscale filter?. However, the method provided is only for a single image. How can I ...

css

CSS creates gaps between each of the internal elements inside the HTML document

I'm looking to create a 4px space between all internal components within my HTML, regardless of direction (top, bottom, left, or right). I have attempted to achieve this by using an external CSS file with the following code: body { padding: 2p ...

htmlcss

What is the best way to create a navigation bar that opens on the same page when clicked?

Can someone help me figure out how to create a navbar that, when clicked, opens a small window on the same page like in this example image? ...

javascripthtmlcss

Animating components when they first mount in React

I'm attempting to implement an onMount animation in React (and Tailwind if relevant). The code I currently have is as follows: const Component = () => { const [mounted, setMounted] = useState(false) useEffect(() => { setTimeout(( ...

cssreactjs

The necessity of using Adobe Photoshop for optimizing a Web Template

My interest lies in utilizing web templates, such as the one referenced here:- templete However, within its details tab, it specifies that the following software is required:- Adobe Photoshop CS+ Sublime Text2 or later, Notepad++, Dreamweaver CS5.5+(Co ...

htmlcssdreamweaverphotoshop

How can I prevent a span in CSS from stretching its parent element?

Utilizing the twitter bootstrap thumbnails successfully, we have implemented a description feature inspired by the bootstrap documentation. The distinction lies in our decision not to specify a size (e.g., .span4) for our thumbnails; instead, the content d ...

htmlcsstwitter-bootstrapwidth

Looking to add the Ajax response data into a dropdown selection?

Looking to add select options dynamically, but unsure how to retrieve response values. I am able to fetch all the values in the response, but I struggle with appending them correctly in the select option. I believe the syntax is incorrect. success: funct ...

javascripthtmlajaxlaravel

Can a phone without GPS capability still perform geocoding functions?

Is it possible to obtain the location through visiting a website? I am aware that HTML5 allows for this, but will it be compatible with mobile phones? ...

htmlgeocoding

Guide on programmatically choosing an option within a variable with the help of jQuery

Imagine having a variable named html, which holds select options like this: var html = '<select>'+ '<option value="10">10</option>'+ '<option value="20">20</option>'+ ...

javascriptjqueryhtmljquery-selectors

Using PHP to insert CSS conditionally through an if statement

I am working with PHP to identify whether a user is accessing the website through a mobile device or desktop browser. Currently, I have it set up to display "yes" or "no," which is working correctly. However, I would like to apply specific CSS code based o ...

phpcssif-statement

Discovering mistakes in PHP MySQL

Is there an error in this code? Here's the code I'm working with. Thank you in advance for your help! else if(isset($_POST['UPDATECSSGOLD'])) { $stmt = $mysqli->prepare("UPDATE css set STYLE_STATUS = 'allnull'"); $stmt-& ...

jqueryhtmlmysqlajax

`Gradient blending in ChartJS`

Currently, I am facing an issue with my line chart having 2 datasets filled with gradients that overlap, causing a significant color change in the 'bottom' dataset. Check out my Codepen for reference: https://codepen.io/SimeriaIonut/pen/ydjdLz ...

javascriptcsschart.js