Search Results for 'footer'

[Ben Ritner]

Ben Ritner

#265035

I was trying to remember why 720 was used and it has to do with the customizer. Most tablets and the general consensus is that tablets start at 768px. However, that isn’t true with WordPress and the customizer their tablet “size” is 720px and so while previewing in the customizer things get messed up if tablet CSS doesn’t take effect on a 720px screen so I moved the theme CSS to 719. Note that in Gutenberg the “tablet” size is 780px.

I’ll update the footer CSS to use 720px as the min for tablets although I’m not aware of any device that is 719 where it would be an issue.

I’ve been looking at ways to make it possible to customize these (currently there are filters for all the generated CSS) but with static CSS that is compiled into the footer.css file, there isn’t a good way to set provide an option for this and variable media queries are not a thing as of now.

Ben

[Hannah]

Hannah

#265005

Hey Pamela,
You can set this from Theme Options > Footer Settings.
We could all use a beach vacation:)

Best,
Hannah

[Hannah]

Hannah

#265004

Hey,
Try using this css:

@media (max-width: 768px) {
.site-footer-top-section-3.site-footer-section.footer-section-inner-items-1, .site-footer-top-section-2.site-footer-section.footer-section-inner-items-1, .site-footer-top-section-1.site-footer-section.footer-section-inner-items-1 {
    display: none;
}
.elementor-element.elementor-element-e7448da.elementor-widget-tablet__width-inherit.elementor-widget.elementor-widget-image {
    display: none;
}
}

Hope that helps!

Best,
Hannah

[KBTP]

KBTP

#264996

Hi, I’m trying to figure out whether it’s related to Toolset or Kadence Blocks/Theme.

For my product page, I created a hooked element that hooks into, well, all product pages. This hooked element contains a Content Template block, from Toolset. And the Toolset template that it inserts contains a number of Kadence Blocks, including the Modal block, that is set to load after the footer, as it didn’t behave properly when loaded on mobile otherwise.

However, now in the process of optimizing the page, I noticed a pretty hefty DOM. I’m sort of OK with it given some of my needs. But the DOM size is sort of exceedingly large because every modal block is, according to Google Chrome, being loaded twice.

Is this a known problem with a known solution? Could it be Toolset causing this or is this an issue with the Kadence Block itself?

I’m not seeking support for a Toolset block from you guys, but I figured this would be my first stop in figuring out the problem as it’s a (presumably?) misbehaving Kadence Block, and I’m not sure if it’s the block itself misbehaving, or misbehaving because it’s inside a Toolset template. Having said that, I did switch the hooked element to draft to see if Toolset wasn’t somehow loading it to my product page regardless of whether it’s placed in the hooked element or not. But it wasn’t.

[KBTP]

KBTP

#264996

Hi, I’m trying to figure out whether it’s related to Toolset or Kadence Blocks/Theme.

For my product page, I created a hooked element that hooks into, well, all product pages. This hooked element contains a Content Template block, from Toolset. And the Toolset template that it inserts contains a number of Kadence Blocks, including the Modal block, that is set to load after the footer, as it didn’t behave properly when loaded on mobile otherwise.

However, now in the process of optimizing the page, I noticed a pretty hefty DOM. I’m sort of OK with it given some of my needs. But the DOM size is sort of exceedingly large because every modal block is, according to Google Chrome, being loaded twice.

Is this a known problem with a known solution? Could it be Toolset causing this or is this an issue with the Kadence Block itself?

I’m not seeking support for a Toolset block from you guys, but I figured this would be my first stop in figuring out the problem as it’s a (presumably?) misbehaving Kadence Block, and I’m not sure if it’s the block itself misbehaving, or misbehaving because it’s inside a Toolset template. Having said that, I did switch the hooked element to draft to see if Toolset wasn’t somehow loading it to my product page regardless of whether it’s placed in the hooked element or not. But it wasn’t.

[Nomad’s Team]

Nomad’s Team

#264906

Hi,

I solved the same problem by adding a few lines of CSS:

@media (max-width: 1024px)
{
	#colophon .site-footer-middle-section-1 {
		order: 2;
	}
	#colophon .site-footer-middle-section-2 {
		order: 1;
	}
	#colophon .site-footer-middle-section-3 {
		order: 3;
	}
}

[pdyoko]

pdyoko

#264897

Hi,

