Are you a GenerateCustomer?

Do you have an active GP Premium or GenerateBlocks Pro license key?

Create a GenerateSupport account for GeneratePress and GenerateBlocks support in one dedicated place.

Create an account
Already have a GenerateSupport account? Login

Just browsing?

Feel free to browse the forums. Support for our free versions is provided on WordPress.org (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

Mellow template: Site Title on mobile visible while it should be hidden

  • Hi,

    I am using template “Mellow” and have an issue with the Site Title being displayed on mobile devices, even though I selected “Hide site title”.

    On larger screens the site title is hidden, as it should be, but for some reason it is still being displayed on small screens.

    See https://imgur.com/a/5RhY5u6

    I already tried not having a title at all, but then an empty black colored box is being displayed on small screens.

    Please let me know if this can be fixed and how.

    Thanks.

  • Hi there,

    Mellow is using the Mobile Header feature with the Site Title as the branding type:
    https://docs.generatepress.com/article/mobile-header/

    You can try turning off the mobile header setting in the customizer.

    I’m not sure if you would like to keep the black background behind the site title, if you would like to remove it, go to the Additional CSS field in the customizer and remove this CSS:

    .site-branding,
    .navigation-branding {
    	background: rgba(0,0,0,0.8);
    	display: inline-block;
    	padding: 10px 30px;
    	border-radius: 3px;
    	transition: background 500ms ease;
    }
    
    .navigation-branding {
    	padding: 10px;
    }

    Let me know if this helps 🙂

  • Thanks for extremely fast, very helpful answers!

    Turning off mobile header doesn’t work for me as the pop-out menu changes location and I like it to the right where it is.

    The CSS deletion did the trick, it indeed removed the black background and when I do not type anything in the Site Title, it works great.

    But it seems there is some kind of coding error as the Site Title is still being displayed on mobile, even when selecting the Hide site title. But I assume this has not really much to do with you, as it probably the responsibility of the designer, but perhaps you can let him know for the next version.

    Anyway, thanks again for your fast assistance, your trick works for me, so my problem is solved!

    <edit> if want to reverse, paste CSS back on line 71 </edit>

  • If you are using the mobile header feature then you’d either need to upload a mobile header logo or use the site title.

    Glad I could help 🙂

  • Hi,

    sorry to re-open this, but I am having some issues with the Title Tag and empty href tag.

    I do not want to use a logo, nor do I want to use a a site title in the header. Perhaps strange, but this is what I prefer.

    From my understanding, the Title Tag of the homepage is taken from Customize > Site Identity > Site Title. Since I cannot input anything there (otherwise the Title Tag is always displayed on small screens, even when trying to hide it and apparently this is a feature), I cannot seem to have a homepage title tag.

    Is there another option somewhere to input the homepage title tag?

    Another issue of not wanting a logo or text in the header, is that there is now an empty a href link to the homepage.

    Any idea how to solve that as well?

    Thanks again.

  • Hi there,

    can i see your site ? As i am having difficulty picturing the requirement or the issue.

  • Sure, ** deleted **

  • OK.

    1. In Customizer > Site Identity add your Title Tag and leave it as hidden.
    This will allow WP to add it to the sites <title> tag.

    2. go to Customizer > Layout > Header
    2.1 Disable the Mobile Header
    2.2 set the mobile header padding to 0

    3. Add this CSS to reposition the mobile menu:

    
    @media(max-width: 768px) {
        #site-navigation .menu-toggle {
            flex-grow: 0;
            margin-left: auto;
        }
    }
    
  • Thank you, when I tried to do as you suggested, I noticed that there is also an option “Use Navigation as Header”.

    For mobile this looks exactly as always, which is great. For large screens it moves the navigation higher up then before, which actually looks even better!

    So I ended up using that option, which is basically everything I wanted, I just didn’t know the option was there.

    Sorry for wasting your time trying to find a fix for something that ended up not needing any fixing.

    But thanks once again for help, it really is much appreciated!

  • Please, no apologies necessary, we’re glad to be of help!

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