Irv Irv - 3 months ago 9
HTML Question

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>




Answer

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

Comments