Search Results for 'banner'

[Hannah]

Hannah

#145690

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

.home .infobanner {
    margin-bottom: 20px;
}

Hannah

[Stephen]

Stephen

#145562

We’re having an issue with the background row banner image and text “getting stuck” when the viewport is changed. When we scale the viewport (click and drag the corners to make it smaller), re-fresh the page and then re-size it back to full-width, the banner image and all of the text is stuck at the smaller size. This may sound weird, but this is not happening on other sites we have with Virtue.

Steps to error are as follows:

Open page full width
Re-size to smaller viewport either with inspector or by dragging corners
Refresh page
Re-size back to full width either with inspector or by dragging corners
Page content is cropped / still at smaller widths

*Login to see link
*Login to see link

[Stephen]

Stephen

#145562

We’re having an issue with the background row banner image and text “getting stuck” when the viewport is changed. When we scale the viewport (click and drag the corners to make it smaller), re-fresh the page and then re-size it back to full-width, the banner image and all of the text is stuck at the smaller size. This may sound weird, but this is not happening on other sites we have with Virtue.

Steps to error are as follows:

Open page full width
Re-size to smaller viewport either with inspector or by dragging corners
Refresh page
Re-size back to full width either with inspector or by dragging corners
Page content is cropped / still at smaller widths

*Login to see link
*Login to see link

[Jessica Santini]

Jessica Santini

#145447

I have this…

.headerclass {
box-shadow: 0 0 20px 5px #777;
}

body.page .page-header {
display: none;
}

.topbarmenu ul li a {
font-size: 16px;
color: #003c71;
}

body div#kad-banner-sticky-wrapper {
height: auto !important;
}
body.home .wrap.clearfix.contentclass.hfeed {
padding-top: 0;
}

.homecontent .caroufedselclass .kad_product .blog_item .entry-content {
display: none;
}

@media (max-width: 767px){
.staff-img {
float: none;
margin: 10px auto;
text-align: center;
}
}

.kt_imgsplit_btn {
background: #003c71;
}

[Hannah]

Hannah

#145010

Hey,
I would suggest disabling your topbar (theme options > topbar settings) and instead enabling the header widget area (theme options > main settings > logo options). Then you can add your widget from Appearance > Widgets. Let me know when you’ve done this and I can help with css to align things.
This css should stretch your logo to the far left and float your menu beside it.

header#kad-banner .container {
    width: 100%;
}
#nav-main, .nav-main {
    float: left;
}

You can paste that into your custom css box in Theme Options > Advanced Settings.
Hope that helps!

Hannah

[Georgiy]

Georgiy

#144941

