Search Results for 'banner'

[James]

James

#143300

Hi, I have to adjust one or two pages with a header the client wants text in. So I will need the art to be responsive to be the full with of the screen, not bound by the default 1170px page width. Here is the specific page I am working on so you can see what I am doing…*Login to see link I need that banner that says “write your own story” to extend the full width of the browser window. This will be specific to a total of two pages in this site.

[James]

James

#143300

Hi, I have to adjust one or two pages with a header the client wants text in. So I will need the art to be responsive to be the full with of the screen, not bound by the default 1170px page width. Here is the specific page I am working on so you can see what I am doing…*Login to see link I need that banner that says “write your own story” to extend the full width of the browser window. This will be specific to a total of two pages in this site.

[Kevin]

Kevin

#143197

Simply change the CSS to this to effect all pages:

.trans-header #kad-banner-sticky-wrapper .logocase {
    visibility: hidden;
}

.is-sticky .logocase {
    visibility: initial !important;
}

Take notice the difference in the CSS. See that the above has .home class? This simply means it will only target that page. Removing it targets all pages.

-Kevin

[Pamela]

Pamela

#143196

This reply has been marked as private.

[Kevin]

Kevin

#143187

Yeah, I would just leave that blank and only use the CSS. When I had previously used that plugin, I just used CSS after uploading the font to my site.

I’m not sure what “Custom Elements” is, so I don’t know what that means. Is this a part of the font plugin?

I can move the site title with CSS, though where it can be moved will be limited. If you want it to appear in the other side of the header, that will not be doable with CSS>

Using the Kadence Slider, you’ll have to reconfigure your header image. The pro slider allows you to place text over any image of the slider, and it will behave responsively. So you could add the site url as a text layer and place it anywhere you like in the header.

Here is a guide to getting started with the Kadence Slider:
https://www.kadencewp.com/kadence-slider-pro/

I have an idea that may work for you to simplify this though. Try adding this CSS to Theme Options Custom CSS:

.home.trans-header #kad-banner-sticky-wrapper .logocase {
    visibility: hidden;
}

.home .is-sticky .logocase {
    visibility: initial !important;
}

This will hide the site URL until the page is scrolled. This way the header image on the home page will not be overlapped by the text. Perhaps this will work?

-Kevin

[Lena]

Lena

#143162

If I check the page in incognito mode, I don’t see the banner on the homepage, so I guess your CSS works 🙂

[Pamela]

Pamela

#143158

This reply has been marked as private.

[Kevin]

Kevin

#143157

I’m not seeing the banner on your home page. Did you clear your cache after adding the CSS?

Can you share a screenshot of what you’re trying to hide so that I can be sure I’m looking for the right thing?
https://www.postimg.org

-Kevin

[bayside]

bayside

#143032

Hi

Is there a way when creating a page you can insert rows that within the same page that appears only in either mobile or desktop device.
I have a site wwww.realestateuno.com.au that I would like to update the home page and only show the larger banners for a desk top but a different look for a mobile device. Problem is the content looks good on a large screen screen but is not as effective on a mobile. I have played with the padding for each row and this helps but I would like to create a separate row for mobile and another row for desktop.

Thanks for your assistance.

Steven

[bayside]

bayside

#143032

Hi

Is there a way when creating a page you can insert rows that within the same page that appears only in either mobile or desktop device.
I have a site wwww.realestateuno.com.au that I would like to update the home page and only show the larger banners for a desk top but a different look for a mobile device. Problem is the content looks good on a large screen screen but is not as effective on a mobile. I have played with the padding for each row and this helps but I would like to create a separate row for mobile and another row for desktop.

Thanks for your assistance.

Steven

[Jean-Charles]

Jean-Charles

#142965

Hello Ben,

No. I actually used “page title” to create a banner after page content as the last item, so my “page content” is second to last.

But it looks like this bug has been crushed with the latest update of Virtue. My homepage now looks the way I want it to look, with the social media buttons after the page content — but above “page title”, which is my last item as per your question, and that works great for me as it looks like a heading for my footer. You guys are awesome! Thank you.

[Ben Ritner]

Ben Ritner

#142921

You seem to be adding a css hack to make the header site over the page builder content.

I think you will want to add this css:

.stickyheader #kad-banner {
    position: fixed;
}

