Search Results for 'banner'

[Ben Ritner]

Ben Ritner

#37824

Your using a plugin that is overriding the woocommerce default, it’s adding a really high z-index.

You can add this css in your theme options > advanced settings to fix.

.stickyheader .is-sticky #kad-banner {
  z-index: 10000;
}

Ben

[Ben Ritner]

Ben Ritner

#37636

1. you would just need to adjust this css to match the height of your woocommerce notice:

.woocommerce-demo-store #kad-banner {
    margin-top:32px
}

2. Add this:

.contentclass {
  padding-top: 0px !important;
}

Ben

[Ben Ritner]

Ben Ritner

#37550

So you want the header to just be visible at the bottom of the page?

In the revolution slider options, when you choose a full screen slider there is an option for offset Containers:. Add #kad-banner into that box.

Ben

[Ben Ritner]

Ben Ritner

#37489

Change it out for this:

.widget_virtue_imgmenu_widget {
max-width: 300px;
margin: 0 auto;
}

@media (max-width: 780px) {
#pg-357-1 .panel-grid-cell {
width: 50% !important;
float:left !important;
padding: 0 15px !important;
}
}

@media (max-width: 480px) {
#pg-357-1 .panel-grid-cell {
width: 100% !important;
float:none !important;
padding: 0 !important;
}
}

.infobanner {
margin-bottom:-15px;
}

Ben

[Davide]

Davide

#37485

sorry Ben but i have write this code:

.widget_virtue_imgmenu_widget {
max-width: 300px;
margin: 0 auto;
}

@media (max-width: 780px) {
#pg-357-1 .panel-grid-cell {
width: 50%;
float:left;
padding: 0 15px;
}
}

@media (max-width: 480px) {
#pg-357-1 .panel-grid-cell {
width: 100%;
float:none;
padding: 0;
}
}

.infobanner {
margin-bottom:-15px;
}
}

but it doesn’t work, what’s wrong? I’am new in the css… 🙂

davide

[Ben Ritner]

Ben Ritner

#37443

I think your missing the purpose of the image menu. They are supposed to be a background image, they are not supposed to have content that you must see. That is supposed to be the text.

Either way. If you add this css it will look a little better on your ipad.

.widget_virtue_imgmenu_widget {
    max-width: 300px;
    margin: 0 auto;
}
@media (max-width: 780px){
#pgc-357-1-0, #pgc-357-1-1, #pgc-357-1-2 {
  margin-bottom: 0px;
}
.infobanner {
  margin-bottom:0;
}
}

Ben

[Ben Ritner]

Ben Ritner

#37438

You can post an image link here.

I’m saying this css is your issue:

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

It’s causing the image menu to not work like it’s designed for so then you have the look that you have.

Ben

[Ben Ritner]

Ben Ritner

#37432

1. I’m confused. The image menu is designed to work with a background image and text over. The background image is supposed to “cover” the div with a set height and responsive width… you have added this css:

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

Making it so the background image doesn’t cover.

I’m confused at what your going for?

2. I’m not sure I understand the question but your css above ^ will not allow for consistent sizing because it’s not a cover image.

3. ^ Same

Ben

[Ben Ritner]

Ben Ritner

#36914

1. You can add this css:

@media (max-width: 767px) {
    #kad-shrinkheader, .kad-header-style-basic #logo a.brand, .kad-header-style-basic #logo #thelogo {
        height: 100px !important;
        line-height: 100px !important;
}
.kad-header-style-basic #nav-main ul.sf-menu > li > a, .kad-header-style-basic #kad-shrinkheader #mobile-nav-trigger a {
    line-height:100px !important;
}
#kad-banner #logo .kad-lg {
    max-height: 100px !important;
}
}

2. You can add this css:

.hometitle:after, .sectiontitle:after, .widget-title:after {
  display: none;
}

Ben

[Corrinda]

Corrinda

#36875

Darn, it didn’t work. I opened the IE inspector and the element that’s changing is

<div class=”sticky-wrapper” is=”kadence-banner-sticky-wrapper” . . .

is changing to

<div class=”sticky-wrapper is-sticky” is=”kadence-banner-sticky-wrapper” . . .

but not sure of next steps.

[Ben Ritner]

Ben Ritner

#36655

2. You can add this css just change the color to your primary color:

#kad-banner #topbar .topbarsociallinks li a:hover {
  background: #f3690e;
}

Ben

[Ben Ritner]

Ben Ritner

#36654

You can use css and hide it for that custom template.

like this:

.page-template-page-custom .banner.headerclass, .page-template-page-custom .footerclass {
    display: none;
}

Or you can look at the built in landing page template along with the “base page landing” template for that. The base template holds the wrapper and there you can leave out the header and footer and still add in your wp_footer call.

Ben

[Ben Ritner]

Ben Ritner

#36335

OK so your header file has obviously been changed. Your overriding the theme header and using a style that isn’t part of the theme options. That’s fine to do but certainly explains why you would be having issues with things not working right. And it’s a little past support for us to fix issues with your code. But I’ll give it a shot but before I do your not using a child theme and I can’t think of one good reason for it. Maybe you have one but it seems crazy to me that your not using a child theme for theses edits.

