Search Results for 'banner'

[Hannah]

Hannah

#241523

You have an open media query in your css here:

@media (max-width: 992px) {
#kad-banner .container {
width: 100%;
padding: 0;
}

You just need to add a closing bracket to that as it is affecting all css being added after it.
Hope that helps!

Hannah

[Angelo Lazzari]

Angelo Lazzari

#241352

Hi, how can i put a banner like your for the black friday? i tried with a plugin ( simple banner) but it creates a banner “over” the topbar and not on top of the site pushing all the site down….

thank you very much
Angelo

[Angelo Lazzari]

Angelo Lazzari

#241352

Hi, how can i put a banner like your for the black friday? i tried with a plugin ( simple banner) but it creates a banner “over” the topbar and not on top of the site pushing all the site down….

thank you very much
Angelo

[Hannah]

Hannah

#241106

Hey Peggy,
Try adding this to your custom css box in Theme Options > Advanced Settings:

@media (max-width: 1200px) {
#kad-mobile-banner-sticky-wrapper {
display: block;
} 
#kad-mobile-banner { 
display: block; height: 90px; 
} 
#kad-banner-sticky-wrapper, #kad-banner { 
display: none; 
}
}

Hope it helps!

Hannah

[phil2]

phil2

#241024

Hi Team,

On Dogs101, I’ve set the header to shrink and stick. The “Header Center Start Height” is set to 170px.

After a page refresh however, the header height is 297px – which obscures some of the picture behind it. This happens for all pages.
Please can you see what I’m doing wrong?
Thanks,
Phil.

[phil2]

phil2

#241024

Hi Team,

On Dogs101, I’ve set the header to shrink and stick. The “Header Center Start Height” is set to 170px.

After a page refresh however, the header height is 297px – which obscures some of the picture behind it. This happens for all pages.
Please can you see what I’m doing wrong?
Thanks,
Phil.

[Anita]

Anita

#240848

Hello,

I have added a border to my #kad-banner in order to separate the header from the content in product and blog entry pages. How can I keep some sort of padding on the individual product pages without affecting my other pages? Now, you’ll see the product page content is crammed up into the #kad-banner border. See link in below comment.

Sincerely,
Anita

[Anita]

Anita

#240848

Hello,

I have added a border to my #kad-banner in order to separate the header from the content in product and blog entry pages. How can I keep some sort of padding on the individual product pages without affecting my other pages? Now, you’ll see the product page content is crammed up into the #kad-banner border. See link in below comment.

Sincerely,
Anita

[Hannah]

Hannah

#240821

Hey Dorcas,
Unfortunately there isn’t a way to use the landing page on your actual homepage as the homepage template will automatically override it. However, if you’re wanting to remove the header and footer from the homepage you can do so with this css:

.home #kad-banner-sticky-wrapper, .home header#kad-banner, .home #containerfooter {
    display: none;
}

We very much appreciate reviews:) You can leave one here: https://www.kadencewp.com/product/virtue-premium-theme/#reviews

Cheers!

Hannah

[Danielle]

Danielle

#240525

Hi Ben,

We are using Ascend Premium.

Also, does the Ascend have the ‘Site-wide Banner’ option like Virtue?

Thanks
Danielle

[Hannah]

Hannah

#240479

Try using this:

@media only screen and (min-width: 768px)  {
.kt-header-position-above, .second-nav-container {
display: block;
}
 
#kad-mobile-banner {
display: block;
height: auto;
}
 
header#kad-header-menu {
display: none;
}
}

Does that work?
At this point, you would need to manually enter this into all your sites.

Hannah

[Hannah]

Hannah

#240440

Try adding this to your custom css:

@media (max-width: 1200px) {
.kt-header-position-above, .second-nav-container {
display: block;
}
 
#kad-mobile-banner {
display: block;
height: auto;
}
 
header#kad-header-menu {
display: none;
}
}

Hope it helps!

Hannah

[Dave]

Dave

#240316

I like the way your header on these forums (for example) tucks away into a very tight little compact bar. Your logo is particularly well suited to that. I think I need to find a way to simplify the logo and make it in such a way that it does suit that space. The large version is what we use on our product labels, though, so I want for the associations to remain. I tried to work it into the Kadence Slider at the very top of the home page, but it’s not going to work there.

