CODEWITHSUNDEEP
htmlcsstwitter-bootstrapnavbar
riv
riv

Reputation: 89

Centering Brand image in navbar

I need some help with a nabber, I've been researching and can't quite come up with a good solution. What I want to accomplish is for the icon to be in the middle when the screen is small for example small devices.

When viewed through a desktop the brand should be on the left with a big logo and to the right the links and buttons.

when viewed in a small screen I would like the button on the right, toggle menu on the left and brand icon to be centered depending on the width of the device. I have tried moving the icon left:50px; but it's not responsive always.

Thank you for your help with any pointers, My code sample is in the link below, and I am using these images I found on google, not my final images.

I know that all devices have different screen sizes but i think If i can successfully do one, I can manage the others, correct?

https://jsfiddle.net/irvgonz/mku4enff/2/

<!-- Work on this new nav -->
<nav role="navigation" class="navbar navbar-default navbar-fixed-top" width="100%" height="" id="navbar">
  <div class="container">
    <!-- Brand Logo-->
    <div class="navbar-header pull-left hidden-xs">
      <a class="navbar-brand" href="#">
        <img id="logo" alt="Brand" src="http://www.underconsideration.com/brandnew/archives/facebook_2015_logo_detail.png" />
      </a>
    </div>
    <div class="navbar-header pull-left visible-xs-block">
      <a class="navbar-brand" href="#">
        <img id="icon" src="https://image.freepik.com/free-icon/facebook-symbol_318-37686.png" />
      </a>
    </div>
    <!-- Donate Button stays outside the menu pulldown-->
    <div class="navbar-header pull-right">
      <ul class="pull-left">
        <button id="btn" type="button" class="btn btn-default navbar-btn"> <b>button</b> </button>
      </ul>
      <!-- Place for the menu collapse-->
      <button id="togglebtt" type="button" data-toggle="collapse" data-target=".navbar-collapse" class="navbar-toggle collapsed">
        <span class="glyphicon glyphicon-menu-hamburger"></span>
      </button>
    </div>
    <!-- Rest of Menu -->
    <div class="collapse navbar-collapse pull-right">
      <!-- once open and collapsed items will be on left -->
      <ul class="nav nav-pills pull-left">
        <li class="header-nav">
          <a href="#" class="header-nav" id="mission"> <b>our Mission</b> </a>
        </li>
        <li class="header-nav">
          <a href="#" class="header-nav" id="join"> <b>join us</b> </a>
        </li>
        <li class="header-nav hidden-sm">
          <a href="#" class="header-nav" id="about"> <b>the team</b> </a>
        </li>
        <li class="header-nav hidden-sm">
          <a href="#" data-toggle='modal' class="header-nav" id="contact"> <b>CONTACT US</b> </a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Upvotes: 0

Views: 190

Answers (1)

Jacob Goh
Jacob Goh

Reputation: 20845

https://jsfiddle.net/up6kcu5q/1/

Using position: absolute would work in this case

@media (max-width: 767px) {
  .container > .navbar-header.visible-xs-block {
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
       -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
         -o-transform: translateX(-50%);
            transform: translateX(-50%);
  }
}

You still need to adjust the breakpoint by the way.

Hope that this helps

Upvotes: 1

Related Questions