Mobile menu not visible and excess padding on WooCommerce pages

Sydney Pro
#1

Hello,

There’s an issue with the mobile version of our comnpany website. The hamburger menu looked as if it wasn’t there any more (which was something some of our customers had noticed). When I checked, I discovered it was there but white on white, so not visible. After some research and trying a number of failed solutions, I found a working solution with the following code + JavaScript plugin:

 .btn-menu {
      font-size: 27px;
      font-family: "FontAwesome";
      color: #000;
    }
    .btn-menu:before{
      content: "\f0c9";
    }

    .btn-menu:before {
      display: none;
    }

This fixed the hamburger problem across the site, except on the WooCommerce shop and single product pages.

I also changed the top padding from 83px to 0px across the site, but these WooCommerce pages still look as if they are defaulting to the 83px, which leaves an unsightly gap at the top of the pages.

I’ve looked and looked, but can’t seem to find solutions for these two problems as they relate to the Woocommerce pages. Any assistance would be appreciated! Thanks.

#2

Hello there,

I am sorry to hear that you have run into issues. I am happy to help out.

Can you share a link to your website, so I can take a look, find the problem, and suggest the best possible solution to you?

Regards,
Kharis
aThemes Support

#3

Hello Kharis,

That would be great, thanks.

The site is: https://www.harbrine.co.uk/

Regards,

Stewart

#4

Hi Stewart,

Thank you for sharing the link.

As checked, you would need to install and activate the Font Awesome plugin to fix the missing Font Awesome humberger button icon on your WooCommerce pages.

Or, for permanent fix, you will need to check your child theme’s header.php file and ensure the below line of code presents.

  <div class="btn-menu"><i class="sydney-svg-icon"><?php sydney_get_svg_icon( 'icon-menu', true ); ?></i></div>

This has been added since the newer version of Sydney Pro. And you can copy it from Sydney Pro parent theme, in cace you have not made any adjustments when the update came.

Regards,
Kharis
aThemes Support

#5

Hi Kharis,

Opted for the plugin option for now and that’s working, so thank you for resolving that.

Any ideas for reducing the top padding on the WooCommerce pages? As per above, I’ve reduced the other pages to 0 but it hasn’t changed the WooCommerce pages, so the mobile doesn’t look good with excess space at the top.

Thanks,

Stewart

#6

Hi Stewart,

As checked, the blank space is acually hidden WooCommerce breadcrumbs. Did you hide it from WooCommerce settings or somewhere else?

If you don’t have that setting before and want to display the breadcrumb, add this CSS code to Appearance > Customize > Additional CSS from dashboard.

    .woocommerce .woocommerce-breadcrumb {  
      visibility: visible; 
    }

Or add this CSS code to hide and prevent empty space to remain.

    .woocommerce .woocommerce-breadcrumb {  
      display: none;
    }

Regards,
Kharis
aThemes Support

#7

HI Kharis,

Ah, that makes sense. It was hidden using “visibility” rather than “display” some time ago and I hadn’t realised that was causing the space. Thanks for solving.

Regards,

Stewart

1 Like
#8

You’re welcome Stewart!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis
aThemes Support