Hannah gave me a snippet of CSS last week that removed the logo altogether as soon as the header started to shrink. Could that be used to add another image at the same time? I don’t suppose there are animations for that area yet, are there?

Agreed about the menu icons. I wasn’t thinking about that. I’ll shelve that idea, at least for now.

By stacked, I mean one thing above another which is above a third thing on the left side while on the other, there’s much less (and part of what is there shouldn’t be). See the image below. The top is what I think I’d like for the header area to look before shrinking. I could easily be talked out of using the global banner function, but as the information it contains is part of what I hope encourages people to get into the shopping cart area, putting it there would be too late for many folks. Also, I most often point to the URL of a particular product in my ads, so including that on the front page alone isn’t going to be useful.

I need to be able to say something like that where people are reasonably certain to catch it. It’s important because other companies like ours don’t keep their yarns in stock, and are usually more like 6 weeks or more in delivering product. Right now, two of our competitors are apologizing about being 6 months behind in completing orders. Fast shipping, even for custom items, is a big selling point. I’m not fond of that placement, but I can’t think of where else to put it. As it is, it’s easy to edit or change when I want to, too. What if the CSS Hannah started included a bit of style in it’s presentation of this text, and also disappeared when the header shrinks? I get confused about top bar / main menu designations. I don’t know what to properly call this, but this is kinda what I’m thinking about. Before shrink and after: https://gyazo.com/307ffe861c731c345292a38c0c6e2a5f

As far as I know, this is the only problem area. What’s there at the moment doesn’t look great, but it functions as it’s supposed to. In other words, this isn’t a priority issue in my mind. I’m grateful for your help, but with Hannah’s help, and that of your on-line documentation, most everything is back up and running again. I have some things to do in other parts of the site that I’ve been unable to make work nicely until now, but these blocks are going to make what I want to do in those areas slick and easy. I have some advertising I want to do for Friday, so as long as we can get that header area looking good before the close of Thursday, that’ll be plenty of time.

[Hannah]

Hannah

#240148

Hey Dave,
You can use css like the following to remove the logo from your shrink header:

  #kad-shrinkheader #logo {
        display: block;
    }
    .is-sticky #kad-shrinkheader #logo {
      display: none;
    }
    .stickyheader #kad-banner-sticky-wrapper:not(.is-sticky) #kad-banner {
        overflow: show;
    }

Let me know how that works for you!

Hannah

[Ben Ritner]

Ben Ritner

#240146

When I looked with my mobile phone, I did not see any such problem.

That means that Google isn’t able to gather all the styles for your site. This can happen then go away; it really can depend on a few variables; mostly, it’s that the Google mobile tester has had this problem for years, and they haven’t fixed it. There are lots of reports of it online. One way to make it more consistently download your content is to speed up your page load. Here is an image showing the notice of “Page load issues,” which means that Google wasn’t able to render all the styles.

2. You can add this css. The map is not clearing the float because iframe maps are loaded in an absolute position.

@media (max-width: 767px) {
    #kad-banner {
        z-index: 1000;
        position: relative;
    }
}

[Hannah]

Hannah

#240050

Hey,
I’m seeing this in your autoptimize css:

@media (max-width: 767px) {
#kad-banner, #kad-banner-sticky-wrapper {
    display: none;
}
}

Do you see that in your plugin settings?

Hannah

[Sebastian C.]

Sebastian C.

#239850

Hello Kadence team,
Hello Ben,

First, I want to thank you for your awesome themes and plugins. I used virtue for years for my freelancer site, now bought a lifetime membership to use Ascend for my company. Before I bought it, I tested and read a lot about Astra, Themify, Divi, Avada and some theme-forest themes. And as you see, you are the winner! 🙂

But… starting to import your example ascend themes, I also want to give some suggestions and also some questions.

1. Since Gutenberg is a good and new standard, please add more Gutenberg/Blocks examples without use of page builder. As you have your own great row-design-blocks, I think you don’t need it and it would be much better for us (user) to make use of your examples. I found some, but more would be great!