Need to change footer copyright. I have used this theme so many times, I shouldn’t have to ask this question. But I have looked everywhere and it’s not there.

Can you help? It’s usually in Misc. Settings. But nope. Not there. I’ve search through Theme Options over and over.

I need a Beach Vacation. <laughing>

Thank you,
Pamela

[pdyoko]

pdyoko

#264897

Hi,

Need to change footer copyright. I have used this theme so many times, I shouldn’t have to ask this question. But I have looked everywhere and it’s not there.

Can you help? It’s usually in Misc. Settings. But nope. Not there. I’ve search through Theme Options over and over.

I need a Beach Vacation. <laughing>

Thank you,
Pamela

[yar.sahebjamei]

yar.sahebjamei

#264896

Thank you Hannah,

I wanted to remove the whole footer and just keep the elementor, then reading other forum questions i realized we can hide the footer rows.

So i’d like to hide all the footer links so only social media, copy right and app download icons show on mobile.

I’ve attached a screenshot of the section i’d like to keep on mobile and hide everything else. If this is possible then i’ll remove the elementor footer.

Much appreciate your help.

[Hannah]

Hannah

#264884

Hi Yar,
So sorry for the delay! You can hide the excess padding with this css:

@media (max-width: 768px) {
.site-footer {
    padding-top: 0;
}
}

It looks like the first column in mobile is being added through Elementor. Is that what you’re wanting to remove? You can do this from your Elementor settings. Let me know if you need further guidance with that.

Kindly,
Hannah

[bintangbagya]

bintangbagya

#264868

how to show or hide kadence home header n footer?

[pdyoko]

pdyoko

#264844

Hi, Hannah

Forgive the delayed response. I just decided to remove everything and use a single centered footer. It just wouldn’t work.

Yes, I purged the cache several times.

Thanks anyway. I’m just keeping it simple and centered.

Pamela

[Hannah]

Hannah

#264802

Hi Pamela,
I’m not seeing widgets in your footer columns 2, 3, and 4 from Appearance > Widgets. Are they showing for you in the backend? Have you cleared your cache?

Kindly,
Hannah

[Hannah]

Hannah

#264793

Hi Pamela,
Apologies for the delay! You can’t use a page template on the homepage as it will be overridden by the homepage template. You can use this css to hide the header and footer from your homepage:

.home header#kad-header-menu, .home footer#containerfooter {
    display: none;
}

Hope that helps!

Best,
Hannah

[Sloa]

Sloa

#264773

Hi,

Note: this should probably be passed to the developer.

I have made some custom popups which in the future I may release as a plugin. It works well with other themes, but with Kadence there’s a problem caused by ‘kadence-navigation’ located in /kadence/assets/js/navigation.min.js

Though, in my JS code I have preventing the default behavior of the popup linking with preventDefault(), still with Kadence theme, when the popup is triggered from the link/button:
– the page gets scrolled to the bottom (coz the popups are located there, i.e. hooked to the wp_footer)
– and the URL gets redirected to the anchored popup, i.e. domain.com/#popup1

These things do not happen with other themes I’ve used.

Previously I found that I can prevent the issue with the scrollTop, i.e. following:
`var current = $(window).scrollTop();
$(window).scroll(function() {
$(window).scrollTop(current);
});`
However, it occurs that the solution is unsustainable, since it has to be unlocked on the popup closing with .off(‘scroll’), which then is causing other functionality to stop working.

I’ve located that the issue is caused by ‘kadence-navigation’, since when I dequeue it the problem is gone. Can you investigate further and hopefully resolve this since I found the issue only with the Kadence theme. I do not have any public example since the code of my popups is only available on my local host. Still I hope I’m pointing you in the right direction with the file that is causing the problem and hopefully you may know what’s wrong with your code.

Thanks.

[Sloa]

Sloa

#264773

Hi,

Note: this should probably be passed to the developer.

I have made some custom popups which in the future I may release as a plugin. It works well with other themes, but with Kadence there’s a problem caused by ‘kadence-navigation’ located in /kadence/assets/js/navigation.min.js

Though, in my JS code I have preventing the default behavior of the popup linking with preventDefault(), still with Kadence theme, when the popup is triggered from the link/button:
– the page gets scrolled to the bottom (coz the popups are located there, i.e. hooked to the wp_footer)
– and the URL gets redirected to the anchored popup, i.e. domain.com/#popup1

