Search Results for 'banner'

[Dmitry]

Dmitry

#23506

Hi!
How did you do buttons with link on banner (in theme demo version style 4)?
And how to fix menu on the top of page when scrolling down?

[Dmitry]

Dmitry

#23506

Hi!
How did you do buttons with link on banner (in theme demo version style 4)?
And how to fix menu on the top of page when scrolling down?

[Ben Ritner]

Ben Ritner

#23481

your css box is missing a braket }

see:

#kad-banner #topbar .topbarsociallinks li a {
height: 26px;
.kpgi {
width: 100%;
}

should be:

#kad-banner #topbar .topbarsociallinks li a {
height: 26px;
}
.kpgi {
width: 100%;
}

[Ben Ritner]

Ben Ritner

#23474

Hey,
The image menu is designed to be a background image with text on top… see example here: http://themes.kadencethemes.com/virtue-premium-3/

The image is placed as a background with a position size to cover the div. Meaning it will stretch to fit.

If you want to change that you can change the css but this will not cahnge the size of the hover color, which is the div size.

for one example:

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

If you just want to add an image that is a link use the virtue: image widget.

Ben

[Ben Ritner]

Ben Ritner

#23439

ok, I think I understand the header issue in firefox.. add this css:

#topbar {
    overflow-y: hidden;
}
#kad-banner #topbar .topbarsociallinks li a {
height: 26px;
}

And the second issue can be fixed with this css:

.kpgi {
    width: 100%;
}

Ben

[Ben Ritner]

Ben Ritner

#23390

Hey,
So the image menu is designed to be a background image. One that fills the whole space. When you add:

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

That breaks the intent of the layout since it forces the image to be contained and not to cover the image menu area.
There is not a relationship between your background image and the title and description text to create a link that would have the text resize to match the image.

The closest thing you can do is add css like this:

.home-message h4, .home-message h5 {
width: 50%;
left: 50%;
margin-left: -25%;
}

But it’s not designed to work like your trying to make it work.

Ben

[nopadol]

nopadol

#23293

add css below PB? Tab over background image
——————————————-
.infobanner {
background-size: contain !important;
}

.home-message h4 {
position: absolute;
top: auto;
bottom : 0;
height: 10%;
width: 100%;
text-align:center;
font-size: 14px;
font-family: Lato;
left: 0px;
color: #fff;
background-color: #000;
background-color: rgba(0,0,0,.6);
padding: 0px;
margin: 0;
-webkit-transition:all .6s ease-in-out;
-moz-transition:all .6s ease-in-out;
-o-transition:all .6s ease-in-out;
transition:all .6s ease-in-out;
}
.home-message h5 {
position: absolute;
bottom: -100%;
right: 0px;
height: 10%;
width:100%;
color: #fff;
display: table-cell;
vertical-align: middle;
text-align:center;
font-size: 14px;
font-family: Lato;
padding: 0px;
margin:0;
line-height: normal;
background-color: #000;
background-color: rgba(0,0,0,.6);
-webkit-transition:all .6s ease-in-out;
-moz-transition:all .6s ease-in-out;
-o-transition:all .6s ease-in-out;
transition:all .6s ease-in-out;
}
.home-message {
overflow: hidden;
}
.home-message:hover h5 {
bottom: 0%;
}
.home-message:hover h4 {
bottom: 100%;
}
.home-message:hover {
background:transparent;
}

[nopadol]

nopadol

#23293

add css below PB? Tab over background image
——————————————-
.infobanner {
background-size: contain !important;
}

.home-message h4 {
position: absolute;
top: auto;
bottom : 0;
height: 10%;
width: 100%;
text-align:center;
font-size: 14px;
font-family: Lato;
left: 0px;
color: #fff;
background-color: #000;
background-color: rgba(0,0,0,.6);
padding: 0px;
margin: 0;
-webkit-transition:all .6s ease-in-out;
-moz-transition:all .6s ease-in-out;
-o-transition:all .6s ease-in-out;
transition:all .6s ease-in-out;
}
.home-message h5 {
position: absolute;
bottom: -100%;
right: 0px;
height: 10%;
width:100%;
color: #fff;
display: table-cell;
vertical-align: middle;
text-align:center;
font-size: 14px;
font-family: Lato;
padding: 0px;
margin:0;
line-height: normal;
background-color: #000;
background-color: rgba(0,0,0,.6);
-webkit-transition:all .6s ease-in-out;
-moz-transition:all .6s ease-in-out;
-o-transition:all .6s ease-in-out;
transition:all .6s ease-in-out;
}
.home-message {
overflow: hidden;
}
.home-message:hover h5 {
bottom: 0%;
}
.home-message:hover h4 {
bottom: 100%;
}
.home-message:hover {
background:transparent;
}

