CODEWITHSUNDEEP
htmlcsstwitter-bootstrapnavbar
LCP
LCP

Reputation: 45

Navbar with two images left and right and a search field in the center

I'm creating a navbar with Bootstrap. I would like to have two images left and right and a search field in the center. The navbar should have the height of the two images. The search field should be located both horizontally and vertically in the center of the navbar. This is my current code:

HTML:

<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <div class="row">
            <div class="col-sm-4">
                <div class="navbar-header">
                    <img src="../images/Image1.png" width="280" height="80" alt="">
                </div>
            </div>
            <div class="col-sm-4" style="text-align: center">
                <form class="navbar-form navbar" role="search">
                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="Suche" name="suche">
                        <div class="input-group-btn">
                            <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
                        </div>
                    </div>
                </form>
            </div>
            <div class="col-sm-4">
                <ul class="nav navbar-nav navbar-right">
                    <img src="../images/Image2.jpg" width="330" height="80" alt="">
                </ul>
            </div>
        </div>
    </div>
</nav>

CSS:

.navbar-form{
    padding-top: 13px;
}

Can I do that more skillfully? Especially the thing of locating the search field in the center horizontally and vertically?

Upvotes: 0

Views: 1144

Answers (1)

grinmax
grinmax

Reputation: 1855

This very easy do through flex-box

.navbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
<div class="navbar">
    <div class="img">
    	<img src="http://placehold.it/150x150" alt="">
    </div>
    <div class="search">
    	<input type="text">
    	<input type="submit" value="Ok">
    </div>
    <div class="img">
    	<img src="http://placehold.it/150x150" alt="">
    </div>
    </div>

Upvotes: 1

Related Questions