Search Results for 'banner'

[Park]

Park

#174432

Thanks Kevin,

There are about six products in my shop page, but the site is not live because a maintenance mode plugin is active. Login details are above if needed.

I am using a kadence pro slider as a top image banner on my shop main page which has alignment with the top of the page, but when I view each product page, the content is also aligned to the top of each product page and overlaps my menu there. I would like to move that content down for each product page. Trying to make a layout in the Woo Template Builder but still figuring out what does what.

This is how it looks with the contents aligning to the top (I assume this is because I have css in place to align the shop slider to the top) https://ibb.co/cnCABm

vs. how I would basically like it to look (arranged in photoshop): https://ibb.co/kBcrj6

It might be css that I have in place from messing with my product layout previously, but I’m also not seeing why the thumbnails are displaying off to the right below the main image.

I have not implemented any Woo page builder yet, so after I figure it out hopefully I can solve these more easily.

[Park]

Park

#174132

Also, in addition to the above related problem about the slider placement;

I have just upgraded to a Kadence membership to make use of Woo Extras, Woocommerce template builder, and Kadence Galleries, specifically.

I have installed those three plugins only from the pack, and played around with a few shop settings in Woo Extras to see what they correspond to, but now my site (shop in particular) loading times seem to have become very slow and heavy, and all my kadence sliders that I am using for each page topbanner are not displaying or loading at all.

[Ben Ritner]

Ben Ritner

#174079

Hmm, in your theme options > custom css add this:

.infobanner {
    background-size: cover !important;
}

Ben

[Ben Ritner]

Ben Ritner

#174068

@media print {    
    #kad-banner, .portfolio-single-img, #containerfooter {
        display: none !important;
    }
}

Can you tell me if it is possible to have the third menu item in the main navigation also in one line?

Right now each menu item gets 33.33% of the container making it look even. If you force your very long menu item to be one line it will mean you have to force the other menu items smaller making it not look even. Here is the css:

.kad-header-style-two .nav-main ul.sf-menu > li {
    width: auto;
}
.kad-header-style-two .kad-header-left .nav-main ul.sf-menu {
    float: right;
    width: auto;
}
#wrapper .kad-header-style-two .nav-main ul.sf-menu > li a {
    padding: 7px;
}

I center-aligned my page header, but on the shop and other archives as well as the portfolio archives and posts it is not completely centered.

The portfolio posts normally have navigation on the right side you are using css to hide it so you also need to use this css to change the layout so the title doesn’t make room for the navigation:

.page-header.single-portfolio-item .col-md-8 {
    width: 100%;
}
.page-header.single-portfolio-item .col-md-4 {
    display:none;
}

Similar with the shop archives you’re hiding the order so :

.page-header .woo-archive-pg-title {
    width: 100%;
}
.page-header .woo-archive-pg-order{
    display:none;
}

And in terms of single blog posts those headers are different then pages and are not above the sidebar they would only center on the left if you have a sidebar on the page.

[Ben Ritner]

Ben Ritner

#173952

You can add to the child theme css. You need to change that to :

@media print {    
    #kad-banner {
        display: none !important;
    }
}

Ben

[Park]

Park

#173243

Hi,

I would like to add a topbanner image (as I have done on my home, company, custom pages: height 600px full width banner) using the Kadence Slider Pro.

I want this topbanner slider look to be displayed sitewide with images for each respective page, but as the page type is different for BLOG and SHOP, I wonder how this topbanner displayed within the Kadence Slider Pro might be possible?

Thanks for your help.

[Park]

Park

#173243

Hi,

I would like to add a topbanner image (as I have done on my home, company, custom pages: height 600px full width banner) using the Kadence Slider Pro.

I want this topbanner slider look to be displayed sitewide with images for each respective page, but as the page type is different for BLOG and SHOP, I wonder how this topbanner displayed within the Kadence Slider Pro might be possible?

Thanks for your help.

[Hannah]

Hannah

#173183

From my understanding, the sitewide banner is meant to be in addition to the normal header banner or slider. But because yours is not set up this way, some basic css should resolve. This should remove your home slider on mobile devices so your two banners are not clashing:

