frontpage - change header height on 2017 theme for logged in users

When a guest sees the homepage they see the (almost) full height picture which is quite nice I think.

However, when a user logs in I'd like them to be redirected to the home page but with a much shorter picture (as the picture appears on the internal pages of the site).

I know I could redirect logged in users to a faux front page, but is there a way of changing the height of the main header picture depending if the user is a guest or logged in?

When a guest sees the homepage they see the (almost) full height picture which is quite nice I think.

However, when a user logs in I'd like them to be redirected to the home page but with a much shorter picture (as the picture appears on the internal pages of the site).

I know I could redirect logged in users to a faux front page, but is there a way of changing the height of the main header picture depending if the user is a guest or logged in?

• frontpage
• theme-twenty-seventeen

Share Improve this question asked Feb 12, 2019 at 15:59 arathraarathra 4511 gold badge11 silver badge33 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

WordPress will automatically add a body class to the body tag if a user is logged in. You could potentially use this to adjust the height.

For example..

.logged-in #myElement {
    ...Your CSS
}

Something like this should work.

.logged-in.twentyseventeen-front-page.has-header-image .custom-header-media {
    height: calc(70vh);
}

Note the calc 70vh is 70% of viewport height, so adjust to what you need.