Search Results for 'banner'

[Ben Ritner]

Ben Ritner

#139121

#kad-banner {
    border-bottom: 1px solid #f2f2f2;
}

Ben

[Ben Ritner]

Ben Ritner

#139114

add this css:

.home-message h4 {
    top: auto;
    bottom:100%;
    margin: 0;
    width: 100%;
    text-align: center;
    left: 0;
    background: #f2f2f2;
}
.infobanner{
    margin-top: 38px;
    padding-top:0;
}

Ben

[Kevin]

Kevin

#139047

Here is some CSS that will allow you to control this:

.infobanner .home-message {
    background: rgba(0, 0, 255, 0.32);
}
.infobanner .home-message:hover {
    background: rgba(255, 0, 107, 0.32);
}

Place that into Theme Options> Custom CSS and feel free to change the colors to whatever you desire.

-kevin

[Ben Ritner]

Ben Ritner

#138612

Odd I”m not seeing a logo on the site you linked to.

You could do this, it wouldn’t be very smooth (the image would have to switch right on scroll) but it’s possible.

One option is to add your
“shrunk” logo version to the “retina” logo option and just upload your retina size logo in the standard logo option.

Then add css like this:

body #kad-banner #logo .kad-retina-logo {
    display:none;
}
body #kad-banner #logo .kad-standard-logo {
    display:block;
}
body .is-sticky #kad-banner #logo .kad-retina-logo {
    display:block;
}
body .is-sticky #kad-banner #logo .kad-standard-logo {
    display:none;
}

Ben

[Hannah]

Hannah

#137951

Hey Rebecca,
In Theme Options > Advanced Styling make sure you have set the menu background to transparent. Then add this to your custom css:

.kad-header-style-basic .kad-primary-nav ul.sf-menu>li>a {
    padding: 0 10px;
}

That should move your menu items to one line.
Then this will adjust the background color of the header:

.headerclass, .stickyheader.trans-header #kad-banner {
    background: rgba(0,0,0,.5);
}

Hope it helps!

Hannah

[Ben Ritner]

Ben Ritner

#137734

You have shrink turned on so by default the mobile is going to be the “shrunk” size. Since it’s mobile and you always want to take less space in the header for mobile navigation.

You can however add css like this:

@media (max-width: 991px){
.stickyheader #kad-banner #logo a, .stickyheader #kad-banner #logo a #thelogo, .stickyheader #kad-banner #kad-shrinkheader {
    height: 100px !important;
    line-height: 100px !important;
}
.stickyheader #kad-banner #logo a img {
    max-height: 100px !important;
}
}

Ben

[Sylvie]

Sylvie

#137649

Hi, I am having trouble with the items listed in the title. None are showing up. Not sure what I am doing wrong.
Thanks for helping.
Sylvie

[Sylvie]

Sylvie

#137649

Hi, I am having trouble with the items listed in the title. None are showing up. Not sure what I am doing wrong.
Thanks for helping.
Sylvie

[Markus]

Markus

#137420

Hi Kadence team!

I need some assistance with the header layout on my website: http://www.aikido-zentrum-offenbach.de

I use the basic header with shrink for sticky, which works fine for desktop screens. However, since my logo is pretty wide (because of the rasterized text) it has some overlap issues with the mobile menu smaller screens (portrait mode).

So here my questions:

1. I use the following CSS to have the sticky transparent.

`header#kad-banner {
opacity: .9;}`

This made the menu disappear behind my sliders, so I use the following as a workaround (found on the forum):

`#kad-shrinkheader, #kad-banner-sticky-wrapper {
z-index: 10000;
position: relative; }`

Is this still recommended?

2. A more severe issue is that on screen widths of smaller than 991px the design switches to a mobile menu (right?) but tries to put it on the same row as the logo. his happens for sreen widths of 767-991 px. Unfortunately it the menu and the logo overlap partially with the logo placed in front of the menu?For smaller screens it puts the menu below the logo and it is working again.

3. A related issue happens on my Samsung Tablet (Galaxy SM-P600) in portrait mode where I see the mobile menu but cant click on it. (Maybe it is hidden behind the slider, but I can’t tell.)

3. I would like to have the logo wider on the desktop screen (before shrinking). I tried to force it to a width, but that broke the responsiveness :). Any more elegant way to do this? I would also prefer to have the shrinked version a little larger.

