CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
OmniOwl
OmniOwl

Reputation: 5709

The Navbar Icons are slightly off center

I'm making a website for my game coming up soon and it'll serve as a commercial piece (one-page website) for the game itself.

I am in the starting phase and is working on the navbar at the top (Yes I am using Bootstrap) but the font-awesome glyphs that I use don't seem to center up right compared to the text in the body:

enter image description here

As you see on the picture the Android and Apple icons are off-center compared to the text underneath. I get that it might be because of the icons I have on the right and left throwing it off center but I am fairly new to web development so I just request some help to fix that up :)

<div class="header">
        <div class="well" style="height: 100%">
            <nav class="navbar navbar-default navbar-fixed-top">
                <div class="container-fluid">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                                data-target=".navHeaderCollapse"
                                aria-expanded="false"> <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                    </div>
                    <div class="collapse navbar-collapse navHeaderCollapse">
                        <ul class="nav navbar-nav navbar-left">
                            <li>
                                <a href="index.html">
                                    <span><img alt="Dynamic Realities" width="42" height="42" src="img/Cogfire-notext.png"></span>
                                </a>
                            </li>
                        </ul>
                        <ul class="nav navbar-nav">
                            <li>
                                <a target="_blank" href="#">
                                    <span class="fa fa-android" style="color: #5cb85c; font-size: 42px;"></span>
                                </a>
                            </li>
                            <li>
                                <a target="_blank" href="#">
                                    <span class="fa fa-apple" style="color: #c0c0c0; font-size: 42px;"></span>
                                </a>
                            </li>
                        </ul>
                        <ul class="nav navbar-nav navbar-right">
                            <li>
                                <a target="_blank" href="http://www.twitter.com/DynRealities">
                                    <span class="fa fa-twitter-square" style="color: #31b0d5; font-size: 42px;"></span>
                                </a>
                            </li>
                            <li>
                                <a target="_blank" href="http://www.facebook.com/DynamicRealities">
                                    <span class="fa fa-facebook-square" style="color: #204d74; font-size: 42px;"></span>
                                </a>
                            </li>
                            <li>
                                <a target="_blank" href="http://www.youtube.com/DynamicRealities">
                                    <span class="fa fa-youtube-square" style="color: #c12e2a; font-size: 42px;"></span>
                                </a>
                            </li>
                            <li>
                                <a target="_blank" href="#">
                                    <span class="fa fa-tumblr-square" style="color: #204d74; font-size: 42px;"></span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>
        </div>
    </div>

With the following CSS applied:

@media (min-width: 768px) {
    .navbar .navbar-nav {
        display: inline-block;
        float: none;
        vertical-align: top;
    }

    .navbar .navbar-collapse {
        text-align: center;
    }
}

Upvotes: 0

Views: 174

Answers (1)

Jinu Kurian
Jinu Kurian

Reputation: 9426

Have a look at my fiddle, only added padding to make the logo center

http://fiddle.jshell.net/Jinukurian7/oqyvprxz/

Upvotes: 1

Related Questions