Your issue with not responsive, lets first clarify that it is responsive to the screen size at which you load the site. And in most every browsing people don’t change there desktop screen size to mobile for the fun of it. But here is some css:

 #kad-banner-sticky-wrapper {
        height: 122px !important;
    }
@media (min-width: 992px){
    #kad-banner-sticky-wrapper {
        height: 286px !important;
    }
}

Now for the anchor tags, you can add this js in a text widget in your footer:

<script type="text/javascript">jQuery(document).ready(function ($) {$('.kad-primary-nav').localScroll({offset: -252});});</script>

Ben

[Althea]

Althea

#36328

Lastly, since the theme is designed to be responsive to screen sizes, is it possible to have the menu, body and logo fixed to 1070px width? (width of the banner)

[Hannah]

Hannah

#36270

Are you using pagebuilder? The written part of this tutorial gives instructions on creating a call to action banner- https://www.kadencewp.com/using-page-builder-virtue-premium/
Hope that helps you!

Hannah

[Karisma]

Karisma

#36242

Hi,
I have added captions on the banner slider homepage: *Login to see link

When I view it on my mobile the height of the caption box is overlapping the menu so I cant select the menu. Not sure how to sort this problem out.

Would be grateful for some advice.

Karisma

[Karisma]

Karisma

#36242

Hi,
I have added captions on the banner slider homepage: *Login to see link

When I view it on my mobile the height of the caption box is overlapping the menu so I cant select the menu. Not sure how to sort this problem out.

Would be grateful for some advice.

Karisma

[andrea.juelich]

andrea.juelich

#35906

Ah, I see…
I think I am going to simplify all my CSS and look through what is really necessary and what not. I guess styling changes like colors, fonts, display:none,
etc are not really problematic, are they? Do you think this code is problematic:

@media (min-width: 1200px) {
.container {
width: 992px;
}
.boxed #wrapper.container, .boxed.stickyheader .is-sticky #kad-banner {
    width:1170px
}
}

And one last thing: WHat header are you using in demo 4? If it was basic with shrink for sticky, it would shrink which it does not. But the standard header when sticky is much bigger than what is seen in demo 4!

[Ben Ritner]

Ben Ritner

#35801

The header style for shrink is what allows the mobile. But you can make the standard header sticky on mobile with custom code:

@media (max-width: 767px){
    header#kad-banner {
        position: fixed !important;
        top: 0px;
        z-index: 1000;
    }
.wide #wrapper.container {
    padding-top: 120px !important;
}
}

Ben

[Ben Ritner]

Ben Ritner

#35738

1. I can see your not actually testing on devices. And your also testing while logged in. Logout, see what happens to your margin on the top.

Are you wanting a sticky header or not on mobile lets start there?

You can overriding everything force the logo large with this css:

@media (max-width: 991px) and (min-width: 768px) {
body.stickyheader #kad-banner #logo a img {
    max-height: 105px !important;
    position: absolute;
    top: -5px;
}
}

It’s hard to recommend more hacks though, your css is so full of them already and without you hiring a developer to just code it the way you want correctly it’s making it likely for more issues in the future.

2. Just adjust the css I posted above. it you want them beside each other then you need to make the add to cart button smaller.

3. I don’t recommend it.. but:

@media (max-width: 991px) and (min-width: 768px) {
	#nav-main ul.sf-menu, .nav-main ul.sf-menu {
    	display: block;
    }
    .kad-header-right {
    	width: 80%;
    }
    .kad-header-left {
    	width: 20%;
    }
    #nav-second ul.sf-menu {
    	display: block;
    }
	#kad-mobile-nav {
	display: none;
	height: auto;
	}
	#mobile-nav-trigger {
	display: none;
	height: auto;
	}
}

[BG Anders]

BG Anders

#35716

Hi there,

about: madcook.de

1. Don’t need a top menu on this Project so i tried to hide the whole navigation bar with some CSS
Unfortunately also the Logo gets hidden. Can we bring only the logo back ?
2. get rid of the black margin on top of the homepage
3. is there a way to have some permanent sticky text on the left side of the screen, but with transparent background so the images scroll underneath ?
It would be great to make a whole visual editor widget on a row to stay sticky.

The custom so far:
h2 {
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
}

.home .headerclass {
border-color: transparent;
}

.home #kad-shrinkheader{
display:none;
}

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

Thank you

PS Provider is offering me to upgrade php on server, from 5.5 to 5.6 – do you recommend that ?

[BG Anders]

BG Anders

#35716

Hi there,

about: madcook.de

1. Don’t need a top menu on this Project so i tried to hide the whole navigation bar with some CSS
Unfortunately also the Logo gets hidden. Can we bring only the logo back ?
2. get rid of the black margin on top of the homepage
3. is there a way to have some permanent sticky text on the left side of the screen, but with transparent background so the images scroll underneath ?
It would be great to make a whole visual editor widget on a row to stay sticky.

The custom so far:
h2 {
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
}

.home .headerclass {
border-color: transparent;
}

.home #kad-shrinkheader{
display:none;
}

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

Thank you

PS Provider is offering me to upgrade php on server, from 5.5 to 5.6 – do you recommend that ?