[Resolved] Logo for front page in elements

[Ketil]

Hello. I have added a logo meant only for the frontpage, and was wondering how I can change the size and placement for this, without effecting the logo on the rest of the pages. Couldn’t find any settings for it. Wanted to make it bigger and place it a little different than in the default header.

PS. Can I make a custom element for mobiles/small screens?

[David]

Hi there,

you could use some CSS to change its style/position:

@media(min-width: 769px) {
  .main-navigation .page-hero-logo {
    /* styles here */
  }
}

Do you need a hand with changing its size position in CSS? If so let me know the changes you want to make… note the above CSS is applied a desktop size only so won’t apply to mobile.

[Ketil]

I’m not that good writing CSS anymore, I just put “height” and “width” in without any reference to the logo-file, and it will work? same with padding/margin?

[Leo]

Try something like this:

@media(min-width: 769px) {
    .main-navigation .page-hero-logo {
        padding-left: 40px;
    }
    .main-navigation .page-hero-logo img {
        width: 150px;
        height: auto;
    }
}

[Ketil]

Thanks, great. Is there a way to have one element for large screens, and a different one for small screens?

[Leo]

Not for a header element.

What are you wanting to change on mobile?

[Ketil]

The big image doesn’t look good on a mobile/small screen. Lots of blue heaven an no content, so I wanted to make one that prints the welcome text in view.

[Leo]

Can you first try reducing the padding for the mobile screen first?
https://docs.generatepress.com/article/header-element-overview/#padding

[Ketil]

Perfect, didn’t notice the mobile padding settings. Thanks again.

[Leo]

No problem 🙂

[Author]

Posts