Header – Menu/Social On Different Lines

Hey there zscheimer,

How are you doing today?

There are several way this can be done with CSS depending on what you want as an end result. Please try adding the following code to Appearance -> Customize -> Advanced Options -> Custom CSS:

.nav-collapse.collapse {
  clear: none;
}

This will simply put socials and menu in the same line like this https://screencast.com/t/Yf2ypGmkN. If you’re looking to keep the height of that element it or reposition it please let me know.

Hope this helps ??

Best regards,
Bojan

That is exactly what I wanted! Is there any way to justify that at the bottom instead of the top?

Hey again zscheimer,

If you’re looking to place the whole box at the bottom of the header you can also add this as well the code above:

.navbar .navbar-inner {
  margin-top: 60px;
}

You can also add the following if you want to move menu items and socials within that box slightly so they are aligned to middle vertically:

.pull-menu-right .nav-collapse {
  padding-top: 9px;
}

.navbar-inner .social-block {
  padding: 4px 20px 0 10px;
}

This should be the end result https://screencast.com/t/J46ra0fu3flv.

Please let me know if this helps ??

Cheers,
Bojan

Awesome thanks!

Happy to help!

Cheers,
Bojan