Search Results for 'banner'

[ManInTheBlackHat]

ManInTheBlackHat

#169514

Hello good folks,

I have a series of questions regarding my site. http://www.sketchywireframes.com

These are my first 2 questions (out of 8)

Specifically, i have a “hero image” on this section of this page (*Login to see link using the SiteOrigin Headline widget. The hero image is positioned a bit lower from the top menu bar, which shows the background between the top menu and hero image

-how can i position the hero image to top of the page, right under the top menu bar? There doesn’t seem to be an obvious way to do so.

-How can i change the size of the hero image itself? I’d like to make the image itself a bit smaller. Unfortunately, The SiteOrigin Headline widget only give me the option to shrink the banner mask. This only decreases the “window” of the banner, the size of the image is the same.

Let me know if you need access to the site, i can give you login info.

[ManInTheBlackHat]

ManInTheBlackHat

#169514

Hello good folks,

I have a series of questions regarding my site. http://www.sketchywireframes.com

These are my first 2 questions (out of 8)

Specifically, i have a “hero image” on this section of this page (*Login to see link using the SiteOrigin Headline widget. The hero image is positioned a bit lower from the top menu bar, which shows the background between the top menu and hero image

-how can i position the hero image to top of the page, right under the top menu bar? There doesn’t seem to be an obvious way to do so.

-How can i change the size of the hero image itself? I’d like to make the image itself a bit smaller. Unfortunately, The SiteOrigin Headline widget only give me the option to shrink the banner mask. This only decreases the “window” of the banner, the size of the image is the same.

Let me know if you need access to the site, i can give you login info.

[Hannah]

Hannah

#169055

Are you adding the banner images through page builder? If so, just setting the row layout to full width stretched. Does that work for you?

Hannah

[Park]

Park

#169006

This solves my issue with moving the topbanner image content to the top, but how can I scale these topbanner images to show at 100% width on all devices? Thanks!

[Park]

Park

#168594

Hi,

I would like to display each of my page “top banner” images the same way as I did on my home page.

I have accomplished the full width and aligned top on the home page with a kadence pro slider.

I don’t need the functions of a slider for my top banner images for each of my pages, but I want to display that image full width and aligned to the top of the page in the same style as seen on my home page.

I tried to move the image up using negative values for margins/padding but it doesn’t move anywhere. I would like the primary menu to overlap on top of each page’s top banner image, the same way as seen on my home page.

Could you help me accomplish this? Thanks for any advice/assistance you can offer.

[Park]

Park

#168594

Hi,

I would like to display each of my page “top banner” images the same way as I did on my home page.

I have accomplished the full width and aligned top on the home page with a kadence pro slider.

I don’t need the functions of a slider for my top banner images for each of my pages, but I want to display that image full width and aligned to the top of the page in the same style as seen on my home page.

I tried to move the image up using negative values for margins/padding but it doesn’t move anywhere. I would like the primary menu to overlap on top of each page’s top banner image, the same way as seen on my home page.

Could you help me accomplish this? Thanks for any advice/assistance you can offer.

[Ben Ritner]

Ben Ritner

#168201

I’m going to suggest this :

@media (max-width: 992px) {
.stickyheader.trans-header #kad-banner {
    position: relative;
}
}

But that will keep your header sticky so let me know.

Ben

[Stephen]

Stephen

#168196

I’m trying to remove the CSS settings that place the hero image behind the header on mobile. I’ve added the CSS below and it’s working in chrome dev tools, but not on an actual device – iPad and iPhone 7. Am I missing something?

Link to site: Immersion World Travel

`

@media only screen and (max-device-width : 768px) {

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

}

[Stephen]

Stephen

#168196

I’m trying to remove the CSS settings that place the hero image behind the header on mobile. I’ve added the CSS below and it’s working in chrome dev tools, but not on an actual device – iPad and iPhone 7. Am I missing something?

Link to site: Immersion World Travel

`

@media only screen and (max-device-width : 768px) {

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

}

[Ben Ritner]

Ben Ritner

#168151

Update the css to this:

#kad-banner .elastislide-wrapper, #kad-banner .loading-wrap {
    min-height: 170px;
}
#kad-banner .elastislide-list {
    height: 150px;
}

Ben

[Ben Ritner]

Ben Ritner

#168107

1. Thanks for saying it still exists. Would it be possible for you to describe a bit more since I don’t understand or see what you are referring to?

2. This is just caused by the delayed nature of how that slider loads. add this:

#kad-banner .elastislide-wrapper {
    min-height: 170px;
}

The issue is that at some point the height of your header has to be calcualted so that when the container becomes fixed your page doesn’t jump up from the sudden lack of content. What you are trying to do with the built-in sticky header is just going to take some hacks. The above css should get you closer. lets see how it works from there.

Ben

[Ben Ritner]

Ben Ritner

#167981

Hey,
1. I don’t understand or see what you are referring to? I see a slider above an image.
2. Yeah, the sticky header has a set height which is causing your issue, try this css:

.stickyheader #kad-banner {
height: auto !important;
}

3. The above css would so that.

Ben

[Donna]

Donna

#167952

This reply has been marked as private.

[Geoff]

Geoff

#167506

I am using Kadence Slider. Its turned off in mobile banner. Shortcode does not work you have sent – still showing

[Geoff]

Geoff

#167470

