Large space showing all of a sudden between menu and divider on various pages

[HTX-Fluid-Power]

All of a sudden, a blank space is now appearing in between the menu and divider on various pages, that wasn’t there before. Any ideas what has caused this issue on my site?

HTX Fluid Power

Password: bofupd

[Mustafa_Ali]

Go to online store ----> themes ----> go to three Dots ----> edit code ---->find theme.liquid files ----> place the code ---->
under the tag before the body ----->
if this code work please do not forget to like and mark it solution

[Rahul_dhiman]

Hello @HTX-Fluid-Power
This seems to be rectified

Thanks

[devcoders]

@HTX-Fluid-Power
I have checked, and it is working fine.

[HTX-Fluid-Power]

This did not work.

[HTX-Fluid-Power]

I just checked again, it’s still doing it randomly. It is not just on the contact page. It is happening on other pages, products, etc.

[HTX-Fluid-Power]

I just checked again; it’s still doing it randomly. It is not just on the contact page. It is happening on other pages, products, etc.

[HTX-Fluid-Power]

Not as big of a space but still doing it under the menu. Also, when scrolling down the divider goes in front. See below.

[HTX-Fluid-Power]

Not as big of a space but still doing it under the menu. Also, when scrolling down the divider goes in front. See below.

[devcoders]

Hello @HTX-Fluid-Power

I checked randomly, but I don’t see any extra space. I also recorded a video. Please check it once.

Video link - https://www.awesomescreenshot.com/video/38174651?key=3e4b783b82d5e591175a3822c6cce69b

[HTX-Fluid-Power]

Did you scroll up, to see if it is doing the below?

[HTX-Fluid-Power]

Just tried again.

[Rahul_dhiman]

This is what i can see

[tim_1]

Try this:

html body {
  display: flex;
  flex-direction: column;
}

main {
  margin-bottom: auto;
}

.shopify-section-group-ecom-store-footer_footer .ecom-row.ecom-core.ecom-section {
  position: relative;
}

Can go to the Theme Settings=> Custom CSS, or to the bottom of your base.css.

There are two source of this problem:

1. Theme initially has a code to stick footer to the bottom of the screen. However, the way it’s done it does not work if there are new elements added above the main sections area.

2. For whatever reason, a part of the footer done in the page builder has “position: abosolute” which also breaks theme code calculations…

[HTX-Fluid-Power]

I believe this worked. I’m no longer seeing the issue occurring.