Menù Navigazione Storefront

  • Good morning everyone,

    I am Simone Tossani, the owner of a mechanical and electronic assistance company for machine tools and automation. In 2024, I purchased a WooCommerce package with the Storefront theme on Aruba. With patience and enjoyment, I am trying to create an online store for the materials I handle.

    Recently, I also bought all the plugins offered by WooCommerce, hoping to find the right tools for the modifications I want to make. However, due to the evolution of these themes (a few years ago it was easier to work on them) and my limited knowledge of PHP, I have gotten a bit lost.

    I am 50 years old, but I am determined when it comes to impossible missions, which is part of my job, so I’m not in a hurry to give up.

    After months of attempts and difficulties, I believe it’s time to ask for your help.

    I would like to move the navigation menu and the products in the cart below the header image, as shown in the attached photo. The visual modification is just an idea created with Photoshop, but I hope it clarifies what I want to achieve.

    From the theme’s customize menu, I can only reorganize the position of the menu items, but I can’t do anything else.

    There are also other errors, but for now, I would like to resolve this dilemma.

    Thank you in advance for your support!

    • This topic was modified 3 weeks, 2 days ago by snpt2025.

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

Viewing 2 replies - 1 through 2 (of 2 total)

  • Hi there!

    I understand your concern. You can achieve this by using custom CSS code. Generally, we do not provide support for custom CSS, but I’ll make an exception here.

    Here is a CSS code snippet you can use to place the header at the bottom of the header image:


    @media only screen and (min-width:981px){
    .storefront-primary-navigation .col-full {
         background: #000; 
        max-width: 100% !important;
    }
    .storefront-primary-navigation .main-navigation ul.menu>li>a{
        padding-bottom: 0px !important;
        padding-top: 0px;
    }

    ul#site-header-cart a.cart-contents  {
        padding-bottom: 0px !important;
    padding-top: 0px;
    }
    }

    The final result will be like this: https://go.screenpal.com/watch/cTej6mn1BMa

    if that does not help, I can recommend?WooExperts?and?Codeable.io?as options for getting professional help. Alternatively, you can also ask your development questions in the??WooCommerce Community Slack?as custom code falls outside our usual?scope of support.

    Thread Starter snpt2025

    (@snpt2025)

    Hi Shahzeen. First of all, I am immensely grateful for your contribution and for making an exception to the rule. Then, I apologize for not responding immediately, but my work takes me away for many days, so I haven’t been able to check your response. Anyway, it was exactly what I had been looking for, even though, unfortunately, it further reduces the height of the image. Still, I am really happy with your help.

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