4. I tried to get the mobile menu sticky as well, but this broke the menu function (maybe because of the transparency?). How would I do this?

And by the way: AMAZING Theme! Good work!

Cheers,

Markus

[Markus]

Markus

#137420

Hi Kadence team!

I need some assistance with the header layout on my website: http://www.aikido-zentrum-offenbach.de

I use the basic header with shrink for sticky, which works fine for desktop screens. However, since my logo is pretty wide (because of the rasterized text) it has some overlap issues with the mobile menu smaller screens (portrait mode).

So here my questions:

1. I use the following CSS to have the sticky transparent.

`header#kad-banner {
opacity: .9;}`

This made the menu disappear behind my sliders, so I use the following as a workaround (found on the forum):

`#kad-shrinkheader, #kad-banner-sticky-wrapper {
z-index: 10000;
position: relative; }`

Is this still recommended?

2. A more severe issue is that on screen widths of smaller than 991px the design switches to a mobile menu (right?) but tries to put it on the same row as the logo. his happens for sreen widths of 767-991 px. Unfortunately it the menu and the logo overlap partially with the logo placed in front of the menu?For smaller screens it puts the menu below the logo and it is working again.

3. A related issue happens on my Samsung Tablet (Galaxy SM-P600) in portrait mode where I see the mobile menu but cant click on it. (Maybe it is hidden behind the slider, but I can’t tell.)

3. I would like to have the logo wider on the desktop screen (before shrinking). I tried to force it to a width, but that broke the responsiveness :). Any more elegant way to do this? I would also prefer to have the shrinked version a little larger.

4. I tried to get the mobile menu sticky as well, but this broke the menu function (maybe because of the transparency?). How would I do this?

And by the way: AMAZING Theme! Good work!

Cheers,

Markus

[Hannah]

Hannah

#137299

Hey,
Try adding this to your custom css:

#kad-mobile-banner {
    display: block !important;
}

Hope it helps!

Hannah

[Ben Ritner]

Ben Ritner

#136851

Try this css, let me know if thats what you are going for:

@media (max-width: 768px) {
.stickyheader.trans-header #kad-banner {
    position: static;
    background:rgba(163, 158, 153, 1);
}
.trans-header #kad-banner-sticky-wrapper {
    height: 120px !important;
}
}

Ben

[Abdul Kadir]

Abdul Kadir

#136785

Hi,

I have added detailed product description with some styling into the product pages. How due to some issue the related product carousal is not getting displayed. The code is there but its getting hidden. This happens only in desktop view, when making the window smaller the related products show. You can view a sample product page here

I figure it might be some error in the CSS but i am not able to figure out the conflict. Below is the complete list of the advanced styling done:

/* Header */

div.product .product_image {
border:0;
}
.page-header {
border-top: 0;
}
.revslider_home_hidetop {
margin-top: 0px;
}
.contentclass {
padding-top: 0px;
}
.topbarmenu ul li a {font-size:11px; padding: 4px 10px;}
.topbar-widget .virtue_social_widget a {
display: block;
float: left;
width: auto;
font-size: 11px;
text-align: center;
line-height: 10px;
padding: 4px 10px;
background: transparent;
margin-left: 0;
margin-bottom: 0;
color: #fff;
}
.topbar-widget .virtue_social_widget a i {
font-size:11px;
}
.widget_product_search {
margin-bottom: 20px;
}
.woocommerce widget_onsale {
margin-top:10px;
}
.woocommerce .products .star-rating {
margin: 3px auto 3px;
}
.boxi1 {
margin-bottom: 20px;
text-align: center;
padding: 15px 0 1px;
background: #f2f2f2;
}
.boxi1 div {
font-size: 28px;
}
.topbarmenu ul li a {
line-height:20px;
}
.sliderclass.clearfix.ktslider_home_hidetop {
margin-top: 0;
}
#kad-mobile-banner-sticky-wrapper {
height: 60px !important;
}
.topbar-widgetcontent {
display: inherit;
margin: 0;
}

.col-md-6.col-sm-6.kad-topbar-right {
width: 100%;
text-align: center;
}

.topbar-widgettitle.topbar-widgettitle-wrap {
font-family: sans-serif;
font-size: 15px;
line-height: 35px;
font-weight: 600;
}

