Height 27px, width whatever you like. This I stole from discuss.flarum.org. On the other hand you could easily have the header grow along if you need a larger logo and increase the font etc of the menu items ?

    My logo size is a max height of 60px so had to add some custom CSS to adjust the header height to 70px:

    Logo Size:

    .Header-logo {
   position: absolute;
   max-height: 60px;
   vertical-align: middle;
   margin:-10px;
   top: 15px;
 }

    Increase Header Height:

    .App::before {
  height: 70px;
  vertical-align: middle;
}

#admin-navigation {
  top: 70px;
}

    Lower notifications and search items on the header so they align in middle vertically:

    .App-header .Search-input {
  padding-top: 10px;
}

.Header-navigation {
  margin-top: 10px;
}

      Satyajit that's the original size.. Not the size it's displayed as.

        3 months later

        I'm using the custom CSS mentioned by @wignu , however it does not work well with the "Links" extension.

        I'm getting this overlapping, anyone better at CSS than myself got a fix for it? This "Link" menu also need to be aligned in the middle, it's uneven with the search and all that.

          Totte position:absolute is doing it. Try position:relative and play with the margin (or add padding) to get it aligned.

              jordanjay29 Relative does not work, the makes the logo drop down to the bottom edge. But wouldn't I need a CSS class for the Links menu to align that one? I'm so lost at CSS ?

                  Totte You could do that. It probably just takes playing with it, and you can use the web developer in most browser (F12) to do it in real time without constantly adjusting what Flarum has saved.

                      jordanjay29 Thanks for the web dev tip ? I've been changing the CSS, then clearing my CF cache over and over..

                        3 years later
                        2 months later

                        wignu Unfortunately, this code doesn't seem to work for mobile.

                        I just made the code not apply to any screen width < 766 by adding this:

                        @media only screen and (min-width: 768px) { #CSS }

                        The tablet version looks okay from 768 width to 991 width, so I left it. At 992 and up width, it looks good.