{"id":3341,"date":"2015-07-28T15:15:55","date_gmt":"2015-07-28T19:15:55","guid":{"rendered":"http:\/\/www.rocketshipgames.com\/blogs\/tjkopena\/?p=3341"},"modified":"2022-07-01T13:31:50","modified_gmt":"2022-07-01T17:31:50","slug":"bootstrap-navbar-vertical-alignment","status":"publish","type":"post","link":"https:\/\/www.rocketshipgames.com\/blogs\/tjkopena\/2015\/07\/bootstrap-navbar-vertical-alignment\/","title":{"rendered":"Bootstrap Navbar Centered Vertical Alignment"},"content":{"rendered":"

Recently I was working on a website layout using Bootstrap<\/a> for which the design called for a large logo image as the navbar brand, with the navbar entries vertically centered with\u00a0it. I thought\u00a0“Yo, that’s crazy, there’ll be a lot\u00a0of dead space in the navbar,” but the designer\u00a0just said “Yo, I am crazy, do it.”<\/p>\n

There’s many StackOverflow questions and blog posts<\/a>\u00a0on vertically aligning a\u00a0Bootstrap navbar, but most of them don’t really work. Worse, all of the working solutions I found\u00a0involved manipulating the line height of the entries. Unfortunately, that also fails with an\u00a0additional crazy designer requirement: The navbar entries might be multi-line, so\u00a0playing\u00a0games with line-height<\/code> thus wouldn’t arrange each entry’s\u00a0text\u00a0correctly.\u00a0Eventually\u00a0I was able to work out the details of another approach using table-cell<\/code>, shown in this post. As is typical with HTML\/CSS, especially with Bootstrap thrown\u00a0in, and double\u00a0especially regarding vertical alignment, the actual code is really short and seems obvious, but is much less so when trying\u00a0to work out the magical incantation from scratch.<\/p>\n

This demonstration is built on a Bootstrap’s Starter Templates<\/a>, showing a navbar fixed to the top of the screen<\/a>.\u00a0I’ve just switched the navbar\u00a0from navbar-inverse<\/code> to navbar-default<\/code> to use the lighter color scheme and added dummy text<\/a>:<\/p>\n

\"step00\"<\/a>Note that the\u00a0basic Bootstrap styling\u00a0does not by default work with the fixed top, it obscures the page title. This is fixed in the last step of this demo.<\/p>\n

Next I change the brand (“Project Name” in the template) to a large logo image and made one of the menu entries multi-line by fixing the width of the entries. The logo especially\u00a0doesn’t work out well:<\/p>\n

\"step01\"<\/a><\/p>\n

Adjusting the Bootstrap navbar’s height requires\u00a0adjusting the height of both the navbar<\/code> and navbar-header<\/code> class entries. The latter is used when the\u00a0navbar is collapsed for small screens, to start the nav menu rolldown at the right place. Bootstrap’s default\u00a0navbar brand top and bottom padding is 15px, so for my logo I increase the minimum height to 202px, 30px more than its height:<\/p>\n

\r\n.navbar        { min-height: 202px; }\r\n.navbar-header { min-height: 202px; }\r\n<\/pre>\n
\"step02\"<\/a><\/p>\n
Moving on to the actual objective here, the first step is to vertically align the navbar entries among themselves along their middles. The easiest, most elegant way to do this is to change their display<\/code> style to table-cell<\/code>, which respects the vertical-align: middle<\/code> property. There are two gotchas to this: The parent list must be set to display: table-row<\/code> mode, and, more obscurely but sensibly in retrospect, the cells cannot be floats. Note that, unlike a few comments I did find, the parent container does not need to be in mode display: table<\/code>. Thus:<\/p>\n
\r\n      #navbar > ul {\r\n      display: table-row;\r\n      }\r\n      \r\n      #navbar > ul > li {\r\n      display: table-cell;\r\n      float: none;\r\n      vertical-align: middle;\r\n      }\r\n<\/pre>\n
\"step04\"<\/a><\/p>\n
At this point the whole navbar line just needs to be shifted downward to center it with the logo. There is probably some convoluted mechanism or arcane invocation to do this automatically, but I’ve just been doing it by hand. To keep calculations simple I first add the padding to the navbar, and then shift the row down:<\/p>\n
\r\n      #navbar {\r\n      padding-top: 15px;\r\n      }\r\n      \r\n      #navbar > ul {\r\n      padding-top: 48px;\r\n      }\r\n<\/pre>\n
\"step05\"<\/a>
\nNote that for middle alignment it’s not necessary to set the height of the row, it just needs to be moved down by the padding.<\/p>\n
After that the last tweaks are to center the cells and shift the page contents down below the heightened navbar:<\/p>\n
\r\n      #navbar > ul > li {\r\n      text-align: center;\r\n      }\r\n\r\n      body {\r\n      margin-top: 202px;\r\n      }\r\n<\/pre>\n
\"step06\"<\/a><\/p>\n
Unfortunately this doesn’t really work well when the navbar collapses\u00a0into the mobile navigation list dropdown:<\/p>\n
\"step07\"<\/a><\/p>\n
To address that, all of the above needs to be wrapped in a media query\u00a0such that the stylings only take effect when the navbar is not collapsed. By default in Bootstrap this is when the window is at least 768px wide:<\/p>\n
\r\n      @media (min-width: 768px) {\r\n\r\n        #navbar {\r\n        padding-top: 15px;\r\n        }\r\n      \r\n        #navbar > ul {\r\n        display: table-row;\r\n        padding-top: 48px;\r\n        }\r\n      \r\n        #navbar > ul > li {\r\n        display: table-cell;\r\n        float: none;\r\n        vertical-align: middle;\r\n\r\n        text-align: center;\r\n\r\n        width: 80px;  \/* crazy designer's fixed-width, multi-line entries *\/\r\n        }\r\n      }\r\n<\/pre>\n
\"step08\"<\/a><\/p>\n
And with that, the objective of vertically centering multi-line entries with a large logo in a Bootstrap navbar is accomplished. #victory!<\/p>\n","protected":false},"excerpt":{"rendered":"
Recently I was working on a website layout using Bootstrap for which the design called for a large logo image as the navbar brand, with the navbar entries vertically centered with\u00a0it. I thought\u00a0“Yo, that’s crazy, there’ll be a lot\u00a0of dead space in the navbar,” but the designer\u00a0just said “Yo, I am crazy, do it.” There’s … Continue reading →<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":3350,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[58],"tags":[104,294],"class_list":["post-3341","post","type-post","status-publish","format-standard","hentry","category-code","tag-html5","tag-web-design"],"_links":{"self":[{"href":"https:\/\/www.rocketshipgames.com\/blogs\/tjkopena\/wp-json\/wp\/v2\/posts\/3341","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.rocketshipgames.com\/blogs\/tjkopena\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rocketshipgames.com\/blogs\/tjkopena\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rocketshipgames.com\/blogs\/tjkopena\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rocketshipgames.com\/blogs\/tjkopena\/wp-json\/wp\/v2\/comments?post=3341"}],"version-history":[{"count":10,"href":"https:\/\/www.rocketshipgames.com\/blogs\/tjkopena\/wp-json\/wp\/v2\/posts\/3341\/revisions"}],"predecessor-version":[{"id":3364,"href":"https:\/\/www.rocketshipgames.com\/blogs\/tjkopena\/wp-json\/wp\/v2\/posts\/3341\/revisions\/3364"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.rocketshipgames.com\/blogs\/tjkopena\/wp-json\/wp\/v2\/media\/3350"}],"wp:attachment":[{"href":"https:\/\/www.rocketshipgames.com\/blogs\/tjkopena\/wp-json\/wp\/v2\/media?parent=3341"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rocketshipgames.com\/blogs\/tjkopena\/wp-json\/wp\/v2\/categories?post=3341"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rocketshipgames.com\/blogs\/tjkopena\/wp-json\/wp\/v2\/tags?post=3341"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}