2. You use all the time (or most of the time) your Ascend “Homepage Design” settings in the theme options, to design the Home site. I personally, don’t like it. Since Gutenberg is here (I think) you should use Page content and your own block. Every Feature Virtue and Ascend have out of “theme options Homepage” settings should be available with your block plugin. That would be great and much more flexible.
Disadvantages of using theme options for home page: Change your theme, home page is gone.
And also you don’t have a WYSIWYG feeling when design a page out of theme options.
For me, I would much more like when your example home pages would be designed with Gutenberg Blocks. Or perhaps show both, the Gutenberg home page style could be another site in the examples, don’t have to be the home site. So you can show both possibilities to make the same design.

3. Most of your page examples are for artists and shops. Would be great to see more corporate identity pages for something like, IT Services, Games, much more technical corporate style and with things like partner-banner, job pages, company history, team, service explanations. I know we can do it with Ascend and Virtue of course, but would be cool to find some examples, because your examples look really, really great and give us great ideas!

Following are more kind of questions, but also some feedback included:
1. Slider Pro in Gutenberg:
I can manage to add your slider pro as Gutenberg block with shortcode. But this lacks the availability of WYSIWYG and see directly the design. Is there a way to add a slider-pro-generated-slider in Gutenberg as block and see it directly? If not, would be nice in the future.