http://www.schoolfurnitureoffers.com

I have turned the mobile banner off in theme settings but the blue banner is still showing on mobiles. Please can you help.

[Geoff]

Geoff

#167470

http://www.schoolfurnitureoffers.com

I have turned the mobile banner off in theme settings but the blue banner is still showing on mobiles. Please can you help.

[Ben Ritner]

Ben Ritner

#167402

Hey,
You are adding this css:

.headerclass, .mobile-headerclass {
    border-bottom: 1px solid #bf0000;
    padding-top: 7px;
    padding-bottom: 0px;
}

Which you shouldn’t do. You shouldn’t add padding to the header or a border since that is the sticky element.
Replace with css like this:

#kad-mobile-banner #mobile-logo.kad-mobile-logo-left a {
    padding-top: 7px;
}
#kad-mobile-banner .mobile-header-container {
    border-bottom: 1px solid #bf0000;
}

You may need to change that border to a ::after element just to keep it from interfering.

Ben

[Luke Shenefield]

Luke Shenefield

#167396

Hi guys,

redline.43designs.com

Continuing my training here. I’m trying to get rid of the 8px space above the slider and below the header. I know it is a combo of one of these:

.kad-mobile-banner-sticky-wrapper.sticky-wrapper {
height: 0px;
}

There is an id and a class and I still don’t get which is marked by # or . and how they string together.

It shows up as: “div#kad-mobile-banner-sticky-wrapper.sticky-wrapper” What’s the correct way to get rid of that space?

Thank you,

Luke

[Luke Shenefield]

Luke Shenefield

#167396

Hi guys,

redline.43designs.com

Continuing my training here. I’m trying to get rid of the 8px space above the slider and below the header. I know it is a combo of one of these:

.kad-mobile-banner-sticky-wrapper.sticky-wrapper {
height: 0px;
}

There is an id and a class and I still don’t get which is marked by # or . and how they string together.

It shows up as: “div#kad-mobile-banner-sticky-wrapper.sticky-wrapper” What’s the correct way to get rid of that space?

Thank you,

Luke

[Park]

Park

#167021

Hello,

I have a question about possibly making a sticky header appear when a visitor scrolls below my main slider or topbanner image for each page.

I would like my logo and menu to float (fixed/not sticky) over the main home slider, then appear below the main slider and remain sticky when the visitor scrolls down on my site. I looked for something like this in the settings, and it seems possible but can this be accomplished with some simple css or is it down to more complex javascript?

I would like to accomplish something like the sticky header appearing below the main slider as seen here: *Login to see link

Thanks.

*Login to see link

[Park]

Park

#167021

Hello,

I have a question about possibly making a sticky header appear when a visitor scrolls below my main slider or topbanner image for each page.

I would like my logo and menu to float (fixed/not sticky) over the main home slider, then appear below the main slider and remain sticky when the visitor scrolls down on my site. I looked for something like this in the settings, and it seems possible but can this be accomplished with some simple css or is it down to more complex javascript?

I would like to accomplish something like the sticky header appearing below the main slider as seen here: *Login to see link

Thanks.

*Login to see link

[Pamela]

Pamela

#166888

This reply has been marked as private.

[hello39]

hello39

#166549

Hello,
I customized the demo “About” page and wanted to do a replica for the French version of the site.
WPML doesn’t copy Page Builder elements it seems, so I did it manually.
But i cannot seem to hide the “page title” in the French version. It is not in a banner anymore, but it still appears as H1 above Page Builder Call to action button.

Do you know how I could not display it for this page, and how to do it for other pages where I will encounter the same issue?

Thanks a lot

[hello39]

hello39

#166549

Hello,
I customized the demo “About” page and wanted to do a replica for the French version of the site.
WPML doesn’t copy Page Builder elements it seems, so I did it manually.
But i cannot seem to hide the “page title” in the French version. It is not in a banner anymore, but it still appears as H1 above Page Builder Call to action button.

Do you know how I could not display it for this page, and how to do it for other pages where I will encounter the same issue?

Thanks a lot

[Ben Ritner]

Ben Ritner

#166154

add this css:

@media (max-width: 992px) {
.stickyheader #kad-banner {
    position: relative !important;
}
}

I believe this just has to do with the css your adding in the child theme to make the mobile dropdown sit on top of your content instead of pushing it down.

Ben

[Klaus]

Klaus

#165647

Hi!
My issue:

I can see the content of my site when I click the direct link to the site, it looks as expected.
When I set is as Homepage in the WP or theme settings I get a blank page with only the kad-banner and the footer when calling the main domain name.

I removed all custom css: still blank
Using NO child theme: still blank

When I activate Virtue FREE (with all custom css set): I CAN see my content

How can I set the theme to show the site content when set and accessed as Word Press homepage?

Greetings Claus

[Klaus]

Klaus

#165647

Hi!
My issue:

I can see the content of my site when I click the direct link to the site, it looks as expected.
When I set is as Homepage in the WP or theme settings I get a blank page with only the kad-banner and the footer when calling the main domain name.

I removed all custom css: still blank
Using NO child theme: still blank

When I activate Virtue FREE (with all custom css set): I CAN see my content

How can I set the theme to show the site content when set and accessed as Word Press homepage?

Greetings Claus

[Ben Ritner]

Ben Ritner

#165347

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

Add that css.

Ben