CODEWITHSUNDEEP
htmlcss
JoeyL
JoeyL

Reputation: 1305

How to get my navigation bar to be vertically centered

I am trying to figure out how to center my navigation vertically and for the life of me I have been exhausting "Right Click > Inspect Element" and trying to see real time on how to get my tabs centered depending on the picture in the middle.

site if you want to do Right Click > Inspect Element

Code:

HTML

<!-- NAVIGATION BAR -->
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    <li>
                        <a href="/news/">News</a>
                    </li>
                    <li>
                        <a href="/games/">Games</a>
                    </li>
                    <li>
                        <a class="logo" href="href logo link">
                            <img src="logo.png" alt="logo">
                        </a>
                    </li>
                    <li>
                        <a href="/about/">About</a>
                    </li>
                    <li>
                        <a href="/blog/">Blog</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

CSS

.navbar-fixed-top, .navbar-fixed-bottom {
    position: fixed;
    right: 0;
    left: 0;
    z-index: 1030;
    -webkit-transform: translate3d(0,0,0);
    -o-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);}

.navbar {
    position: relative;
    min-height: 50px;
    margin-bottom: 20px;
    border: 1px solid transparent;}

.container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;}

.navbar-nav {
    display: inline-block;
    float: none;
    vertical-align: middle;
    margin: 0;}

.navbar-nav>li {
    float: left;}

.nav>li {
    position: relative;
    display: block;}

Upvotes: 1

Views: 63

Answers (1)

Devin
Devin

Reputation: 7720

change 

.navbar-nav > li{
     float:left
    }

to

.navbar-nav > li{
    display: inline-block !important;
    vertical-align: middle !important;
    }

it would help if you make that humongous logo a bit (lot) smaller, or it will take a lot of vertical space, but anyways, as fas as your question goes, here you have your answer.

WARNING: This will help you achieve that effect in desktop screens, but you'll have to adjust for smaller screens, so check out and adjust at will. My advice would be to apply some kind of control to that logo, like:

.nav > li > a > img {
    width: 100%;
    height: auto;
    max-width: 300px;
}

or whatever you want/need. Just don't leave it "as is"

Upvotes: 2

Related Questions