Center header-content

[flavoni]

Hi Css-tricks masters of code :)

Site: https://klvunge.mystagingwebsite.com/category/drawings/
When scrolled you clearly see that the categories along with the back-link is aligned to the bottom of the white background. How do I center this?

KIKO

[Shikkediel]

Here’s one way of doing it:

#site-branding, #menu-menu {
  -webkit-transform: translateY(-20px);
  transform: translateY(-20px);
}

[flavoni]

It seems to work somewhat, but in a more narrow window, (mobile-size, when categories breaks into a single “menu”) the category-content is aligned at bottom and logo-text at the top. Any solution for this?

Thanks for help!

[Shikkediel]

I think I overlooked that I tested that style inside a media query. This seems to be the relevant one:

@media screen and (min-width: 1100px) {

}

[flavoni]

Ok, so how would a complete line in custom css look like?

@media screen and (min-width: 1100px) {

}

–TOGHETER WITH THIS–

#site-branding, #menu-menu {
-webkit-transform: translateY(-15px);
transform: translateY(-15px);
}

[Shikkediel]

It (and possibly other style rules) can be nested inside the media query:

@media screen and (min-width: 1100px) {
#site-branding, #menu-menu {
  -webkit-transform: translateY(-15px);
  transform: translateY(-15px);
}
}

[flavoni]

Many thanks to you Shikkediel. It works.

[Shikkediel]

Cheers, nice looking site by the way.

[Author]

Posts