nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Zen Header not used on built in pages

Eric Lebetsamer

I've implemented a custom zen header. And it works great on content pages etc. But the header doesn't appear to show up on some of the built in site pages, like: the dashboard; page not found; search page; etc.

Since the zen header isn't being displayed universally, it is breaking my design. Is there any way to get the zen header to display universally and on all confluence pages?

A content page: it includes the correct Zen Header.

A built in confluence page: Does not include the Zen Header.

My Zen settings:

Accepted answers

Kelli Hoyt

Hi Eric,

Thanks for your quick reply. You should still be able to repeat an image as a background for your header --- but perhaps I am not understanding what you are after. I see from your screenshot that you have a white band that extends to the left edge of your canvas, but ends to the right of the search box. Is that what you are trying to achieve everywhere?

Also, on that search box, that is actually a bug in Zen. We have a fix coming in the next release that should take care of it, so that your repositioned Search box will appear on all pages, including system.

All comments

Darryl Duke

Hi Eric,

Make sure that the "Site Master Space" (in the Admin Console's Zen Foundation's Site Settings panel) is pointing to the space where you have your .zen.header defined. Also, I'm assuming your Confluence site theme is set to use Zen Foundation.

Let me know if that doesn't do it!

Eric Lebetsamer

I've added some screen shots to better show the issue. In the confluence admin, I've got everything pointed to the correct header. And it works as expected for spaces and content pages. The header isn't included on the out of the box confluence pages though. As shown in my screen shot, it is not included on the search results page.

Darryl Duke

Okay, thanks. While I chew on this, would you do me a favor and try adding this CSS to your brand:

#wrapper #header #zen-header {
height: $zenHeaderHeight;
}

It's a patch we made to Zen 5.2.7 (previously the header was being cut short). I don't think that's the issue here, but thought I'd eliminate it...

Eric Lebetsamer

Ok, I added this and nothing changed. I previously had this anyways:

#wrapper #header #zen-header
{
	height: 100%;
}

Darryl Duke

Thanks, I figured you had something in order for it to show on the space pages.

I'm going to have to bring in the the big guns (our graphic designer) for support. :-)

Stay tuned...

Kelli Hoyt

Hey Eric,

I'm sure we can get you sorted.

To bring me up to speed, can you tell me *how* you're bringing in that custom header? (with the brand designer? custom CSS? other?) There are a few different approaches for that in Zen, depending upon your objective, so just want to be sure I'm targeting the right thing here.

cheers,

Kelli

Eric Lebetsamer

I am using a .zen.header for some markup and then I'm using a custom css file via the brand designer. When I view source, the markup from the .zen.header file is not being included.

Kelli Hoyt

Ah -- OK. So we normally don't use the .zen.header to bring in the background header images ... but instead use that for feature images, or login links, social links, etc. (and we expect those bits to not come in on search, dashboard, etc. -- the .zen.header is really oriented around site content.)

Have you tried using the options under Background & Header in the Brand Designer?

thanks for your patience!

Eric Lebetsamer

Ahh, ok. I wasn't aware of that "limiation". I can't say I understand the logic of only including the header in "content" pages though. I guess I can rework my css and background images to work without using the .zen.header, but it seems more limiting this way. Using .zen.header allowed me to have a site that could basically expand to any width and still look the way I wanted because the middle section of my .zen.header had a background that could repeat. But using a single background image will impose more of a limiti on me. Another problem though is that the search box also doesn't get moved on non content pages. So I have the search box set to relocate to #header, and it works as expected on content pages, but not on "system" (like search results, dashboard, etc) pages.

Kelli Hoyt

Hi Eric,

Eric Lebetsamer

Correct. In the version I have now, I have actually split the header into 4 parts: 1. Left edge 2. Our company logo (on the left of the "Developer Portal" logo, not seen in above screen shots). 3. Developer Portal logo. And 4, the right end cap. This allows me to expand the site as wide as i want without having to maintain a really wide background image for the header (since I'm basically just using a small end cap, and then a repeating 1px for the center and left side). Using the designer background & header, I'm going to have to maintain a single wide image to fill the entire space. It just seems less optimal in the long run.

Eric Lebetsamer

Oh, and can you give me an idea of when the next release will be out?

Kelli Hoyt

Hey Eric,

That search fix will be in Zen 5.2.7, which you can expect within the next four weeks. Thanks!

Welcome!

It looks like you're new here. Sign in or register to get started.

Quick Links

Find more posts tagged with

confluence

header

addon-com.zenfoundation