Center Logo in Running Head/Background Image

Backlight 4, 5 & 6 Support
#1

Hi,

in Pangolin there is an option to center the logo image in Masthead.
I cannot find a similar option in Kookaburra.

How can I center the logo in Kookaburra?

Another question? Is it possible to define a background image in Kookaburra?

Best,
Joe

#2

Hi Joe,

You can add a background image to the Header and an image to the Running Head.
Adding a background image elsewhere looks like it would require custom css.
If you could be more specific, someone here could probably come up with the css.

centering a logo probably needs custom css as well.
A link to a page with an uncentered logo would help.

#3

Thanks Rod,

Please look at Joes Essay - Augenblicke.

I want the logo and the background of the blog (Kookaburra) to look like the rest of the page (pangolin).

#4

@Matthew will need to chime in. Kookaburra is a lot different than Pangolin. I’m pretty decent at figuring out css for Pangolin, but Kookaburra uses the css flexbox layout and I’m not all that familiar with it.

as far as the page background image, I can inspect and copy the css from the Pangolin page and apply it to what looks to be the appropriate selector for Kookaburra.

It may not be an exact match, but this is what I found to work:

.page {
  background-attachment: scroll;
  background-image: url('/backlight/designer/page/image/3?v=36');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

Then you’d need to set backgrounds for other areas to transparent, which I believe will take more custom css. Like:

.running-head {
  background-color: transparent;
}

and

.main {
background: transparent;
}
#5

The running head isn’t mean to be used the way you’re using it, and you’ve made a bit of a mess of your mobile experience with whatever customizations you’ve done.

Screenshot 2024-03-08 at 17.01.43
Screenshot 2024-03-08 at 17.01.43800×1708 136 KB

For a header that large, you would be better off using the Header options in the template.

#6

Thanks Rod and Mat,

The css solutions works except one thing. How can I set a transparent background for the main navigation menu?

#7

try this:

@media screen and (min-width: 1025px) {
  .main-navigation > ul > li:not(.drop-item), .main-navigation > ul > li.drop-item + li.drop-trigger button {
    background-color: transparent;   
  }
}
#8

Great. Now I switched to Kookaburra :grinning:
Thanks for all the help.

Btw: Thanks for the Info about Wordpress selling user data. I´ll be switching to the backlight essay .

1 Like
#9

Hi all,

similar question here.
How to center a logo image in the Kookaburra Running Head with the Navigation below the image?

Best regards,Oliver

#10

Please let me know if there is a solution to center an image in the Running head with navigation below it or not. :thinking:

Thx in advance.
Best regards,
Oliver

#11

Sometimes it helps if you have a link to show what you have right now. Looks like a task for custom.css.

#12

So far, I’ve found no solution. Getting the navigation below the running head is easy, but centering a logo? I’ve not found a way. Kookaburra uses flexbox, and I’m not that familiar with it. Maybe Daniel or @Matthew will have an idea.

#13

Hi, thanks for your replies.

here is a link to my Running Head:
https://theraumphotography.com/

best regards,
Oliver

#14

I don’t know about centering the logo, but to place the navigation below the logo, take the nav out of the Running Head and place it Beneath the Header

image
image408×804 14.2 KB

#15

As Rob mentioned, currently the navigation is inside the header and the logo doesn’t have it’s own <div>. So we can’t easily manipulate them with custom css.