@media (max-width: 749px) {

.product_detailed_desc {

background: #fff;
width: 100%;

}

}

.tabwrapper {
float: left;

width: 100%;
}

.tabwrapper h6 {

font-size:14px;
font-weight: bold;
display: inline-block;
float: left;
width: 28%;

}

.tabwrapper p {
font-size: 14px;

display: block;
float: right;
width: 68%;

text-align: justify;

}

.tabwrapper ul {

font-size: 15px;
list-style: disc;
display: block;
float: right;

width: 68%;
list-style-position: outside;

}

.greyline {
background:#edeff0;
float:left;
width:100%;
display:block;
height:1px;
margin-bottom:15px;
margin-top:15px;
visibility:visible;

}

.tabwrapper li {

width: 100%;
padding-bottom: 15px;

}

.tabwrapper img {
display: block;
width:68%;
float: right !important;
max-height:350px;
height: auto;
margin-right: 0;
margin-bottom: 5px;

}

.tabwrapper .tablewrapper {

font-size: 14px;
float: right;
display: block;
width:68%;

margin-bottom: 5px;
border: 0;

}

.tabwrapper table {

display: inline-block;
margin-right: 0;
margin-left: 0;

}

.tablewrapper td {

text-align: left;
}

.tablewrapper td img {
float: left !important;
}

.tablewrapper img {

max-width: 50px;
max-height: 50px;
}

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

.collection .product .image
{
min-height:164px !important;
}
.tabwrapper {
float: left;

width: 100%;
}

.tabwrapper h6 {
font-size: 15px;
font-weight: bold;
display: inline-block;

margin-bottom: 10px;
float: left;
width: 100%;

}

.tabwrapper p {
font-size: 14px;

margin-bottom: 15px;
display: block;
width: 100%;
margin-right: 0;
float: left;
}
}

.widget_tag_cloud .tagcloud a {
color: #000;
display: inline-block;
font-size: 14px !important;
margin: 0 5px 5px 0;
padding: 2px 5px;
text-decoration: none;
border-style: solid;
border-width: 1px;
}

.widget_tag_cloud .tagcloud a:hover {
background-color: #FFFFFF;

}

Thank You

Abdul Kadir

[Abdul Kadir]

Abdul Kadir

#136785

Hi,

I have added detailed product description with some styling into the product pages. How due to some issue the related product carousal is not getting displayed. The code is there but its getting hidden. This happens only in desktop view, when making the window smaller the related products show. You can view a sample product page here

I figure it might be some error in the CSS but i am not able to figure out the conflict. Below is the complete list of the advanced styling done:

/* Header */

div.product .product_image {
border:0;
}
.page-header {
border-top: 0;
}
.revslider_home_hidetop {
margin-top: 0px;
}
.contentclass {
padding-top: 0px;
}
.topbarmenu ul li a {font-size:11px; padding: 4px 10px;}
.topbar-widget .virtue_social_widget a {
display: block;
float: left;
width: auto;
font-size: 11px;
text-align: center;
line-height: 10px;
padding: 4px 10px;
background: transparent;
margin-left: 0;
margin-bottom: 0;
color: #fff;
}
.topbar-widget .virtue_social_widget a i {
font-size:11px;
}
.widget_product_search {
margin-bottom: 20px;
}
.woocommerce widget_onsale {
margin-top:10px;
}
.woocommerce .products .star-rating {
margin: 3px auto 3px;
}
.boxi1 {
margin-bottom: 20px;
text-align: center;
padding: 15px 0 1px;
background: #f2f2f2;
}
.boxi1 div {
font-size: 28px;
}
.topbarmenu ul li a {
line-height:20px;
}
.sliderclass.clearfix.ktslider_home_hidetop {
margin-top: 0;
}
#kad-mobile-banner-sticky-wrapper {
height: 60px !important;
}
.topbar-widgetcontent {
display: inherit;
margin: 0;
}

.col-md-6.col-sm-6.kad-topbar-right {
width: 100%;
text-align: center;
}

.topbar-widgettitle.topbar-widgettitle-wrap {
font-family: sans-serif;
font-size: 15px;
line-height: 35px;
font-weight: 600;
}