Ben

[Matt]

Matt

#142857

Hello Kadence Team,

I absolutely love the theme options and what you guys offer so I signed up for a membership. I would like to use Virtue Premium but like the shopping options in Ascend. I tried searching the forums first without luck, so I apologize if this has been answered before.

Is it possible to create or emulate a Shop Page (and eventually shop category pages) that has a sliding Banner on top like the Ascend theme inside of Virtue Premium?

Also the Single Product page in Ascend demo has a Full header image, is it possible to create or emulate that in Virtue Premium?

Thanks guys.

[Matt]

Matt

#142857

Hello Kadence Team,

I absolutely love the theme options and what you guys offer so I signed up for a membership. I would like to use Virtue Premium but like the shopping options in Ascend. I tried searching the forums first without luck, so I apologize if this has been answered before.

Is it possible to create or emulate a Shop Page (and eventually shop category pages) that has a sliding Banner on top like the Ascend theme inside of Virtue Premium?

Also the Single Product page in Ascend demo has a Full header image, is it possible to create or emulate that in Virtue Premium?

Thanks guys.

[Pamela]

Pamela

#142751

This reply has been marked as private.

[Pamela]

Pamela

#142696

This reply has been marked as private.

[Ben Ritner]

Ben Ritner

#142694

1. add this css:

.boxed #kad-mobile-banner {
    left: 0;
    width: auto;
    right: 0;
}
.boxed #kad-mobile-banner .mobile-header-container {
    padding:0 20px;
}

2. Instead of a carousel add a grid like this:

[featured_products per_page="3" columns="3"]

Ben

[Hannah]

Hannah

#142669

You can remove the media query which would make this apply to all screens until your simple mobile header is enabled. So change the css to this:

#nav-second {
    background: transparent;
}
.normal_banner {
    margin-top: -50px;
}

This css will space out your menu evenly:

#nav-second ul.sf-menu>li {
    width: 25%;
}

Hannah

[Hannah]

Hannah

#142652

So you’re wanting a transparent header? Pinnacle is set up like that, but Virtue is not. You can workaround with the following css, but it is not necessarily advised.

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

Hannah

[Hannah]

Hannah

#142609

Hey,
Pinnacle theme is set up to work this way, but Virtue however is not. You can workaround with css like this:

@media (min-width: 992px) {
#nav-second {
    background: transparent;
}
.normal_banner {
    margin-top: -50px;
}
}

Hope that helps!

Hannah

[Cavendish]

Cavendish

#142527

followup note: Realize a change that I am trying to make now is referenced in Ben’s solution above:”If you want the “banner” to be below your menu then use: . . . ” I actually want the menu to overlap the banner. Just opened a support thread on that question
https://www.kadencewp.com/support-forums/topic/possible-to-overlay-main-menu-on-banner/
but realize that, since you provided the current banner solution I’m using, maybe Ben (or someone else on this thread) would be best placed to provide this answer!

thanks,
Kevin

[Cavendish]

Cavendish

#142525

Hi,

Ideally I’d like the main menu to float on top of the banner, i.e. allow the banner to fill the entire header space
*Login to see link

rather than have a white or other color bar with the menu framing it above, as it does now
*Login to see link

Is this possible?

I should add that, in order to get the banner to fill the available space and to resize proportional to the browser window (i.e. responsively) I needed to employ a custom banner as explained here:
*Login to see link

[Cavendish]

Cavendish

#142525

Hi,

Ideally I’d like the main menu to float on top of the banner, i.e. allow the banner to fill the entire header space
*Login to see link

rather than have a white or other color bar with the menu framing it above, as it does now
*Login to see link

Is this possible?

I should add that, in order to get the banner to fill the available space and to resize proportional to the browser window (i.e. responsively) I needed to employ a custom banner as explained here:
*Login to see link

[Hannah]

Hannah

#142462

Hey,
This css should center your logo:

@media (min-width: 992px) {
.col-md-4.clearfix.kad-header-left {
    width: 100%;
    text-align: center;
}
}

As far as overlapping the header, try this css:

@media (min-width: 992px) {
.home header#kad-banner {
    background: rgba(255, 255, 255, .5);
}
.home .sliderclass {
    margin-top: -170px;
}
}

Is that what you’re envisioning?

Hannah