Header - Easy Banking Demo

[kademcconville]

Hey,

I see the Easy Banker Demo is mentioned for being good for WooCommerce store, I am currently testing with mine.

The initial position is set to ‘Absolute’ which is great for the header as is. But when using sitewide (without bar 2) it overlaps the content, as expected.

To avoid this I have tried:

.entry-header, .entry-content {
  padding-top: 120px;
}

This seems to work on https://competitioncamel.co.uk/product/shelby-gt/ - but the width of the bar is not contained in the width of the main content.

Would it be better to switch to ‘relative’ position? Doing this changes the width to full-width or the bar…

Any ideas on the best way to go about this?

[marc_a]

Hi @kademcconville.

Thanks for reaching out.

I suggest that you will set 1280px max-width for your header because that’s the max-width for your content area. Then remove the margin left and right and set the width of your header bar to 100%.

Remove:

The CSS for your header should be like this to make the header the same width with the content:

Hope that helps.

Thank you.

[kademcconville]

Thanks for the info, I will give it a try.

Strange thing I have noticed is in regards to the x-alert class…

You can see the header doesn’t take into affect the notification alert in terms of the height. But it looks fine when you are logged in as an admin user?

[kademcconville]

I changed:

.x-container.max {
max-width:calc(100% - (calc(8%) * 2));;
}

Instead to achieve the same width for the content.

Still unsure about the issue with the alert banner, however.

[ruenel]

Hello @kademcconville,

I am no longer seeing the banner. Have you disabled it? Please put it back. If you wouldn’t mind, provide us access to your site so that we can check your settings. Please create a secure note with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
​
To know how to create a secure note, please check this out: How The Forum Works

Best Regards.

[kademcconville]

Hey!

I haven’t removed the banner. It only appears for customers who have made a purchase, see.

I have created a user/admin for you (See secure note) - and I have also made a dummy order with the test account so the banner will appear for you on the page - https://competitioncamel.co.uk/product/shelby-gt/

Thanks.

[tristup]

Hi @kademcconville,

The notice is showing the previous purchased details which can be shown only for the logged in users. Whereas without logged in users or the guest users do not have the record to show. That may be the reason why the Notice is not shown for guest users.

Thanks

[kademcconville]

Hey,

I am aware this is the case? My issue is that the Pro Header doesn’t take the notice is to consideration (for logged-in users) and the height of the page is wrong…

[christian]

Hey @kademcconville,

This is not an issue with Pro nor the Easy Mobile Banking demo. The demo header is just positioned Absolute.

It’s the custom CSS that’s causing the issue.

Please style woocommerce-notices-wrapper as well like the following:

.woocommerce-notices-wrapper {
  min-height: 100px;
}

Hope that helps.