[Resolved] Header image not going full width

[Chance]

Hi Tom, I love the concept of your theme with the option to only pay for the add on’s I want, thank you! However, I’ve paid and installed the Header add on, and 2 hours later I don’t see the point of paying for it because I’ve been down a rabbit hole looking for answers to make my header image full width which I thought the add on would effortlessly do?

It’s now up to 1700px and still won’t go full width, argh! Please help, I’ve found all these CSS solutions you’re suggesting but I have no idea where that’s meant to go!? Maybe Header.php and if so where in there!? Eeek!

Here’s my site: http://secretsourceacademy.com/

Oh and I’ve tried removing padding from between the header where my logo is and the header image but, no go. I’m just in struggle town. I’ve tried the fluid vs contained, I’ve checked for the latest update, I’ve watched your videos… 🙁

Appreciate your help and support.
Chance 🙂

[Tom]

Hi there,

Sorry you’re having such trouble! There’s an option to set the background image to full width, but not the regular image. This is something I totally have to add.

Here’s the CSS you need:

.page-header-image.grid-container {
      max-width: 100%;
      margin-top: 0;
}

.page-header-image img { 
      width: 100%; 
}

To add it, this article may be helpful: https://generatepress.com/knowledgebase/adding-css/

Let me know 🙂

[Chance]

Oh wow Tom, thank you so much! Such a quick reply, I really appreciate it. Yes please do add it for future users – In the meantime, it worked! Child theme installed, CSS added, yay!

Do I need to start another thread to ask about how to replicate the menu that sits to the right of your logo in your demo? http://demo.generatepress.com/

I’ve got my logo there, I’ve got the menu widget active, but how do you get it to run horizontal like your demo and not stacked like mine? http://secretsourceacademy.com/

Thanks again 🙂

[Tom]

It looks like you’re using a widget to display the menu there, which is why it’s stacked.

You can set your navigation position to “Float right” in “Customize > Layout”.

Also, if you have our Secondary Nav add-on, you can set the secondary navigation to float right as well in “Customize > Secondary Navigation > Secondary Navigation > Navigation Position”.

Hope this helps 🙂

[Chance]

Thanks Tom, got it. Appreciate your help and quick replies! Have a great day/night 🙂

[Tom]

Great! You too 🙂

[Author]

Posts