CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Nurdin
Nurdin

Reputation: 23883

Place logo at top header using Bootstrap

How I can set logo like this one? (second one)

enter image description here

I already try but not working. My code

<!-- Navigation -->
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                 <a class="brand navbar-brand" href="#"><img src="img/logo.png" alt=""></a>
            </div>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li>
                        <a href="#/property/list/1">Buy</a>
                    </li>
                    <li>
                        <a href="#/property/list/2">Rent</a>
                    </li>
                    <li>
                        <a href="#/property/list/3">New Properties</a>
                    </li>
                    <li>
                        <a href="#/property/alert">Property Alert</a>
                    </li>
                    <li>
                        <a href="#/resource">E-Learning</a>
                    </li>
                    <li>
                        <a href="#/about">About Us</a>
                    </li>
                    <li>
                        <a href="#/contact">Contact Us</a>
                    </li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container -->
    </nav>

Upvotes: 0

Views: 6962

Answers (3)

Christina
Christina

Reputation: 34652

DEMO: https://jsbin.com/holumi/1/

https://jsbin.com/holumi/1/edit?html,css,output

enter image description here

The size of your logo matters, adjust the MIN-WIDTH media queries to move the logo into place.

Add navbar-custom on the navbar.

Remove the brand and navbar-brand and add logo

Adjust other CSS as needed. The CSS BEFORE the min-width media query is for all viewport sizes, the stuff INSIDE the min-width media query is for that min-width and up.

The use of position:absolute puts the logo, at that min-width, out of the document flow, therefore padding is used to put the navbar-nav into position. Notice the values.

The small viewport CSS in this example uses the same logo for both large and small, if the logo goes on dark, you can use the responsive utility classes to hide one and show the other at the min-width or max-width, such as visible-xs on the logo that is to go on the dark background and hidden-xs on the the logo for all other sizes.

CSS

.navbar-custom {
    background: navy
}

.navbar-custom .logo img {
    padding: 15px;
    max-width: 100%;
    height: auto;
}

.navbar-custom .logo {
    float: left;
    padding-right: 40px;
    width: 100%;
}

.navbar-custom .navbar-toggle {
    position: absolute;
    right: 15px;
    top: 15px;
    border: 0px;
    width: 50px;
    margin: 0;
}

.navbar-custom .icon-bar {
    width: 100%;
    margin: 5px 0;
    height: 3px;
}

@media (min-width:768px) { 
    .navbar-custom.navbar {
        height: 200px
    }

    .navbar-custom .container {
        position: relative;
        overflow: visible;
    }

    .navbar-custom .navbar-nav {
        padding: 125px 0 0;
        text-align: center;
        width: 100%;
    }

    .navbar-custom .navbar-nav > li {
        display: inline-block;
        float: none;
    }

    .navbar-custom .logo {
        position: absolute;
        background: #fff;
        left: 0;
        right: 0;
        z-index: 5000;
        display: block;
        float: none;
        padding: 0;
    }

    .navbar-custom .logo:before,
    .navbar-custom .logo:after {
        position: absolute;
        background: #fff;
        content: '';
        left: -2000px;
        width: 2000px;
        bottom: 0;
        display: block;
        height: 100%;
    }

    .navbar-custom .logo:after {
        left: auto;
        right: -2000px;
    }
}

HTML

<!-- Navigation -->
    <nav class="navbar navbar-inverse navbar-fixed-top navbar-custom" role="navigation">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                 <a class="logo" href="#"><img src="http://placehold.it/100x75/000/FFFFFF&text=LOGO" alt=""></a>
            </div>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li>
                        <a href="#/property/list/1">Buy</a>
                    </li>
                    <li>
                        <a href="#/property/list/2">Rent</a>
                    </li>
                    <li>
                        <a href="#/property/list/3">New Properties</a>
                    </li>
                    <li>
                        <a href="#/property/alert">Property Alert</a>
                    </li>
                    <li>
                        <a href="#/resource">E-Learning</a>
                    </li>
                    <li>
                        <a href="#/about">About Us</a>
                    </li>
                    <li>
                        <a href="#/contact">Contact Us</a>
                    </li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container -->
    </nav>

Upvotes: 1

Mayank Gupta
Mayank Gupta

Reputation: 36

Create two navbars and make top position of second navbar to start below first nav bar.

<nav class="navbar navbar-inverse navbar-fixed-top my-logo" role="navigation">
   .....
</nav>
<nav class="navbar navbar-inverse navbar-fixed-top my-menu" role="navigation">

Now create style for second navbar as

.my-menu {
     top: 50px;
}

Upvotes: 0

Dannn
Dannn

Reputation: 316

You could just remove the brand completely from the navbar and then add a div above that navbar with an img attribute which would be your logo

Upvotes: 0

Related Questions