@media (max-width: 749px) {

.product_detailed_desc {

background: #fff;
width: 100%;

}

}

.tabwrapper {
float: left;

width: 100%;
}

.tabwrapper h6 {

font-size:14px;
font-weight: bold;
display: inline-block;
float: left;
width: 28%;

}

.tabwrapper p {
font-size: 14px;

display: block;
float: right;
width: 68%;

text-align: justify;

}

.tabwrapper ul {

font-size: 15px;
list-style: disc;
display: block;
float: right;

width: 68%;
list-style-position: outside;

}

.greyline {
background:#edeff0;
float:left;
width:100%;
display:block;
height:1px;
margin-bottom:15px;
margin-top:15px;
visibility:visible;

}

.tabwrapper li {

width: 100%;
padding-bottom: 15px;

}

.tabwrapper img {
display: block;
width:68%;
float: right !important;
max-height:350px;
height: auto;
margin-right: 0;
margin-bottom: 5px;

}

.tabwrapper .tablewrapper {

font-size: 14px;
float: right;
display: block;
width:68%;

margin-bottom: 5px;
border: 0;

}

.tabwrapper table {

display: inline-block;
margin-right: 0;
margin-left: 0;

}

.tablewrapper td {

text-align: left;
}

.tablewrapper td img {
float: left !important;
}

.tablewrapper img {

max-width: 50px;
max-height: 50px;
}

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

.collection .product .image
{
min-height:164px !important;
}
.tabwrapper {
float: left;

width: 100%;
}

.tabwrapper h6 {
font-size: 15px;
font-weight: bold;
display: inline-block;

margin-bottom: 10px;
float: left;
width: 100%;

}

.tabwrapper p {
font-size: 14px;

margin-bottom: 15px;
display: block;
width: 100%;
margin-right: 0;
float: left;
}
}

.widget_tag_cloud .tagcloud a {
color: #000;
display: inline-block;
font-size: 14px !important;
margin: 0 5px 5px 0;
padding: 2px 5px;
text-decoration: none;
border-style: solid;
border-width: 1px;
}

.widget_tag_cloud .tagcloud a:hover {
background-color: #FFFFFF;

}

Thank You

Abdul Kadir

[Todd]

Todd

#136744

THANK YOU SO MUCH – most of this CSS helped – but now on smartphone sizes the menu goes white. DO I have conflicting CSS?

This is all the CSS I have in Advanced Settings:

.headerclass {
background: rgba(21, 17, 10, 0.8) !important;
position:absolute;
width: 100%
}
a:hover {
text-decoration: underline;
}
#calltoaction a:link {
text-decoration: underline;
}
.virtue_image_widget_caption {
font-size: 16px;
margin-top: 5px;
color: #004677;
}
#kad-banner-sticky-wrapper {
height:0 !important;
}

@media (max-width: 991px) {
#mobile-nav-trigger {
display: inline-block;
width: 100%;
}
}
.contentclass {
background: #fff;
padding-bottom: 30px;
padding-top: 0px;
}
.lg-kad-btn {
padding: 0px 22px;
font-size: 16px;
}
.sm-kad-btn {
padding: 8px 16px;
font-size: 12px;
margin-top: 6px;
}

@media (max-width: 750px) {
.panel-row-style-highlandintrorow{
padding: 10px !important;
}
}

@media (max-width: 750px) {
.panel-row-style-videorow{
padding: 10px !important;
}
}
hr {
margin-top: 20px;
margin-bottom: 0px;
border: 0;
border-top: 1px dotted #999;
}
{
.img .panel-row-style-videorow {
max-width: 220px !important;
}
}
.textwidget .contact-form input[type=text], .textwidget .contact-form input[type=email], .textwidget .contact-form textarea {
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
.page-header {
padding-top: 110px;
}

@media (max-width: 750px) {
.page-header {
padding: 10px !important;
}
}

@media (max-width: 992px) {
.contentclass {
padding-top: 0 !important;
}
}
h1, h2, h3 {
color: #004677;
}

[Ben Ritner]

Ben Ritner

#136179

Ok, you can add this css, I added for you.

.sf-menu>.kt-lgmenu>ul, .sf-menu>li.kt-lgmenu.sfHover>ul, .sf-menu>li.kt-lgmenu:hover>ul {
    width: 100%;
    right: 0;
    margin: 0;
    top: 60%;
}
.kad-header-right, #nav-main {
    position: static;
}
#kad-banner {
    position: relative;
}

