Support » Theme: Storefront » Mobile Storefront not reflecting changes of desktop site

  • Resolved Anti.biz

    (@antibiz)


    The main changes I need to reflect on my mobile device. Is removing the “SHOP” text and also removing the navigation page icons on the footer menu.

    The desktop is working fine but the mobile version still has those for some reason.

    The page I need help with: [log in to see the link]

Viewing 8 replies - 1 through 8 (of 8 total)
  • RK

    (@riaanknoetze)

    Hi there,

    While I’m not entirely sure where you’re seeing that “Shop” text on your site, the footer icons can be hidden using https://woocommerce.com/products/storefront-powerpack/. With that enabled, you’ll see a new setting under “Appearance > Customize > Powerpack > Footer > Handheld Footer Bar” where a checkbox can be toggled 🙂

    Anti.biz

    (@antibiz)

    I want people to see the footer bar on handheld.

    What I don’t want them to see is the page icons next to the links. I am able to hide it on the desktop version just not the mobile using addtional css.

    Anti.biz

    (@antibiz)

    Also the SHOP text is not displayed on my desktop site its hidden, but its shown on mobile. The additional css doesnt work with the mobile version.

    RK

    (@riaanknoetze)

    It sounds like you’re referring to page icons next to the navigation links added to a widget in your sidebar:


    Link to image: https://cld.wthms.co/9KvLry

    If that’s correct, the following custom CSS should work for that:

    
    .widget_nav_menu ul li::before {
        content: "";
    }
    

    That changes it for the desktop version but is not reflected in the mobile version.

    The same with removing the Shop text.

    Job

    (@jobthomas)

    Automattic Happiness Engineer

    Hey @antibiz – I’ve had a look at your website, and those changes do not show on either desktop or mobile version. I’ve tested with the above custom CSS and it works like a charm on both desktop and mobile. Maybe you’re not adding it in the right spot?
    Under Customize > Additional CSS, you can add the following code:
     

    /* Hide page icons */
     
    .widget_nav_menu ul li {
        padding-left: 0;
    }
    
    .widget_nav_menu ul li:before {
        content: "";
    }

    (I tweaked it a little to make sure the aligning left is correct as well.)
     
    If you’d like to learn more about CSS, I highly recommend using the free tutorials at w3schools. Here, you can find the basics of selectors (how to target the right element on the page), and properties (how to change the element on the page).

    thx ill try it out

    • This reply was modified 5 months, 3 weeks ago by  Anti.biz.
    Job

    (@jobthomas)

    Automattic Happiness Engineer

    Sounds good. We’ll mark this thread as resolved given that the solution was provided. Please don’t hesitate to open a new thread for a different topic.

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