@media only screen and (max-device-width: 768px) {
.home div#kad-slider-1 {
    display: none;
}
}

Hope that’s helpful!

Hannah

[Hannah]

Hannah

#173107

Hey,
I’m not seeing a sitewide banner on your site. Are you planning to re-enable it?

Hannah

[Ben Ritner]

Ben Ritner

#172647

SVG doesn’t have width and height to wordpress so you have to add that in css.

#kad-banner #logo .kad-standard-logo, #kad-banner #logo .kad-standard-logo-tranbg {
    height: 180px;
    width: 122px;
}

[Hannah]

Hannah

#172404

Hey Angelo,
Try adding this to your custom css:

#kad-mobile-banner {
    display: block;
    height: auto;
}

If that doesn’t work can you post a link?

Hannah

[Ben Ritner]

Ben Ritner

#171788

You can hack it in with css like this:

.navclass {
    background: transparent;
}
.sliderclass.home_sliderclass {
    margin-top: -57px;
}
#kad-banner {
    background: transparent;
}
.is-sticky #kad-banner {
    background: white;
}

Ben

[Carrie]

Carrie

#171656

No, that didn’t change the padding.
I want to eliminate the padding above and below the text on the hero banner. Within the banner, that is.

https://postimg.org/gallery/3fhggydpi/

Thanks.

[Ben Ritner]

Ben Ritner

#170850

Lets talk about this image to start:

How would you like this to look on a screen that size? What are you imagining the layout should do? Are you wanting it to drop into different rows? Part of building a responsive site designing with different screen sizes in mind.

Here is a custom option that would decrease all your fixed sizes for that page.

@media (min-width: 780px) and (max-width:1600px){
    #pl-65 .image_menu_item_link .image_menu_message h4 {
        font-size: 14px !important;
    }

    #pl-65 .image_menu_item_link .image_menu-bg-item {
        height: 200px !important;
    }

    #pl-65 .kadence_imgmenu_widget {
        margin: 0 -10px;
    }
}

Another option would be for you to switch to a mobile header sooner:

@media (max-width: 1400px) {
.kad-header-position-left #wrapper {
    padding-left: 0;
}
#kad-vertical-menu {
    display: none;
}
#kad-mobile-banner {
    display: block;
    height: auto;
}
}

Regardless the biggest issue I see on the page is that your word testimonials is large and long and by default, wordpress won’t break words in half so it’s getting cut off very quickly on any normal screen size. ONly if you are on a very large screen does it not get cut off. So to me that just means you need to either decrease the font size or change how large that column is that your placing the word into.

Next this image:

You are using the split content widget and you are setting the image side to “Cover” which makes the image fill the space as a background. Backgrounds shouldn’t have content and when they are filling to cover they will expand to cover any given area.

See here for some information: https://www.kadencewp.com/background-image-sizing/

I suggest you just change that setting to not cover but to place the image so that all your of your image will always show and you won’t get any part cut off.

Ben

[Kevin]

Kevin

#170164

Try adding this CSS and let me know if it works for you:

header#kad-banner {
    max-height: 60px !important;
}

[Kevin]

Kevin

#170155

Hey David,

Try adding this CSS to Theme Options> Advanced Settings, and let me know if it works for you!:

.stickyheader #kad-banner {
    max-height: 120px;
}

-Kevin

[Eduardo]

Eduardo

#169914

Got it!

.page-id-11 #kad-banner {
background: #36a8c2 !important;
opacity: .9;
}

[Eduardo]

Eduardo

#169894

This reply has been marked as private.

[Eduardo]

Eduardo

#169886

This reply has been marked as private.

[Ben Ritner]

Ben Ritner

#169799

update this css:

div#kad-mobile-banner {
    display: block !important;
}

to this:

#kad-mobile-banner {
    display: block !important;
    height: auto;
}

[Kevin]

Kevin

#169681

Since Ascend uses an entirely different header for mobile, you’ll have to force the mobile header to show up, and force the desktop header to be hidden.

Try adding this CSS to Theme Options> Custom CSS, and let me know if it works for you:

div#kad-mobile-banner {
    display: block !important;
}

#kad-mobile-banner .mobile-header-container {
    min-width: 100%;
}

-Kevin