Issue/Bug? - Vertical Headers in WC Single Product areas etc

[sam_futr]

Hi Team

Please see Loom below for the issue:

Essentially having issues with a Vertical header showing a white space instead of not showing at all.

And you’ll also see that there’s areas (eg. Category Indexes within the Shop) where the vertical header should still show, but is just showing white space.

Login details will be provided.

Thanks
Sam

[ruenel]

Hello Sam,

Thanks for writing in!

Please keep in mind that you have set the condition to the Bar element which is working as expected. The Fixed Right header area will still display with a whitespace since the Bar element no longer displays when the condition is true.

What you need to to create two separate custom headers which will be assigned to the Shop and then the other will be assigned to the single product items.

Hope this makes sense.

[sam_futr]

Hi @ruenel

Thanks for the below.

Why then when in Cornerstone it does not show the white column at all in areas other than the Shop - which is as intended. In the below screenshot the Homepage is showing (not Shop) and therefore the Bar is not showing (as intended):

Logically it doesnt make sense at all that a white section would show when you set the Header Bar condition to not show.

With this logic, all other Header Bars would do the same including the regular top horizontal header bars - which doesn’t happen, they are completely hidden when the condition is met. No white space remains.

I dont think theres a requirement to create completely new Headers in this circumstance. Please review this with the Dev team.

Thanks
Sam

[tristup]

Hi Sam,

I have checked the Home page in the browser and found the whitespace in it. The whitespace showing on the page is due to the Header assigned to it, the condition can be applied to the Bar not to the Header.

Alternatively, you can add the following custom CSS into the Theme Options > CSS to remove the sidebar from all the pages except the Shop.

body:not(.woocommerce-shop) .x-bar-space-right 
{
    display: none;
}

Please remember that the above code will work if copied as it is and doesn’t conflict with any existing style.
Please note that the code provided serves only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle.
We really do not provide support for custom codes which means we can’t fix it in case it conflicts with something on your site nor will we enhance it. Further customization should be directed to a third-party developer or you can avail of One, where we answer the questions beyond normal theme support.

Thanks

[sam_futr]

Hi @tristup

Please see Loom below. The vertical Bar should not be showing a white space when the conditions are set within the Bar itself.

This does not occur with Horizontal Bars, when conditions are set - please see example in private message.

Is it potentially something to do with the sticky or scrolling settings on the Vertical Header? I have tried playing with these, and the white space still shows:

Also to note the slight text bug in the Vertical Header area - so it may be that this Vertical Header element has not been focussed on as much as the Horizontal Header elements, as they’re not as popular on websites (therefore not Beta tested as much)?

I also note, that the Breakpoint hiding (for Tablet and Mobile) is working as intended - the whole Vertical Header is hidden and there’s no white space.

Thanks
Sam

[tristup]

Hi Sam,

As I said before that if you apply any condition to any element, it will apply to that element only. Here in your case, the Header is taking the space, whereas the Bar inside that Header is set to hidden using the condition.

And, it is not displaying on a smaller screen since all columns are collapsed into the stacked layout. That includes any layout columns(depending on breakpoint setting), native sidebar, and vertical header bar. A vertical header bar becomes horizontal

Thanks

[sam_futr]

Hi Tristup

@tristup

As I said before that if you apply any condition to any element, it will apply to that element only. Here in your case, the Header is taking the space, whereas the Bar inside that Header is set to hidden using the condition.

Why then do Horizontal Bars hide when the condition of the Bar is set to not show, and it doesn’t show any white space at all!? Which was explained in my Loom video.

---

@tristup

And, it is not displaying on a smaller screen since all columns are collapsed into the stacked layout. That includes any layout columns(depending on breakpoint setting), native sidebar, and vertical header bar. A vertical header bar becomes horizontal

It is not showing on smaller screens, because I have set the vertical Bar to be hidden on Tablet and mobile…

[christian]

Hey Sam,

We’re sorry for the back and forth here. I believe that the spacer should not be rendered along with the Bar. If that is only the case, this issue will not happen.

I’m going to post this case in our issue tracker so it will be queued to be investigated by our development team. For now, here is the workaround.

Just note that this is not optimal. The spacer should not be rendered at all along with the Bar.

1. Add a Class to your side Bar.
2. Add the following code in your Header JS and change update the class in the selector.

jQuery(function($) {
  if ($('.x-bar.sidebar').length ==  '') {
    $('.x-bar-space-right').css('display', 'none');
  }
})

Now your side-bar does not take up space in pages where it isn’t present.

Hope that helps.

[sam_futr]

Hey @christian

Firstly, thanks for taking the time to review this issue in detail, it’s much appreciated.

It seems as though it’s a sizeable bug from my perspective, so hopefully the Dev Team is able to sort it out in Production.

In the meantime, thanks for the workaround. I have tested this and it appears to be working okay. However, it does flash the white-space first before disappearing… is there any way to force the custom JS to load first?

Also, I actually have a separate query regarding the “sidebar”/vertical headers and whether, instead of pushing to the top edge of the screen, they can push only to the bottom edge of the horizontal header, like the below Figma mockup?

Thanks,
Sam

[christian]

Hey Sam,

The flash is unavoidable that’s why I mentioned it’s not the optimal solution as it uses Javascript and the script loads only after everything is loaded. What needs to happen is the spacer should not be rendered or added in the page at all.

Regarding starting the vertical header down the top header, that is not possible. Custom development would be required. If you need guidance on how to achieve this, you can subscribe to our One support.

Thanks.

[sam_futr]

Hey @christian

@christian

The flash is unavoidable that’s why I mentioned it’s not the optimal solution as it uses Javascript and the script loads only after everything is loaded. What needs to happen is the spacer should not be rendered or added in the page at all.

Okay understood - thanks for clarifying. Hopefully Dev can sort it out soon.

@christian

Regarding starting the vertical header down the top header, that is not possible. Custom development would be required. If you need guidance on how to achieve this, you can subscribe to our One support.

Okay noted - I’ll reach out to One Support or Elite. I feel this functionality in question is potentially something that can go on the tracker to be a native function down the track though. Many times, these sidebars tend to sit below the top horizontal site header.

Thanks
Sam

[ruenel]

You are most welcome, Sam.