2. Flip Icon Box:
I don’t find Flip Icon Box as Gutenberg block. (example here, middle of the page *Login to see link
Is a shortcode for this available? Would be nice to see it in Gutenberg as Block. (Or do I was to blin to find it?)

3. Three triangle as separator:
You used the design of three triangle as separator for example here: *Login to see link I see it is a page builder feature, but you have your own Gutenberg blocks separator, but you have only one triangle in your own separator. Would be nice to see three triangles in yours, because page builder is not needed anymore. Can I do it with custom CSS already to make 3 triangles out of one triangle with your block separator?

4. How to add full width rows on a boxed content page?
Your did it here: (the row with “Single Column Layout”)
*Login to see link

I also see the CSS in the page wich makes it to full width:
width: 100vw; */
position: relative;
/* left: 50%; */
/* right: 50%; */
/* margin-left: -50vw; */
/* margin-right: -50vw;

But how did you make it with your “Row Layout” block?
Custom CSS? How did you add it? Because I did not get managed to configure such a full width row with your “Row Layout” block. Even when I import the same example and look in the setting, I do not find the option for it. 🙁

5. Animated Text:
Is animated Text only available as shortcode? I did not find it in your Gutenberg blocks. It is a nice feature of your themes, you be available as Block to have it in Gutenberg to be able to better see what your get (WYSIWYG).

6. Flippable images:
I found fliappable images (Products on Sale) for example here on your pages: *Login to see link
Is this feature available in Gutenberg without use of WooCommerce as block or per shortcode?

7. Question about animations:
I saw that you support animations with your Blocks Plugin, that is great. Just a question for that.
I like for example the following enfold example *Login to see link , that there are animations on scroll. (side note: But I don’t like themes which are bringing its own builder.)
Just a question: I think with some hand work and using your row-block and assign animations, can design something similar in your theme and with your blocks and your animations. Or do you see big limitations?
As example the testimonials on the bottom of the page. Will I be able to do such a animations to the face-images with custom CSS to add such an animation on scroll to your testimonials-block?
(If possible, would be nice if you could provide a CSS example to add “animations on scroll” on elements which does not support it out of the box.)

Another good example of many animations on scroll:
*Login to see link
–> Would be really nice to see such an example page in your Ascend example in the future! I think you have most of the features (even with some custom CSS) available!

Hope my post is not too long and questions and topics make sense. 🙂

Best regards and thanks a lot!
Sebastian

• This topic was modified 6 years, 6 months ago by Sebastian C..
• This topic was modified 6 years, 6 months ago by Sebastian C..
• This topic was modified 6 years, 6 months ago by Sebastian C..
• This topic was modified 6 years, 6 months ago by Sebastian C..

[Sebastian C.]

Sebastian C.

#239850

Hello Kadence team,
Hello Ben,

First, I want to thank you for your awesome themes and plugins. I used virtue for years for my freelancer site, now bought a lifetime membership to use Ascend for my company. Before I bought it, I tested and read a lot about Astra, Themify, Divi, Avada and some theme-forest themes. And as you see, you are the winner! 🙂

But… starting to import your example ascend themes, I also want to give some suggestions and also some questions.

1. Since Gutenberg is a good and new standard, please add more Gutenberg/Blocks examples without use of page builder. As you have your own great row-design-blocks, I think you don’t need it and it would be much better for us (user) to make use of your examples. I found some, but more would be great!

2. You use all the time (or most of the time) your Ascend “Homepage Design” settings in the theme options, to design the Home site. I personally, don’t like it. Since Gutenberg is here (I think) you should use Page content and your own block. Every Feature Virtue and Ascend have out of “theme options Homepage” settings should be available with your block plugin. That would be great and much more flexible.
Disadvantages of using theme options for home page: Change your theme, home page is gone.
And also you don’t have a WYSIWYG feeling when design a page out of theme options.
For me, I would much more like when your example home pages would be designed with Gutenberg Blocks. Or perhaps show both, the Gutenberg home page style could be another site in the examples, don’t have to be the home site. So you can show both possibilities to make the same design.

3. Most of your page examples are for artists and shops. Would be great to see more corporate identity pages for something like, IT Services, Games, much more technical corporate style and with things like partner-banner, job pages, company history, team, service explanations. I know we can do it with Ascend and Virtue of course, but would be cool to find some examples, because your examples look really, really great and give us great ideas!

Following are more kind of questions, but also some feedback included:
1. Slider Pro in Gutenberg:
I can manage to add your slider pro as Gutenberg block with shortcode. But this lacks the availability of WYSIWYG and see directly the design. Is there a way to add a slider-pro-generated-slider in Gutenberg as block and see it directly? If not, would be nice in the future.

2. Flip Icon Box:
I don’t find Flip Icon Box as Gutenberg block. (example here, middle of the page *Login to see link
Is a shortcode for this available? Would be nice to see it in Gutenberg as Block. (Or do I was to blin to find it?)

3. Three triangle as separator:
You used the design of three triangle as separator for example here: *Login to see link I see it is a page builder feature, but you have your own Gutenberg blocks separator, but you have only one triangle in your own separator. Would be nice to see three triangles in yours, because page builder is not needed anymore. Can I do it with custom CSS already to make 3 triangles out of one triangle with your block separator?

4. How to add full width rows on a boxed content page?
Your did it here: (the row with “Single Column Layout”)
*Login to see link

I also see the CSS in the page wich makes it to full width:
width: 100vw; */
position: relative;
/* left: 50%; */
/* right: 50%; */
/* margin-left: -50vw; */
/* margin-right: -50vw;

But how did you make it with your “Row Layout” block?
Custom CSS? How did you add it? Because I did not get managed to configure such a full width row with your “Row Layout” block. Even when I import the same example and look in the setting, I do not find the option for it. 🙁

5. Animated Text:
Is animated Text only available as shortcode? I did not find it in your Gutenberg blocks. It is a nice feature of your themes, you be available as Block to have it in Gutenberg to be able to better see what your get (WYSIWYG).

6. Flippable images:
I found fliappable images (Products on Sale) for example here on your pages: *Login to see link
Is this feature available in Gutenberg without use of WooCommerce as block or per shortcode?

7. Question about animations:
I saw that you support animations with your Blocks Plugin, that is great. Just a question for that.
I like for example the following enfold example *Login to see link , that there are animations on scroll. (side note: But I don’t like themes which are bringing its own builder.)
Just a question: I think with some hand work and using your row-block and assign animations, can design something similar in your theme and with your blocks and your animations. Or do you see big limitations?
As example the testimonials on the bottom of the page. Will I be able to do such a animations to the face-images with custom CSS to add such an animation on scroll to your testimonials-block?
(If possible, would be nice if you could provide a CSS example to add “animations on scroll” on elements which does not support it out of the box.)

Another good example of many animations on scroll:
*Login to see link
–> Would be really nice to see such an example page in your Ascend example in the future! I think you have most of the features (even with some custom CSS) available!

Hope my post is not too long and questions and topics make sense. 🙂

Best regards and thanks a lot!
Sebastian

• This topic was modified 6 years, 6 months ago by Sebastian C..
• This topic was modified 6 years, 6 months ago by Sebastian C..
• This topic was modified 6 years, 6 months ago by Sebastian C..
• This topic was modified 6 years, 6 months ago by Sebastian C..

[glen1]

glen1

#239710

Hi
1) I was wondering if there is a way to have the ‘hamburger’ menu on the desktop version of a website like it appears on a mobile.

I’ve used this code a work around, but not sure if it is ideal.

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

2) Also, is there a way to prevent the rest of a page going dark (or change the opacity) when a mobile menu is opened?

The site is glennewman.co.uk (work in progress!)

Many thanks
Glen

[glen1]

glen1

#239710

Hi
1) I was wondering if there is a way to have the ‘hamburger’ menu on the desktop version of a website like it appears on a mobile.

I’ve used this code a work around, but not sure if it is ideal.

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

2) Also, is there a way to prevent the rest of a page going dark (or change the opacity) when a mobile menu is opened?

The site is glennewman.co.uk (work in progress!)

Many thanks
Glen

[Hannah]

Hannah

#239523

This css should do it:

@media (max-width: 1050px) {
    .kt-header-position-above, .second-nav-container {
display: block;
}
#kad-mobile-banner {
display: block;
height: auto;
}
header#kad-header-menu {
display: none;
}
}

Hannah

[Ben Ritner]

Ben Ritner

#239498

You can use css like this:

.is-sticky #kad-banner {
    box-shadow: 0 3px 4px 0px rgba(0,0,0,.16)!important;
}

[Janine]

Janine

#239391

Hi, can you please provide me with the CSS to remove the title of all of the posts in my podcast category please? See: *Login to see link The word “podcast” appears in the banner image.

Also, is there a way to use the featured post image so it appears in the excerpt images on the category page, but not in the post itself, as I want to use a banner, and not have the featured image right underneath it, as in the page above?

Many thanks!

Janine

[Janine]

Janine

#239391

Hi, can you please provide me with the CSS to remove the title of all of the posts in my podcast category please? See: *Login to see link The word “podcast” appears in the banner image.

Also, is there a way to use the featured post image so it appears in the excerpt images on the category page, but not in the post itself, as I want to use a banner, and not have the featured image right underneath it, as in the page above?

Many thanks!

Janine

[Hannah]

Hannah

#239277

Try adding this to your custom css:

@media (max-width: 991px) {
.stickyheader #kad-banner-sticky-wrapper #kad-banner.kt-not-mobile-sticky {
    position: fixed !important;
    width: 100% !important;
    top: 0 !important;
}
div#ktmain {
    margin-top: 110px;
}
img.kad-retina-logo {
    margin-top: 20px;
}
}

Hope that helps!

Hannah

[Mark]

Mark

#239266

Thanks Hannah that pretty much sorted it just needed to tweak a fair bit for different screen resolution positioning for desktop and mobile.

used the following, let me know if it’s ok;

button.nav-trigger-case.collapsed.mobileclass {
margin-top: -30px;
}
span.kad-navbtn.clearfix {
margin-top: 10px;
}
#kad-banner {
min-height: 93px !important;
}

@media (max-width: 1200px) {
button.nav-trigger-case.collapsed.mobileclass {
margin-top: -20px;
}
}

@media (max-width: 992px) {
button.nav-trigger-case.collapsed.mobileclass {
margin-top: -20px;
}
#kad-banner {
min-height: 150px !important;
}
}

@media (max-width: 768px) {
button.nav-trigger-case.collapsed.mobileclass {
margin-top: -40px;
}
#kad-banner {
min-height: 150px !important;
}
}

@media (max-width: 440px) {
button.nav-trigger-case.collapsed.mobileclass {
margin-top: -20px;
}
#kad-banner {
min-height: 170px !important;
}
}
One unfortunate side effect is losing sticky on mobile, is it possible to fix? Not the end of the world if not.

Thanks,

Mark.