Remove spacing in flexbox navbar

Question

Hi I am a beginner in web development. I'll be clear this is homework and after trying a lot of things I can't get it done so here I am. I was given an assignment to make a clone of the university's website but with our own styles and I have run into a bit of a problem. I want to remove all the spacing in the navbar as it doesn't look good.

I have seen posts with people putting negative margin but those were very old posts so I figured there must be a better modern approach.

Here is the codepen: https://codepen.io/pr1232/pen/MWJPooq

I have put a background-color on the links and I want that color to fill the entire height of the navbar and no spaces between adjacent links. The color right now is just for highlighting purposes. I tried to do the same with padding but then I had to hardcode a value.

Please provide a [Minimal, Reproducible Example](https://stackoverflow.com/help/minimal-reproducible-example) only. — Daweed, Apr 19 '21 at 11:19

score 0 · Answer 1 · answered Apr 19 '21 at 11:24

Try this

/**
Font families: 

    font-family: 'Montserrat', sans-serif;

    font-family: 'Noto Sans JP', sans-serif;

    font-family: 'Open Sans', sans-serif;

    font-family: 'Source Sans Pro', sans-serif;
*/
:root {
    --default-bg-color: hsl(0, 0%, 90%);
    --charcoal-blue: #34495E;
}

* {
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--default-bg-color);
}

h1 {
    font-family: "Montserrat", sans-serif;
    color: var(--charcoal-blue);
    font-weight: 700;
    text-align: center;
    letter-spacing: 0.5em;
}

ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

a {
    text-decoration: none;
    color: inherit;
}

header,
footer {
    background-color: var(--charcoal-blue);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

li {
    display: inline-block;
    padding: 15px;
    background-color: #fff;
}

/* solution */
footer ul,
header nav ul {
    font-size: 0;
    line-height: 0;
}

footer a,
header nav a {
    font-size: 16px;
    line-height: 1.5;
}

<!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"/>
        <link rel="stylesheet" href="css/style.css"/>
        <link rel="preconnect" href="https://fonts.gstatic.com"/>
        <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700&family=Noto+Sans+JP&family=Open+Sans&family=Source+Sans+Pro&display=swap" rel="stylesheet"/>
        <title>Portfolio</title>
    </head>
    <body>
        <header>
            <a href="index.html"><img src="assets/svg/hexagon-with-right-arrow.svg" alt="Website Logo"/></a>
            <nav>
                <ul>
                    <li><a href="pages/about-us.html">About Us</a></li>
                    <li><a href="pages/registration.html">Registration</a></li>
                    <li><a href="pages/faculty.html">Faculty</a></li>
                    <li><a href="pages/fee-structure.html">Fee Structure</a></li>
                    <li><a href="pages/login.html">Login</a></li>
                    <li><a href="pages/signup.html">Sign Up</a></li>
                </ul>
            </nav>
        </header>
        <main>
            <h1>I am Nitesh.
                <br/>I build websites
                <br/>and other cool stuff.</h1>
        </main>
        <footer>
            <!--
                        ---Social Media Links---
                  -->
            <ul>
                <li><a href="">Github</a></li>
                <li><a href="">Linkedin</a></li>
                <li><a href="">Twitter</a></li>
            </ul>
        </footer>
    </body>
</html>

score 0 · Answer 2 · answered Apr 19 '21 at 11:56

0

While you state "flexbox navbar" in your title, your actual navigation element doesn't have a flexbox styling. Therefore, the spaces you have in your markup get rendered in the browser.

You can use flexbox display to achieve the desired effect, using your existant markup. All you need to do to accomplish that is set the display:flex property, like so:

nav ul {
  display:flex;
}

answered Apr 19 '21 at 11:56

TheThirdMan

1,482
1
14
27

This is good and answers part of the question but I also want to get rid of the spacing around the `ul` the blue part. What i want is something that looks like the w3schools.com navbar that has no spacing between the `li` elements and the header itself – nitesh_ Apr 19 '21 at 14:04
@nitesh_ I'm not quite sure what you mean... please provide a [minimal, reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) as suggested in the comment, together with a more detailed description of what you're trying to get, then I can look at it again. – TheThirdMan Apr 20 '21 at 12:42
I have updated the post and made the changes you had previously suggested and some others as well. Please look at it and suggest something. – nitesh_ Apr 20 '21 at 13:40

Remove spacing in flexbox navbar

2 Answers2