CODEWITHSUNDEEP
htmlcss
T. Duke
T. Duke

Reputation: 1016

Space between icons in navbar

I want to remove the padding between the icons, but having a hard time positioning at flex-start. I've tried removing padding and margins but doesn't seem to work. I want the icons to be closer together.

I want to build it using flexbox but while I can add the icons I can't seem to work with the space in between each icon.

CODEPEN: https://codepen.io/tylerisfatal/pen/bGgWpYY

    .main-nav{
        display: flex;
        flex-direction: row;
        background-color: #00008b;
    }
    
    .main-nav .main-nav-list{
        display: flex;
    
    }
    
    .main-nav .main-nav-list img {
        display: flex;
        flex-direction: row;
        width: 8%;
    }
    <!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="styles.css">
        <title>Document</title>
    </head>
    <body>
        <nav role="navigation" class="main-nav">
            <ul class="main-nav-list">
                <li>
                    <a href="#facebook">
                        <div>
                            <img src="img/facebook.png" alt="">
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#yelp">
                        <div>
                            <img src="img/yelp.png" alt="">
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#linkedin">
                        <div>
                            <img src="img/linkedin.png" alt="">
                        </div>
                    </a>
                </li>
            </ul>
        </nav>
    
    </body>
    </html>

Upvotes: 0

Views: 913

Answers (2)

t-jam
t-jam

Reputation: 800

Your problem is that you've set the img element to be 8% of the width of its parent. That parent is not the nav bar. The result is that the image is only occupying a small area of the list item, and forcing a lot of extra space beside. You also don't need the image inside a div, or the extra flex display properties on the image. Remove all that.

In general, you should have a rule that sets images to be a maximum of 100% of their containing element width, like this:

img {
  max-width: 100%;
  height: auto;
}

Once you have that in place, you can just set the width on the parent element and remove the image width:

nav li {
  margin-right: 0.5rem;
  width: 2rem;
}

Keeps your code more logical and avoids having rules that are unnecessarily many elements deep.

You'll also want to remove the bullet points created by using the ul and li elements:

nav ul {
  list-style: none;
}

Here's an example of this using your code.

Upvotes: 2

top talent
top talent

Reputation: 599

Please try this:)

.main-nav{
    background-color: #00008b;
}

.main-nav .main-nav-list{
    display: flex;
    flex-direction: row;
}

.main-nav .main-nav-list img {
    width: 8%;
}

Upvotes: 0

Related Questions