[Resolved] Top of Mobile Header not visible

Home Forums Support Top of Mobile Header not visible

Viewing 15 posts - 1 through 15 (of 19 total)
  • Author
    Posts
  • #1080234
    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?

    #1080400
    Leo
    Staff
    Customer Support

    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.

    #1080413
    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?

    #1080572
    Leo
    Staff
    Customer Support

    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.

    #1080590
    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;
    }
    #1080650
    Leo
    Staff
    Customer Support

    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?

    #1080658
    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

    #1080672
    Leo
    Staff
    Customer Support

    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 🙂

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

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

    #1080710
    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

    #1080714
    Leo
    Staff
    Customer Support

    The mobile header option is still activated currently.

    Can you disable it so I can see the issue?

    #1080723
    metcomllc@aol.com

    I just disabled it.

    #1080724
    metcomllc@aol.com

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

    #1080729
    Leo
    Staff
    Customer Support

    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 🙂

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