[Ben Ritner]

Ben Ritner

#22826

1. You can use an anchor link. Like <div class="kad_fullslider_arrow"><a href="#kad-banner">link</a></div>

2. It stays at a certain spot on the slider. If you made your slider “full screen” so it changed based on the size of the screen then the arrow would change too.

3. you added the css already.

4. I don’t see a white space.

5. No, it’s set up by a js script and it will always link to the top.

Ben

[Ben Ritner]

Ben Ritner

#22605

Hey,
1. Add this to your custom css box in the theme options:

@media (min-width: 768px){
    .kad-topbar-left {
        width: 75%;
    }
    .kad-topbar-right {
        width: 25%;
    }
}

2. Add this to your css box in the theme options:

@media (min-width: 992px){
#topbar {
    position: fixed;
    width: 100%;
    top: 0px;
    z-index: 1000;
}
header#kad-banner {
    margin-top: 35px;
}
}

Ben

[Danie]

Danie

#22468

Received the following css that resolved issue

As for your question, The single product pages has a post id class you can use but if your trying to target all the single products then try this css:

body.single-product .headerclass {
display: none;
}
body.single-product #kad-banner-sticky-wrapper {
display: none;
}

[Ben Ritner]

Ben Ritner

#22370

Hey,
Well the theme does have a built in layout like that. If you want the boxed style it will apply to the header as well as the content. The only css hack would require that you set the header height, and you won’t have the style on mobile…. you would set the boxed style and add this css:

@media (min-width: 992px) {.boxed header.banner.headerclass {
    position: absolute; top: 0; left: 0; width: 100%; margin: 0;
}
.boxed .contentclass {
padding-top: 220px;
}
}

NOTE: the padding top your going to have to set as the height of your header.

You can have a a widget area beside the logo, in the theme options > logo settings.
And you can use the secondary menu instead of the primary.

Ben

[Mark]

Mark

#22214

Ben,

How can I hide the page title and the lines just above and below it on selected pages?

Thanks Mark

[Mark]

Mark

#22214

Ben,

How can I hide the page title and the lines just above and below it on selected pages?

Thanks Mark

[Ben Ritner]

Ben Ritner

#22028

You can add this:

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

Ben

[Ben Ritner]

Ben Ritner

#21947

If you add this css:

.infobanner {
margin: 0;
}

Ben

[Ben Ritner]

Ben Ritner

#21917

Hey, The image menus are designed for a background image and text, the background style is cover so it fills the space (it’s not supposed to follow the size of the image but the size of the area because of text). See here: http://themes.kadencethemes.com/virtue-premium-3/
You can change to contain but the will just leave areas that are not filled with the image. You might be better off just add the images as images in the page.

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

The portfolio should still have three images for the ipad not two at that size, I’ll look into it.
Ben

[Ben Ritner]

Ben Ritner

#21809

1. Yes – it just can’t be your “shop” page in the woocommerce settings.

2. With this css:

.infobanner {
margin: 25px 0;
}

3. with this css:

#containerfooter .menu {
margin: 0;
}

Ben

[Ben Ritner]

Ben Ritner

#21808

Hey,
The call to check out a sticky header happens at the load of the page. You could add this js to force a recheck when the screen resizes, it would go into a text footer widget on your site:

