Having a hard time with Positioning and Display! (NAV BAR)

Get Help CSS
#1

Thank you for your help!
After so many coffees and sleep deprivation I’m having a hard time making a easy “nav bar” with images.
the problem: There is a space on top of icons, why??? :frowning:

navbar
navbar.jpg1249×291 30.2 KB

my css code:

<style>
        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            padding: 0;
            background-color: aqua
        }

        .navigation {
            background-color: aliceblue;
            position: fixed;
            width: 100%;
            height: 100px;
            top: 0;
            margin: 0;
            padding: 0;

        }

        .navigation li {
            list-style-type: none;
            float: left;
            top: 0;
            margin: 0;
            width: 100px;
            border: 0;

        }

    </style>


</head>

<body>
    <header class="navigation">
        <nav>
            <ul>
                <li><a href="#">Link #1</a></li>
                <li><a href="#">Link #2</a></li>
                <li><a href="#">Link #3 </a></li>
                <li><a href="#"><img src="images/home.jpg"></a></li>
                <li><a href="#"><img src="images/home.jpg"></a></li>
                <li><a href="#"><img src="images/home.jpg"></a></li>
            </ul>


        </nav>
#2

I’ve try everything!!!

I’m reading the whole position chapter again… please help! :upside_down_face:

#4

Give your ul a margin top a negative value should solve it. I would say -16px.

#5

Better yet, try .navigation li img{margin-top: -16px;}, so you offset the default margin of ul but only on the images. Hope this helps ;D

#6

Thanks! it worked!!!

1 Like