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

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

Home Forums Support Mobile header colours don’t use customized header colours

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1574249
    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.

    Normal people… believe that if it ain’t broke, don’t fix it. Engineers believe that if it ain’t broke, it doesn’t have enough features yet. – Scott Adams

    #1574327
    David
    Staff
    Customer Support

    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.

    #1574492
    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.

    Normal people… believe that if it ain’t broke, don’t fix it. Engineers believe that if it ain’t broke, it doesn’t have enough features yet. – Scott Adams

    #1574525
    David
    Staff
    Customer Support

    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 ?

    #1574537
    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.

    Normal people… believe that if it ain’t broke, don’t fix it. Engineers believe that if it ain’t broke, it doesn’t have enough features yet. – Scott Adams

    #1574564
    David
    Staff
    Customer Support

    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;
        }
    }
    #1574702
    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.

    Normal people… believe that if it ain’t broke, don’t fix it. Engineers believe that if it ain’t broke, it doesn’t have enough features yet. – Scott Adams

    #1575611
    David
    Staff
    Customer Support

    That looks good to me!

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.