thanj you kevin, but i’m looking for a feature header image, one that is specific to the Blog Page and not to each blog post.
Example: http://navaratoronto.ca/schedule/
i want the same image with title to appear on the Blog Page (http://navaratoronto.ca/blog/)

something like you guess have on your blog (https://www.kadencewp.com/creating-a-blog-page/) but instead of the blue coloured banner it would be an image

=D

[Ben Ritner]

Ben Ritner

#144668

Hey,
I’m seeing something odd where the sticky header is set to be on in the code but then seems to be overridden to be off.

Here is some temp css that will force things to work:

.stickyheader #kad-banner {
    position: relative !important;
}

But can you send me a temp login so I can see your settings and see whats going on?

Ben

[Stephen]

Stephen

#144608

Actually, we discovered that Firefox does not display banner images at ‘Full Width’, that’s what was causing our problem and why the images were showing up one-third the width of the viewport. After much experimentation, duplicating / deleting rows, we realized that all we needed to do was to change the row layout to ‘Full Width Stretched’ and it displayed full width on Firefox.

If anyone else has this problem, try changing the row layout to full width stretched. It should look the same on Chrome and Firefox.

We’ve fixed the homepage and we’re going through now fixing the subpages, so if you can’t find a broken example it’s because we fixed it. 🙂

Row set to ‘Full Width’: http://camino.kwsmdesign.com/borrow/rates/
Row set to ‘Full Width Stretched: http://camino.kwsmdesign.com/grow/savings/regular-share-savings/

Thanks,
Steve

[Hannah]

Hannah

#144587

Ok, I’m still a little confused. Here’s what I suggest… Rather than adding the top fullwidth banner through page builder, use the home slider from Theme Options > Home Layout (the kadence slide should work well for this). Then you can enable the icon menu before your page content. Let me know when you’ve done this and I can help with css to create the overlap.

Hannah

[Matthias]

Matthias

#144338

Hi Hannah,
I’m adding #kad-banner to have the same function like the arrow.
The arrow uses the anchor #kad-banner, too.
But it does not work as background link. Don’t know why?
Do you have any suggestions?
Thanks
Matthias

[Lena]

Lena

#144335

This is getting frustrating and it just doesn’t work in the way I want it. Now the sitewide banner disappeard from everywhere 🙂

I need it to show ads in that area – everywhere except on the home page. I know there is an option for widget area in the header, but if I enable it, the layout totally breaks + because the menu is sticky, the ad would “drive” all the way down with the menu and this could be even more frustrating. Take a look at this screenshot: http://www.awesomescreenshot.com/image/2467976/2496f1dc38558b3e01d2d6fd67880c68

So can you please suggest any other solution?I can give you my login credentials and you can see it for yourself.

[Matthias]

Matthias

#144290

Hi Ben,
thanks for the addition for backgroundlinks in kadence slider.
Actually, when I click on the arrow in the slider, the site slides down to the content.
But when I set the #kad-banner as background link in the slider it does not slide down?
Example
How can I have the same sliding down, in the link of the background image?
Thanks
Matthias

[Matthias]

Matthias

#144290

Hi Ben,
thanks for the addition for backgroundlinks in kadence slider.
Actually, when I click on the arrow in the slider, the site slides down to the content.
But when I set the #kad-banner as background link in the slider it does not slide down?
Example
How can I have the same sliding down, in the link of the background image?
Thanks
Matthias

[AJ]

AJ

#144059

Awesome Kevin, thanks!

That worked a treat. The only strange side-effect was that it cut the tops and bottom off the banner image. It’s not a huge deal, but is that to be expected?

[Kevin]

Kevin

#144042

You can remove it from your home page by adding this CSS to Theme Options> Advanced Settings:

.home header#kad-banner {
    display: none;
}

-kevin

[Lena]

Lena

#144020

Hi Hannah,

it almost works, which means the banner is hidden when I’m logged in, but not when I’m logged out 🙁

[Sylvie]

Sylvie

#144013

Hi, I added this code to make my header white but with a transparency of 0.7. The problem is the layer sits on top of my logo and menu making a screen on top. How can I move the logo and menu on top of that header but keeping the header on top of the slider when I scroll.

@media (min-width: 768px) {
.home #kad-banner {
background: #ffffff;
opacity: 0.7;
width: 100%;
z-index: 1000;
position: absolute;
}
}
Thanks,

[Sylvie]

Sylvie

#144013

Hi, I added this code to make my header white but with a transparency of 0.7. The problem is the layer sits on top of my logo and menu making a screen on top. How can I move the logo and menu on top of that header but keeping the header on top of the slider when I scroll.

@media (min-width: 768px) {
.home #kad-banner {
background: #ffffff;
opacity: 0.7;
width: 100%;
z-index: 1000;
position: absolute;
}
}
Thanks,

[Lena]

Lena

#144005

Hi Kevin,

sorry to bother you again, but I am really not sure if that CSS is working, because no matter what I do, I can still see the banner. Take a look at this screenshot: http://www.awesomescreenshot.com/image/2460715/880d0a888c165d9f1ab16578703594bb

[Ben Ritner]

Ben Ritner

#143915

I added this css so the images will always fill:

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

Ben

[Ben Ritner]

Ben Ritner

#143607

On this site: torbaywindows.co.uk

Your custom css is broken because you are not correctly closing out a media query. You have this:

@media (max-width: 768px) {
body #kad-banner #logo .kad-retina-logo {
   width: 80%;
}

And it should be this:

@media (max-width: 768px) {
body #kad-banner #logo .kad-retina-logo {
   width: 80%;
}
}

Ben

[Hannah]

Hannah

#143524

Hey Sylvie,
This css should work for you:

@media (max-width: 768px) {
.home .infobanner {
    display: none;
}
}

Hope that helps!

Hannah

[Norman]

Norman

#143500

This reply has been marked as private.