[Resolved] Top of Mobile Header not visible

[metcomllc@aol.com]

For my subdirectory site using “Niche” (password is 4444 to see the site) I have 3 questions/issues:

1) The top of the mobile header is not visible. I have inserted the following

#mobile-header img { width: 100%; height: auto; }
h1.entry-title {
display: none;
}

2) How do I remove the right column on the main page?

3) Can I change the order of the categories visible on the main page under “By Category”? If yes, how?

[Leo]

Hi there,

1. Looks like the code you’ve added is causing the issue. What happens when you remove it?

2. I’m not sure what you are referring to with right column? Can you explain a bit more?

3. You will need to ask WooCommerce’ support for this.

[metcomllc@aol.com]

1) When I remove it, the mobile header shrinks and is left aligned. I removed the code so you can see what it looks like.

2) The “Niche” theme has 2 columns on the top of the main page (desktop). I want to remove one of them

3) The categories are in alphabetical order. How can I manipulate that in the “Niche” theme?

[Leo]

1. Didn’t we already solve this issue? What happened to this CSS here?
https://generatepress.com/forums/topic/mobile-header-13/#post-1067360

2. Are you referring to this?
https://www.screencast.com/t/EKYg0fUz

If so you just need to remove the columns block then add a paragraph or HTML block instead.

3. Niche is just using WooCommerce product shortcode. You will need to check with WooCommerce support to see if you can modify the order.

[metcomllc@aol.com]

1) No, I tried that and it did not work. This is a different website Please review the complete ticket above.

I have tried both individual and combinations of the following with no success

#mobile-header .inside-navigation {
    display: flex;
    flex-direction: column;
}
#mobile-header img { width: 100%; height: auto; }
h1.entry-title {
display: none;
}

[Leo]

So what are you trying to achieve here?

To have the image occupy the entire width then center the search, cart and toggle icon below it?

[metcomllc@aol.com]

Yes, I want to the mobile header to fit exactly like it does here https://miamihypnosiscenter.org (yes this a different WordPress installation) the search, cart and toggle icon below it

[Leo]

Unfortunately it’s more complicated as this site has 3 icons instead of just 1.

Please follow all steps here:

– Disable the mobile header option.

– Remove logo under Site Identity.

– Create a new hook element:
https://docs.generatepress.com/article/hooks-element-overview/

– Add this as content and replace the CAPITAL letters:

<div class="site-logo hide-on-mobile">
    <a href="https://HOME-PAGE-LINK" title="Miami Hypnosis Downloads" rel="home">
        <img class="header-image" alt="Miami Hypnosis Downloads" src="DESKTOP-LOGO--IMAGE-URL" title="Miami Hypnosis Downloads">
    </a>
</div>

<div class="mobile-site-logo hide-on-desktop hide-on-tablet">
    <a href="https://HOME-PAGE-LINK" title="Miami Hypnosis Downloads" rel="home">
        <img class="header-image" alt="Miami Hypnosis Downloads" src="MOBILE-LOGO--IMAGE-URL" title="Miami Hypnosis Downloads">
    </a>
</div>

– Select the before_header_content hook:
https://docs.generatepress.com/article/hooks-element-overview/#settings

– Select Entire Site in display rules:
https://docs.generatepress.com/article/hooks-element-overview/#display-rules

Let me know 🙂

[metcomllc@aol.com]

I believe I followed your instructions but the mobile site header is not full width and the page/site title is above the header in mobile. I was also hoping to use a different header for mobile if that’s possible.

[metcomllc@aol.com]

I believe I followed your instructions, but the mobile site header is not full width when I DO NOT have the mobile header enabled (and the page/site title is above the header in mobile).

When I do use the mobile header option the top of the header is still cut off.

[metcomllc@aol.com]

I believe I followed your instructions, but the mobile site header is not full width when I DO NOT have the mobile header enabled (and the page/site title is above the header in mobile).

When I do use the mobile header option the top of the header is still cut off.

The desktop site also has a error of an image right above the header with the following element when I inspect it: https://miamihypnosiscenter.org/hypnosis-downloads/DESKTOP-LOGO–IMAGE-URL

[Leo]

The mobile header option is still activated currently.

Can you disable it so I can see the issue?

[metcomllc@aol.com]

I just disabled it.

[metcomllc@aol.com]

You will notice that there is a picture error above the mobile header as well now.

[Leo]

Can you make sure the second step is done here? It doesn’t look like it:
https://generatepress.com/forums/topic/top-of-mobile-header-not-visible/#post-1080672

As for the picture error, looks like you didn’t add in the mobile logo image URL?
https://www.screencast.com/t/zkguWqTehvr

You need to replace the CAPITAL letters with the actual URL to the mobile logo you want.

Same for the desktop logo.

Let me know 🙂

[Author]

Posts