Ryan Ray

Hi @nowlanjor,

Perhaps this is fixed now, but I also see the same thing that Riaan had seen. Right up to 740px wide I see a centered logo above the mobile hamburger menu.

Link to image: https://cld.wthms.co/5TcBKR

I assume you’ve got your own media query/breakpoint there at 740px. Just as an extra FYI, these are the two breakpoints for Storefront by default. It starts out mobile optimized then as screens get wider it changes the CSS depending on these widths.

Link to image: https://cld.wthms.co/KoX4db

Hi @sibichan,

If your custom link in the menu looks like this.

Link to image: https://cld.wthms.co/55QRvu

Then make sure the following CSS is added in some fashion to your site.

.secondary-navigation a[href*="https://wa.me"] {
    text-indent: -9999px;
}

.secondary-navigation a[href*="https://wa.me"]:after {
    text-indent: 0;
    display: block;
    float: left; 
}

a[href*="https://wa.me"]:after {
    font-family: "Font Awesome 5 Brands";
    font-weight: 400;
}

.secondary-navigation a[href*="wa.me/"]:after {
    content: "\f232";
    color: #cb2027; 
}

Among my other social icons, it looks like this.

Link to image: https://cld.wthms.co/Hx3u9x

You can follow the same process for WeChat, but of course change the base URL and content used for the WeChat icon.

• This reply was modified 7 years ago by Ryan Ray.
• This reply was modified 7 years ago by Ryan Ray.

Hi @alexwish,

I think you are saying you had adjusted something in the footer and when doing that it made your logo smaller than you wanted?

If that’s correct, could you please share what you’d done in the footer first? Or at least what you were wanting to do in the footer. That’ll help us see then why it effected the logo size.

Ignore my answer, thread already answered.

• This reply was modified 7 years ago by Ryan Ray.

Hi @clerick84,

As @antibiz said, with the latest version of Storefront, WooCommerce, and WordPress we’re using the block editor to create the storefront homepage. I’d follow the section of our docs here on what specific blocks to add to a page to recreate the previous Storefront homepage. But with this all being powered by blocks you can customize it to be your own.

https://docs.woocommerce.com/document/installation-configuration/#section-11

Hopefully that helps you build a new Front page that is easily customized with the block editor. 🙂

Hi @d3venthusiastic,

As you’ve noted to get this level of control over the layout it doesn’t exist in plugin form. For your desired layout you might be able to do it with CSS only. Depends on the exact markup of the header.

If it makes the CSS styling easier, you could create a child theme and code your own header. I do like your approach though of unhooking and re-arranging the markup to make the CSS easier to write.

Here is an image I tried to note up, I will try explain what I think I would do to tweak the HTML markup to make your desired layout easier.

Link to image: https://cld.wthms.co/gZlk4M

To start we want everything to happen after storefront_header_container then before storefront_header_container_close, I would also think it helpful to remove the storefront_primary_navigation_wrapper & storefront_primary_navigation_wrapper_close as we’re going to move or fire the two actions there, the storefront_primary_navigation & storefront_header_cart before the storefront_primary_navigation_wrapper_close action.

I think then the storefront_primary_navigation & storefront_header_cart actions should have a priority of 21 and 22 so they happen after the site branding and before the secondary navigation.

That should hopefully give you decent HTML markup to then write some custom CSS for and style just the way you’d shared you wanted.

Hi Bruce,

What page would this be on your site? I ask as generally there is a way to target that specific page to then center just that header. Often the page ID, the template used, etc… is output into the markup.

Let us know the page and we can try to identify a way to target just that page. Thanks!