Hi there
I’m trying to work out how to apply a transparent header to my website, that changes to a sticky header with a solid background on scroll (like your kadencewp.com homepage I think). I’m not sure if its possible. I have a transparent header with an image but when I scroll down I get a transparent background colour. Is there a way to make the background solid once the image has been scrolled past?
website is http://www.houndsconnect.co.uk
Thanks
Joanne
Hey,
this will get the ID:
add_filter( 'kadence_sidebar_id', 'custom_use_front_page_sidebar_meta' );
function custom_use_front_page_sidebar_meta( $sidebar ) {
if ( is_front_page() ) {
$front_id = get_option( 'page_on_front' );
$postsidebar = get_post_meta( $front_id, '_kad_sidebar_choice', true );
if ( isset( $postsidebar ) && ! empty( $postsidebar ) && 'default' !== $postsidebar ) {
$sidebar = $postsidebar;
}
}
return $sidebar;
}
This will get if the sidebar should show:
add_filter('kadence_display_sidebar', 'custom_use_front_page_sidebar_show_meta');
function custom_use_front_page_sidebar_show_meta( $sidebar ) {
if ( is_front_page() ) {
$front_id = get_option( 'page_on_front' );
$postsidebar = get_post_meta( $front_id, '_kad_post_sidebar', true );
if ( isset( $postsidebar ) && 'yes' === $postsidebar ) {
return true;
} elseif ( isset( $postsidebar ) && 'no' === $postsidebar ) {
return false;
}
}
return $sidebar;
}
Ben
Hey,
Sorry, sounds like Hannah misunderstood.
the default gutter setting doesn’t override what you define in your row.
Your issue is a bug based on this setting: https://share.getcloudapp.com/WnurPgmk
It’s just not common to setup a page that way so hasn’t been something we’ve seen or others reported but it’s a bug in that it’s ignoring the gutter setting because the layout is vertical columns.
I’ve put this on my list to fix. In the meantime I’ve just changed your container row to be a single column so that this is removed.
Ben
I want to add some further clarification.
The width setting in woo extras determines the width of the images in the image tag. It does not determine the width of the product gallery in regards to how the theme or how elementor output the gallery.
So on a page without elementor you can increase the image size but that will not increase the output of the gallery size, themes/builders determine that. It will instead increase the size of image src that is output.
I hope that helps clarify.
Hey,
I took a look at your site, you had elementor pro and our elementor plugin installed. It seems like you might be confusing the two as to which should be controlling your product pages.
I’ve setup a template in our elementor plugin and assigned that to this product with Kadence Woo Extras installed so you can see things working:
https://stickpretty.thinkpixelperfect.com/product/phils-window-film-product/
I understand if you want to use elementor pro so I’ve also added this css to your site to force elementor to keep the image gallery width from being set to 40%:
.woocommerce .product .elementor-widget-product-gallery .images {
float: none;
width: 100%;
padding: 0;
}
Let me know if that is what you were looking for?
Ben
Hi,
Header looks ok on page load, but the sticky header when scrolled is breaking and goes over the header area
Hi Team
With reference to your previous support to – Size of box and space on each side on mobile – , I have a problem with the boxes, the middle one – kontakt – aligns to the left.
Can you help me put it to the center?
The page: ab-design.dk
Best, Susanne
Hi,
I want to eliminate the space between:
primary menu and next block
last block and footer
I tried this CSS, worked but is not propoerly because in the blog page i need this space.
#content {
padding-top: 0;
padding-bottom: 0;
}
Any ideea please?!
http://www.favorcosmetics.ro is the link
Thank you
Hi,
On this site, I am using a post grid/carousel to display 2 staff posts in a single column. I have used css to reduce the image to a circular shape 260px diameter.
html.js.js-running body.page-template.page-template-page-fullwidth.page-template-page-fullwidth-php.page.page-id-55.logged-in.admin-bar.wp-embed-responsive.kt-showsub-indicator.notsticky.virtue-skin-default.wide.about-us.customize-support div#wrapper.container div.wrap.clearfix.contentclass.hfeed div#content.container.container-fullwidth div.row div#ktmain.main.col-md-12 div.entry-content div.wp-block-kadence-rowlayout.alignfull div#kt-layout-id_7b62d6-9a.kt-row-layout-inner.kt-layout-id_7b62d6-9a div.kt-row-column-wrap.kt-has-1-columns.kt-gutter-default.kt-v-gutter-default.kt-row-valign-top.kt-row-layout-equal.kt-tab-layout-inherit.kt-m-colapse-left-to-right.kt-mobile-layout-row div.wp-block-kadence-column.inner-column-1.kadence-column_4ac418-1a div.kt-inside-inner-col div.wp-block-kadence-postgrid.kt-blocks-post-loop-block.alignnone.kt-post-loop_1fc8e4-79.kt-post-grid-layout-grid div.kt-post-grid-wrap.kt-post-grid-layout-grid-wrap article.kt-blocks-post-grid-item div.kt-blocks-post-grid-item-inner-wrap.kt-feat-image-align-left.kt-feat-image-mobile-align-top div.kadence-post-image div.kadence-post-image-intrisic.kt-image-ratio-100 div.kadence-post-image-inner-intrisic a img.attachment-large.size-large.wp-post-image {
max-height: 260px; max-width: 260px; border-radius: 50%; object-fit: cover; object-position: 50% 0;
}
When the screenwidth gets below 768px, the gap between the image and the excerpt is too big and the image is left-aligned:
Please could you help with better css to format the picture so that we get this sort of display:
Many thanks,
Phil.
I am using Kadence Slider Pro shortcode on my main page and it looks like there is some whitespace that i’m unable to fix. It was working fine before, so I think it started happening after either WordPress, Kadence theme, or addons that recently got updated. Any ideas?
How do I do that?
I’d like to enable Kadence Blocks only for Pages.
This reply has been marked as private.
Hi guys,
I am building a new site and I quickly created about 100 pages without changing them from the default page template to fullwidth.
Is there a way of changing them all to fullwidth faster than manually updating each one?
Also, is there a way of making the default template full width, so I don’t have to change each time I add a page?
Thanks!
James
Hi,
In woocommerce archive pages and product blocks, I want to show the secondary photo when you hover on the product. How?
*Login to see link
Hi Hannah – thanks for the reply / suggestion. I did actually try that already ( and just tried again in case) … it doesn’t help. BUT – there are two issues here … one is the fact that the width of the image (settings in woo extras) is being ignored everywhere, even if I disable elementor totally (and everything else for that matter)… and it just gets worse with Elementor product pages :\
Like I said also – it’s not just limited to this site, it’s every install we have using Kadence.
-Phillip
This reply has been marked as private.
Hi,
I am trying to create a Logo Slider using the Portfolio Grid/Carousel block. Because it is just displaying logos (single column sliding), the most sensible Post Type is Gallery, as the logos will not be used anywhere also on the website. I’ve tested the Gallery page they create and it works. However when I set up the Portfolio Grid/Carousel Block with Post Type “Gallery”, it just displays a grey box that links to the gallery page. Can you please advise what I am doing wrong?
thanks
Hi,
1) Create a page
2) Add a product block. For example Hand picket products
3) Choose products and publish
4) Preview the site and compare the product title and add to cart (without button) title with the ones on your actual shop page. Both are smaller if using blocks.
Currently I am using this CSS to fix it.
.wc-block-grid__product .wc-block-grid__product-title {
font-size: 1.3em;
}
.wc-block-grid__product:not(.woo-archive-btn-button) .wc-block-grid__product-add-to-cart .wp-block-button__link {
font-size: 100%;
}
Can you confirm that on your side?
Sorry for the delay and sorry for your frustration! It seems like Elementor is overriding some of the theme settings for your product pages. But it doesn’t seem like you’re using Elementor to create your product pages? Try deactivating Products from Elementor > Settings. Does that resolve this?
Regards,
Hannah
Hi,
I installed Ascend theme. I built a slider and displayed it on the homepage. It was working fine. When I used the same shortcode for the mobile site, the Desktop homepage slider stopped working. I duplicated the slider and placed one shortcode on the desktop and the other on the mobile site. Both worked. But now the desktop slider stopped working again. It just shows the slide dots and the navigation arrows but not the images.
Please advise.
*Login to see link