Quick search on narrow screens

[pablopeu]

Thanks for the update! On narrow screens, such as mobile, the quicksearch box does not take into consideration the height of the page logo defined in darkroom and overwrites anything thats taller than the menu.

A solution could be the one used by header manager plugin which defines the size before the upload. (I know, another solution would be making a page logo not taller than the menu, but logo would be rather tiny...)

[tkuther]

That hasn't anything to do with the quicksearch. If you disable it, then that vertical divider will overlay the image. In Bootstrap, the navbar has a fixed height, and the collapsed menu on mobile is faded in at a certain position.

If you want it to be taller, use custom CSS like

.navbar-main {
  min-height: 80px;
}
.navbar-main .navbar-collapse {
  margin-top: 50px;
}

(adjust values to the height of you image, above values seem to work in your case)

[pablopeu]

Thanks Thomas!! it works nicely on mobile, but on desktop it creates an innecesary empty space, if its the solution will have to live with it ☺

On Tue, Feb 28, 2017 at 5:01 AM, Thomas Kuther notifications@github.com wrote:

That hasn't anything to do with the quicksearch. If you disable it, then that vertical divider will overlay the image. In Bootstrap, the navbar has a fixed height, and the collapsed menu on mobile is faded in at a certain position.

If you want it to be taller, use custom CSS like

.navbar-main { min-height: 80px; } .navbar-main .navbar-collapse { margin-top: 50px; }

(adjust values to the height of you image, above values seem to work in your case)

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/tkuther/piwigo-bootstrap-darkroom/issues/38#issuecomment-282969523, or mute the thread https://github.com/notifications/unsubscribe-auth/AYlubE9Awz9YVe6IMBaZXH1FzBLnr4CGks5rg9RsgaJpZM4MNv84 .

[tkuther]

You can use a media query to affect only mobile devices, like so:

@media (max-width: 767px) {
  .navbar-main {
    min-height: 80px;
  }
  .navbar-main .navbar-collapse {
    margin-top: 50px;
  }
}

[pablopeu]

Thank you, thank you, thank you, are you sure about the beer thing? Cheers!!!

On Tue, Feb 28, 2017 at 4:39 PM, Thomas Kuther notifications@github.com wrote:

You can use a media query to affect only mobile devices, like so:

@media (max-width: 767px) { .navbar-main { min-height: 80px; } .navbar-main .navbar-collapse { margin-top: 50px; } }

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/tkuther/piwigo-bootstrap-darkroom/issues/38#issuecomment-283140912, or mute the thread https://github.com/notifications/unsubscribe-auth/AYlubLKszWkyauAxqla0znSeocPBoyTdks5rhHfwgaJpZM4MNv84 .