[Support request] Mobile header colours don’t use customized header colours

[nomind]

Why doesn’t the mobile header use the colours set for Sitename and Tagline in Customize->Colors->Header?

We have customized our header to look like phpBB’s header, settting the Sitename and Tagline as #FFFFFF (white) and including using a gradient background via Additional CSS

.site-header {
    background-color: #12A3EB;
    background-image: -webkit-linear-gradient(top, #6ACEFF 0%, #0076B1 2px, #12A3EB 92px, #12A3EB 100%);
    background-image: linear-gradient(to bottom, #6ACEFF 0%,#0076B1 2px,#12A3EB 92px,#12A3EB 100%);
    background-repeat: repeat-x;
}

I would expect at a minimum the mobile header would utilize the customized headers colours. Instead they seem to stay black on white background, regardless of the customized colours.

I’m also trying to figure out what CSS class I need to change to get the gradient above to work for the mobile header.

[David]

Hi there,

the Mobile Header uses the Primary Navigation colors. Which lead to the tricky decision as to what the Mobile Site Title color should be. We choose to maintain primary nav colors over the site title color. In the majority of sites we see the Primary Nav Background colors were often different to the Site Header – which lead to the site title being indistinguishable eg. Black site title displayed in a Black Mobile Header background.

Can you share a link in regards to the Gradient ? And do you want some CSS to change the Mobile Site title.

[nomind]

the Mobile Header uses the Primary Navigation colors. Which lead to the tricky decision as to what the Mobile Site Title color should be. We choose to maintain primary nav colors over the site title color.

Understood but my searching of the documentation didn’t find anything about it.

The site is https://www.financialwisdomforum.org/ and the header is a nod to our phpBB forum, https://www.financialwisdomforum.org/forum/index.php. I’ve got the desktop/tablet header matching up pretty well but try both on a smartphone (or via device emulation) and you can see what I’m trying to accomplish with the mobile header.

Absolutely open to some CSS to change the Mobile Site title and mobile header in general.

[David]

I’ll make a note of the missing docs …

Do you want to keep the Site Title with Grad Background above the menu bar ? Or keep it as is with the Site Title and Hamburger in line ?

[nomind]

Do you want to keep the Site Title with Grad Background above the menu bar ?

That is the intention, at least for now.

Ultimately the goal is consistent branding across multiple parts of the site that use WordPress/MediaWiki and phpBB, each of which brings different things to the party. Users shouldn’t care (or know) what software underlies the site. Of course that’s the theory, reality is much different but we try our best.

[David]

In that case you would need to disable the Mobile Header in Customizer > Layout Header, this will keep the Desktop Site Header. We can then apply some CSS to remove the header widget and tag line:

@media(max-width: 768px) {
    .site-description,
    .site-header .header-widget {
        display: none;
    }
}

[nomind]

Thanks once again for the prompt support.

@media(max-width: 768px) {
    .site-description,
	  .site-logo,
    .site-header .header-widget {
        display: none;
    }
    button.menu-toggle {
    text-align: left;
    }
}

I tweaked it a bit further to turn off the logo and return the menu to left justified. Comments/corrections are most welcome if you can improve the coding.

It is currently being tested on our staging site and will deploy to production later today.

[David]

That looks good to me!

[Author]

Posts