Best size of logo and header image?

Satyajit

Its not mentioned in the admin area

luceos

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 ?

Satyajit

luceos Height 27px,

My PC says, its 241*54

wignu

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;
}

cmwetherell

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.

luceos

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

Totte

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.

jordanjay29

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

Totte

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 ?

jordanjay29

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.

Totte

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

hostmaria

we use 160x60 px