<script type="text/javascript">jQuery(document).ready(function ($) {
	        var stickyheader = $('body').attr('data-sticky'),
		shrinkheader = $('#kad-banner').attr('data-header-shrink'),
		mobilestickyheader = $('#kad-banner').attr('data-mobile-sticky'),
		win = $(window),
		header = $('.stickyheader #kad-banner'),
		headershrink = $('.stickyheader #kad-banner #kad-shrinkheader'),
		logo = $('.stickyheader #kad-banner #logo a, .stickyheader #kad-banner #logo a #thelogo'),
		logobox = $('.stickyheader #kad-banner #logo a img'),
		menu = $('.stickyheader #kad-banner #nav-main ul.sf-menu > li > a'),
		content = $('.stickyheader .wrap'),
		mobilebox = $('.stickyheader .mobile-stickyheader .mobile_menu_collapse'),
		headerouter = $('.stickyheader .sticky-wrapper'),
		shrinkheader_height = $('#kad-banner').attr('data-header-base-height'),
		topOffest = $('body').hasClass('admin-bar') ? 32 : 0;
                function kad_sticky_header() {
		var header_height = $(header).height(),
		topbar_height = $('.stickyheader #kad-banner #topbar').height();
		set_height = function() {
				var scrollt = win.scrollTop(),
                newH = 0;
                if(scrollt < shrinkheader_height/1) {
                    newH = shrinkheader_height - scrollt/2;
                    header.removeClass('header-scrolled');
                }else{
                    newH = shrinkheader_height/2;
                    header.addClass('header-scrolled');
                }
                menu.css({'height': newH + 'px', 'lineHeight': newH + 'px'});
                headershrink.css({'height': newH + 'px', 'lineHeight': newH + 'px'});
                header.css({'height': newH + topbar_height + 'px'});
                logo.css({'height': newH + 'px', 'lineHeight': newH + 'px'});
                logobox.css({'maxHeight': newH + 'px'});
            };
		if (shrinkheader == 1 && stickyheader == 1 && $(window).width() > 992 ) {
	        header.css({'top': topOffest + 'px'});
			header.sticky({topSpacing:topOffest});
			win.scroll(set_height);
		} else if( stickyheader == 1 && $(window).width() > 992) {
			header.css({'height': header_height + 'px'});
			header.css({'top': topOffest + 'px'});
			header.sticky({topSpacing:topOffest});
		} else if (shrinkheader == 1 && stickyheader == 1 && mobilestickyheader == 1 && $(window).width() < 992 ) {
			header.css({'height': 'auto'});
			header.sticky({topSpacing:topOffest});
			var win_height = $(window).height();
			var mobileh_height = shrinkheader_height/2;
			mobilebox.css({'maxHeight': win_height - mobileh_height + 'px'});
		} else {
			header.css({'position':'static'});
			content.css({'padding-top': '15px'});
			header.css({'height': 'auto'});
		}
	}
$(window).on("debouncedresize", function( event ) {kad_sticky_header();});
});
</script>

Ben

[Ben Ritner]

Ben Ritner

#21603

You can use this css:

.home header#kad-banner {
position: static !important;
}

Ben

[Ben Ritner]

Ben Ritner

#21599

Hey,
no, sorry.

Whatever page you want your site url to land on that has to be your home page. So in the settings > reading. Make whatever page you want the slider on as your front page.

Then add the fullscreen slider in the theme options > home page.. make sure to select the option to have your slider appear above the header.

Then add this css:

.home .banner, .home #containerfooter, .home .page-header, .home .contentclass {
display:none;
}

Ben

[Robert]

Robert

#21592

Thanks Ben, Still new at using WP so please bare with me.
The steps to follow include.

•I create a new page in Pages
•Tittle it “welcome”
•Set it to full width
•Select No Parent
•Add a Cyclone Slider with the image I’m using for the page
•Save page

•Than go to Theme Options > Advance settings > and paste this css
.welcome:
.no-header-test header.banner, .no-header-test #containerfooter, .no-header-test .page-header, .no-header-test .contentclass {
display:none;
}

Than go to my current home page, which is titled “home” on the pages menu and rename it to be a “Shop” page. So the link will reflect client-modern-mobler/robertgarcia.co/shop

Please advise

[Ben Ritner]

Ben Ritner

#21579

You would have to use css to hide the header and content and footer.

The name of the page becomes a class that you then use to target one page, if it’s the home page you can use .home :

.no-header-test header.banner, .no-header-test #containerfooter, .no-header-test .page-header, .no-header-test .contentclass {
display:none;
}

Here is the result. http://themes.kadencethemes.com/virtue-premium-3/no-header-test/

Ben