CODEWITHSUNDEEP
htmlcsstwitter-bootstrapcenternavbar
user3226760
user3226760

Reputation: 61

Bootstrap: large centered logo navbar

I wouuld like to make the logo appear larger and centered above the navbar. Any help will be greatly appreciated.

Here's the code: https://jsfiddle.net/ou51rksb/1/

<body class="home">
    <!-- wrapper -->
    <div id="wrapper" class="win-min-height">
        <header id="block01g" class="header block background01" zp-module="Header">
            <div class="container header_block">
                <a class="navbar-brand" href="#">
                    <img class="blacklogo img-responsive" src="images/logob.png" alt="Bañuelos Refrigeration Services">
                    <img class="whitelogo img-responsive" src="images/logob.png" alt="Bañuelos Refrigeration Services">
                </a>
            </div>
        </header>
    </div>
</body>

Upvotes: 0

Views: 1032

Answers (3)

Jishnu V S
Jishnu V S

Reputation: 8407

try with this i have centered your logo simply , is this what you need ?

.navbar-brand {
  display: block;
  float: none;
  font-size: 18px;
  height: auto;
  margin: 0 auto;
}

http://jsfiddle.net/ou51rksb/12/

Upvotes: 0

ab29007
ab29007

Reputation: 7756

Use position:absolute; for navbar-brand. Add this to your css:

.header_block{
  position:relative;
  padding:0;
  padding-top:45px;
}
.navbar-brand{
  position:absolute;
  top:0;
  left:50%;
  height:70px;
  transform:translate(-50%,0);
}
.navbar-brand img{
  height:100%;
  margin:0 auto;
  display:block;
  margin-bottom:100px;
}

Here's a fiddle. You have set some padding at the top of your body. which you can remove. that will get your logo aligned to the top.

Upvotes: 2

Jenti Dabhi
Jenti Dabhi

Reputation: 880

Please replace this css

#block01g .navbar-brand {
  display: block;
  float: inherit;
  margin: 0 auto;
  padding-bottom: 0;
  padding-right: 0;
  text-align: center;
  width: auto;//you add width for logo
}

Upvotes: 0

Related Questions