Search code examples
htmlcssheader

How to align icons on website header? (CSS + HTML)

So, recently I've been learning some coding for my course.

I've experimented with a few ideas, and I'm currently making this top header ("topbar") that acts as a mini-header just above the actual header, which displays some extra info.

Unfortunately, I'm a bit of a coding noob and I can't figure out what's going wrong in this code. If you run it, you'll see the social media icons on the right (I'm using Font Awesome) aren't in the header and it's a pain to try and get them there. They should be in line with the elements on the left (middle of the topbar in terms of height, and 30px inwards from the right).

I've played around with padding, margin, align and a bunch of other things but I just can't figure it out. Any help?

HTML CODE:

<!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">
    <link href="https://fonts.googleapis.com/css2?family=Architects+Daughter&family=Noto+Sans+JP&family=Salsa&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <title>TestWeb</title>
</head>


<body>

    <!-- ======= Top Bar ======= -->

    <section id="topbar" class="d-flex align-items-center">
        <div class="container d-flex justify-content-center justify-content-md-between">
            <div class="contact-info d-flex align-items-center">
                <i class="fa fa-envelope d-flex align-items-center"><a href="mailto:[email protected]">[email protected]</a></i>
                <i class="fa fa-map-marker d-flex align-items-center"><a href="#">1 Avenue, London, AB12 0AB</a></i>
                <i class="fa fa-phone d-flex align-items-center ms-4"><span>123 456 78900</span></i>
            <div class="social-links d-flec align-items-center">
                <i class="fa fa-twitter d-flex align-items-center"><a href="#"></a></i>
                <i class="fa fa-instagram d-flex align-items-center"><a href="#"></a></i>
                <i class="fa fa-facebook-square d-flex align-items-center"><a href="#"></a></i>
            </div>
            </div>
        </div>
    </section>

</body>


</html>

CSS CODE:

/* ==============================
========== G L O B A L ========== 
============================== */

*{
    margin: 0;
    padding: 0;
}

/* =============================
========= T O P  B A R =========
============================= */

#topbar{
    height: 30px;
    width: 100%;
    background-color: #313030;
    color: white;
    font-size: 14px;
    font-family: 'Noto Sans JP', sans-serif;
    transition: all 0.3s;
    padding: 0;
    padding-top: 5px;
    padding-left: 10px;
}

#topbar .contact-info i a, #topbar .contact-info i span{
    padding-left: 5px;
    color: #A1B82B; 
    font-family: 'Noto Sans JP', sans-serif;
    text-decoration: none;
}

#topbar .contact-info i a{
    line-height: 0;
    transition: 0.3s;
    transition: 0.3s;
    padding: 30px;
    padding-left: 5px;
    color: #A1B82B;
}

#topbar .contact-info i:hover{
    text-decoration: underline;
}

#topbar .social-links i{
    float: right;
    color: white;
    transition: 0.3s;
    padding-right: 5px;
}

#topbar .social-links i:hover{
    color: #909090;
    text-decoration: none;
    cursor: pointer;
}
Solution

  • The reason your social media icons aren't in line with everything else is because they are actually going below it.

    Take a look at this image:

    enter image description here

    As you can see, the dashed blue line is your .social-links div, and it is going below the other items in your menu.

    Why is this happening?

    The reason this is happening is because by default a div has a display property of block

    display: block means that the element should start on a new line, and take up the entire width of it's parent.

    So, long story short, to fix your problem you could add something like:

    #topbar .social-links{
    float: right;
}

    This code will make your .social-links div appear on the same line as the other items in your menu, as well as be forced to the right hand side of the navigation bar (which I'm assuming is where you want it.)

    Now the icons are in the menu bar, but they're stuck to the top. To fix that remove this line of code:

    #topbar .social-links i{
    /* float: right;  <-- REMOVE THIS */
    color: white;
    transition: 0.3s;
    padding-right: 5px;
}

    Just a side note, it looks like you're using a lot of unneeded classes in your HTML, try to only use a class if you have actual CSS written for it :)

    Here's a working example of your site: https://codepen.io/jacobcambell/pen/zYzzrjW

    Hope this helped!