1

Currently I am trying to use the newly added w3-bar class from w3.css to create a top navigation with some buttons and a logo.

If the navigation bar only consists of buttons, everything works fine, since the height of the buttons is the same everywhere.

Now when I try to add a logo to that navigation bar which is higher than the buttons, then the buttons are placed to the top of the bar. 

<div class="w3-border w3-light-grey w3-bar" style="height: 80px">
    <a class="w3-bar-item w3-button" href="#">Home</a>
    <img class="w3-bar-item" src="http://lorempixel.com/200/56/">
    <a class="w3-bar-item w3-button" href="#">Link 1</a>
    <a class="w3-bar-item w3-button" href="#">Link 2</a>
    <a class="w3-bar-item w3-button w3-green w3-right" href="#">Link 3</a>
</div>

I would like to manage it to place the buttons in the vertical middle position so it looks way better.

I can manage this vertically centered buttons when i use w3-cell-row and w3-cell-middle like so:

<div class="w3-border w3-light-grey w3-cell-row" style="height: 80px">
    <a class="w3-cell w3-cell-middle w3-button" href="#">Home</a>
    <img class="w3-cell w3-cell-middle " src="http://lorempixel.com/200/56/">
    <a class="w3-cell w3-cell-middle  w3-button" href="#">Link 1</a>
    <a class="w3-cell w3-cell-middle  w3-button" href="#">Link 2</a>
    <a class="w3-cell w3-cell-middle  w3-button w3-green w3-right" href="#">Link 3</a>
</div>

But if i try to vertically center the buttons in the w3-bar navigation bar, i can't get it to work.

You can check this fiddle to see the two different results:

https://jsfiddle.net/TheChaos/o1cg5e64/

Does anybody know how to vertically center (and fill the navbar) completely with w3.css classes (or some additional css)?

Olli
  • 1,708
  • 10
  • 21

2 Answers2

0

Here ya go, will this solve your issue?

https://jsfiddle.net/byxw86d1/

I've removed the inline-height from the parent div and added a .brand class to the image for styling. Having the navigation items large is better for small screen users, though you can set a breakpoint for that

<div class="w3-border w3-light-grey w3-cell-row" style="height: 80px">

.brand {
  display:block;
  height:auto;
  width:100%;
  margin-bottom:0 !important;
}

<!-- create full size image for larger screen OPTIONAL -->
.w3-cell-row {
  display:block;
}
Showcase Imagery
  • 372
  • 2
  • 19
  • Your solution is using the w3-cell-row, but i need the expected behaviour on the w3-bar class, since it uses some other horizontal layout. so no, this one does not seem to work unfortunately. – Olli Mar 20 '17 at 15:26
0

i'm adding another answer as i believe the first answer to still be helpful for some readers.

https://jsfiddle.net/showcaseimagery/8r9bmgm3/

the .w3-bar-item of this CSS will do it, i've added the other two styles for optionals

.w3-bar-item {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

#brand {
  display: block !important;
  padding: 0 !important;
}

img#brand {
  height: 100%;
  width: auto;
}

with the only alteration to the html as #brand

Showcase Imagery
  • 372
  • 2
  • 19