Ben

[Michael]

Michael

#133478

Hi,

I have 2 problems with mobile view of my site: http://www.grospiritually.com.

1) the nav menus don’t show up

2) my banner image doesn’t adjust; it just shows a small section of it

The content box with text adjusts correctly. Can you help?

Thanks,
Mike

[Michael]

Michael

#133478

Hi,

I have 2 problems with mobile view of my site: http://www.grospiritually.com.

1) the nav menus don’t show up

2) my banner image doesn’t adjust; it just shows a small section of it

The content box with text adjusts correctly. Can you help?

Thanks,
Mike

[Ben Ritner]

Ben Ritner

#133378

Hmm,

If you can send me a login I can test. Here is a css guess:

.stickyheader #kad-banner {
    transform: none !important;
}

Ben

[Pamela]

Pamela

#132856

Hi Ben & Co,
This time I’ve tried to make a header that is less than 200px high on this page: *Login to see link

/* HEADER BACKGROUND*/
#kad-banner > .container {
height: 200px;
}

But if I change the container height to 100px then height of the secondary menu increase instead. I would like to have a really small header and a secondary menu with the same height as it is at the moment *Login to see link

Where can I modify the search page, I would like to have it Fullwidth and without right menu.

Hopefully you can help me.

Regards,

Pamela

[Pamela]

Pamela

#132856

Hi Ben & Co,
This time I’ve tried to make a header that is less than 200px high on this page: *Login to see link

/* HEADER BACKGROUND*/
#kad-banner > .container {
height: 200px;
}

But if I change the container height to 100px then height of the secondary menu increase instead. I would like to have a really small header and a secondary menu with the same height as it is at the moment *Login to see link

Where can I modify the search page, I would like to have it Fullwidth and without right menu.

Hopefully you can help me.

Regards,

Pamela

[Ben Ritner]

Ben Ritner

#132748

Apparently it counts as a new activation every time I change themes?

It should stay saved if you were to change themes and then come back. What steps are you doing can you explain more. Why are you changing themes at all?

Add this last css:

@media (max-width: 768px){
    .is-sticky #kad-mobile-banner {
    right: 5px;
    left: 5px;
    width: auto;
}
}

Ben

[Ann]

Ann

#132669

Hi Hannah and Ben,

I thought I activated my API key. There is a green check by it in my wordpress dashboard, and my account on your site shows it activated 7 times? Apparently it counts as a new activation every time I change themes? If I need to do something else, please let me know what.

Below is the css I am using. The last two pieces at the end are what Ben gave me, which fixes the problem when I am at the top of the page, but as soon as I scroll down, the right side of the banner still goes out to the edge of the browser window. Left side stays lined up with the container. I would prefer that both ends of the banner stay lined up with the container. It would also be ok if either a) both sides of the banner go out to the edge of the browser window; or b) container and header go full width (ie, 100% of browser window) on mobile and laptop screens.

Thanks for your help!
Ann

header#kad-banner.banner.headerclass.kt-not-mobile-sticky.kt-mainnavsticky {
border-top-width: 5px;
border-bottom-width: 0px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #1a4066;
border-bottom-color: #1a4066;
}
div#pageheader.titleclass {
background: #f6dfb6;
}
#nav-main .sf-menu>li:first-child:before {
width: 150px;
height: 100%;
left: -200px;
}
#content.container {
/* max-width: 100%;
padding: 0 2%;
background-color: blanchedalmond;*/
margin-top: 15px;
}
aside {
background-color: #f6dfb6;
}
.page-header {
padding: 5px 0;
margin-bottom: 0;
text-align: left;
margin-left: 5px;
}
#kad-mobile-banner-sticky-wrapper {
margin: 0 -15px;
}
#kad-mobile-banner {
margin: 0;
}

[Ben Ritner]

Ben Ritner

#132628

Hey,

Add this css:

#kad-mobile-banner-sticky-wrapper {
    margin: 0 -15px;
}
#kad-mobile-banner {
    margin: 0;
}

Ben

[Fredrik]

Fredrik

#132591

#kad-banner{
transform:none !important;
}

The case is solved.

Fredrik