These things do not happen with other themes I’ve used.

Previously I found that I can prevent the issue with the scrollTop, i.e. following:
`var current = $(window).scrollTop();
$(window).scroll(function() {
$(window).scrollTop(current);
});`
However, it occurs that the solution is unsustainable, since it has to be unlocked on the popup closing with .off(‘scroll’), which then is causing other functionality to stop working.

I’ve located that the issue is caused by ‘kadence-navigation’, since when I dequeue it the problem is gone. Can you investigate further and hopefully resolve this since I found the issue only with the Kadence theme. I do not have any public example since the code of my popups is only available on my local host. Still I hope I’m pointing you in the right direction with the file that is causing the problem and hopefully you may know what’s wrong with your code.

Thanks.

[Ben Andersen]

Ben Andersen

#264768

This reply has been marked as private.

[yar.sahebjamei]

yar.sahebjamei

#264749

Hi,

I looked around and couldn’t find a solution.

I’d like to hide the top row of the footer on all pages displayed in mobile and tablet.

Appreciate the help.

Yar

[yar.sahebjamei]

yar.sahebjamei

#264749

Hi,

I looked around and couldn’t find a solution.

I’d like to hide the top row of the footer on all pages displayed in mobile and tablet.

Appreciate the help.

Yar

[pdyoko]

pdyoko

#264708

Hi, All,

In short, using 3-column footer. Placing widget in each column. They are not loading in the column designated. Weird. I have checked everything. Never had this problem.

Any suggestions?
Sending login.

Thank you,
Pamela

• This topic was modified 5 years, 1 month ago by pdyoko.

[pdyoko]

pdyoko

#264708

Hi, All,

In short, using 3-column footer. Placing widget in each column. They are not loading in the column designated. Weird. I have checked everything. Never had this problem.

Any suggestions?
Sending login.

Thank you,
Pamela

• This topic was modified 5 years, 1 month ago by pdyoko.

[Nomad’s Team]

Nomad’s Team

#264704

Hi,

There is a conflict between tablet and mobile at width 719px. When we resize the window, at step 719px, the cols still display in tablet mode while the inner sections display in mobile mode.

In the footer.css file, media query for tablets is “@media screen and (min-width: 719px) and (max-width: 1024px)” and MQ for mobiles is “@media screen and (max-width: 719px)”.

I think the breakpoint for tablet should be “min-width: 720px” so that the transition is cleaner/smoother.

Could you please take a look?

Thanks!

[Nomad’s Team]

Nomad’s Team

#264704

Hi,

There is a conflict between tablet and mobile at width 719px. When we resize the window, at step 719px, the cols still display in tablet mode while the inner sections display in mobile mode.

In the footer.css file, media query for tablets is “@media screen and (min-width: 719px) and (max-width: 1024px)” and MQ for mobiles is “@media screen and (max-width: 719px)”.

I think the breakpoint for tablet should be “min-width: 720px” so that the transition is cleaner/smoother.

Could you please take a look?

Thanks!

[Ben Ritner]

Ben Ritner

#264690

HI,
I don’t suggest you do this. A section within the HTML should have an h2 title. Google search can distinguish between the content and your aside areas like the sidebar or footer.

However, you can control this however you want: https://kadence-theme.com/knowledge-base/advanced/changing-various-heading-html-tags/

View the widget title heading area.

Ben

[Hannah]

Hannah

#264684

Hey Mike,
Sorry for the delay! It sounds like you just need to wrap your css in a media query so mobile is not affected. Like this:

@media (min-width: 992px) {
.col-md-3.col-sm-6.footercol1 {
width: 24% ;
}
.col-md-3.col-sm-6.footercol2 {
width: 23% ;
}
.col-md-3.col-sm-6.footercol3 {
width: 18% ;
}
.col-md-3.col-sm-6.footercol4 {
width: 35% ;
}
}

How does that work for you?

Best,
Hannah

[Mike]

Mike

#264674

This is the Custom CSS I have in play on the second site I’ve referenced:

.col-md-3.col-sm-6.footercol1 {
width: 24% ;
}
.col-md-3.col-sm-6.footercol2 {
width: 23% ;
}
.col-md-3.col-sm-6.footercol3 {
width: 18% ;
}
.col-md-3.col-sm-6.footercol4 {
width: 35% ;
}

I also notice that the social media icons in the 3rd footer column don’t display on my iPhone.