Search Results for 'banner'

[Hannah]

Hannah

#233042

This css will remove the padding above the logo:

div#kad-mobile-banner-sticky-wrapper {
    padding: 0;
}

And this will adjust the size and color of the hamburger menu:

i.icon-menu {
    color: #eee;
    font-size: 25px;
}

Hope that helps!

Hannah

[Hannah]

Hannah

#233035

Try adding this to your custom css box in Theme Options > Advanced Settings:

@media (max-width: 992px) {
#kad-mobile-banner, #kad-mobile-banner-sticky-wrapper {
    padding: 30px 0;
}
}

If that doesn’t work please post a link:)

Hannah

[Jeremy]

Jeremy

#232589

Ben,

This is the css I used

#kad-banner-sticky-wrapper {
height:220px !important;
}

Jeremy

[Ben Ritner]

Ben Ritner

#232332

Also on product and category pages, what kind of notices are you thinking? What logic would you want or would this just be a banner?

Ben

[Ben Ritner]

Ben Ritner

#232085

You can make all pages transparent by updating your css to this but note that this is not how virtue is designed and there may be unseen side effects.

.stickyheader #kad-banner {
    position: absolute;
    width: 100%;
    background: transparent;
    transition:background .3s ease;
}
.admin-bar.stickyheader #kad-banner {
     position: absolute;
     top:32px;
}
.stickyheader .is-sticky #kad-banner { 
background:  rgba(0,51,204,0.9);
}
#kad-banner-sticky-wrapper {
    height: 0 !important;
}

[Hannah]

Hannah

#231830

Hi Lionel,
Try adding this to your custom css box in Theme Options > Custom CSS:

.col-md-4.col-sm-8.col-ss-10.clearfix.kad-header-left {
    width: 100%;
}
#kad-banner #logo .kad-standard-logo {
    margin: auto;
}
.col-md-8.col-sm-4.col-ss-2.kad-header-right {
    width: 100%;
    text-align: center;
}
.kad-primary-nav ul.sf-menu {
    float: none;
}
.sf-menu li {
    float: none;
    display: inline-block;
}

Hope that helps!

Hannah

[Ben Ritner]

Ben Ritner

#231354

Can you send me a login so I can see your settings, I’m not very familiar with that plugin.

One option that you can consider is adding the home widget area to enabled in your theme options > home layout. Then going to the appearance > widgets and adding a widget with banner to the home widget area.

Ben

[jen3126]

jen3126

#231314

This reply has been marked as private.

[jen3126]

jen3126

#231293

Hi! I’d like to add a banner beneath my header and above my post grid layout. The header would contain an image only. I’ve tried a couple of things but nothing shows up so there must be a conflict. Can you give me some direction? Thanks! smartypantsfinance.com

[jen3126]

jen3126

#231293

Hi! I’d like to add a banner beneath my header and above my post grid layout. The header would contain an image only. I’ve tried a couple of things but nothing shows up so there must be a conflict. Can you give me some direction? Thanks! smartypantsfinance.com

[Ben Ritner]

Ben Ritner

#231035

You have a plugin “custom banners” that is adding css that is overriding the header.

You either need to remove that plugin, have the authors make their css more specific to only affect their plugin or add this css:

#kad-banner {
    overflow: visible;
}

Ben

[JCCMW]

JCCMW

#230661

that left justified everything!

here’s the css I have now:

display: block;
}
#kad-mobile-banner {
display: none;
height: 0;
}
.topbarmenu.clearfix {
width: 100%;
}
.col-md-6.col-sm-6.kad-topbar-left {
width: 75%;
float: left;
}
virtue_social_widget.clearfix {
width: 50%;
float: left;
}
#topbar-search form {
margin-top: 8px;
}
}

[Hannah]

Hannah

#230660

Actually, you can just remove all this css:

a.mobile-logo {
padding: 0 !important;

.kt-header-position-above, .second-nav-container {
display: block;
}
#kad-mobile-banner {
display: none;
height: 0;
}
@media (min-width: 968px) {
.col-md-6.col-sm-6.kad-topbar-right {
width: 25%;
}
.topbarmenu ul li a {
font-size: 15px;
padding: 4px 10px;
}
.topbarmenu.clearfix {
width: 100%;
}
.col-md-6.col-sm-6.kad-topbar-left {
width: 75%;
float: left;
}
}

Then add the css I gave above. Let me know how that works.

Hannah

[Hannah]

Hannah

#230658

Looks like you have some broken css in your code that is conflicting with css added after it. Here:
a.mobile-logo {
padding: 0 !important;

.kt-header-position-above, .second-nav-container {
display: block;
}
#kad-mobile-banner {
display: none;
height: 0;
}

change that to this:

a.mobile-logo {
    padding: 0 !important;
}
.kt-header-position-above, .second-nav-container {
display: block;
}
#kad-mobile-banner {
display: none;
height: 0;
}

Hannah

[JCCMW]

JCCMW

#230648

Hi
I want to use the topbar menu, icons, and widget area in my topbar on jccmw.org.

I’ve copied css I found on an answer to the same question but my search box (widget) is still on a separate line to the other links. How can I get it on the same line? I’ve deleted some of my old css which helped format the topbar so maybe I need to delete some more?

css is

#nav-main ul.sf-menu ul li a {
font-size: 18px;
}
.home section#cat_nav {
margin-bottom: 20px;
}
#nav-second ul.sf-menu ul li a {
font-size: 15px;
}
tbody tr:nth-of-type(2n) {background-color: #f0f0f0;}
th {background-color:#018DB1;font-weight:bold;color:#fff;}
}
tcolumn-4 {
text-align: center;
}
img.alignnone {
padding: 0;
}
a.mobile-logo {
padding: 0 !important;
.kt-header-position-above, .second-nav-container {
display: block;
}
#kad-mobile-banner {
display: none;
height: 0;
}

@media (min-width: 968px) {
.col-md-6.col-sm-6.kad-topbar-right {
width: 25%;
}
.topbarmenu ul li a {
font-size: 15px;
padding: 4px 10px;
}
.topbarmenu.clearfix {
width: 100%;
}
.col-md-6.col-sm-6.kad-topbar-left {
width: 75%;
float: left;
}
}

[JCCMW]

JCCMW

#230648

Hi
I want to use the topbar menu, icons, and widget area in my topbar on jccmw.org.

I’ve copied css I found on an answer to the same question but my search box (widget) is still on a separate line to the other links. How can I get it on the same line? I’ve deleted some of my old css which helped format the topbar so maybe I need to delete some more?

css is

#nav-main ul.sf-menu ul li a {
font-size: 18px;
}
.home section#cat_nav {
margin-bottom: 20px;
}
#nav-second ul.sf-menu ul li a {
font-size: 15px;
}
tbody tr:nth-of-type(2n) {background-color: #f0f0f0;}
th {background-color:#018DB1;font-weight:bold;color:#fff;}
}
tcolumn-4 {
text-align: center;
}
img.alignnone {
padding: 0;
}
a.mobile-logo {
padding: 0 !important;
.kt-header-position-above, .second-nav-container {
display: block;
}
#kad-mobile-banner {
display: none;
height: 0;
}

@media (min-width: 968px) {
.col-md-6.col-sm-6.kad-topbar-right {
width: 25%;
}
.topbarmenu ul li a {
font-size: 15px;
padding: 4px 10px;
}
.topbarmenu.clearfix {
width: 100%;
}
.col-md-6.col-sm-6.kad-topbar-left {
width: 75%;
float: left;
}
}

[Hannah]

Hannah

#230556

Hi Cecilia,
If you’re just wanting your menu to be full width change your css to this:

#kad-banner .container {
    width: 100%;
}

Hope that helps!

Hannah

[Hannah]

Hannah

#230332

Hey Michelle,
Sounds like you just need to use media queries. Try this css:

@media (min-width: 992px) {
#kad-banner > .container {
    padding: 0;
}
}
@media (max-width: 992px) {
#kad-banner > .container .row {
    margin: 0;
}
}

Hope that helps!

Hannah

[Ben Ritner]

Ben Ritner

#230282

I couldn’t recreate the issue with the header, I did, however, figure out a hack to make the type load in the topbar.

I added this css into your custom css box:

#wrapper > #kad-banner .kt_typed_element {
    bottom: -25px;
    position: relative;
}

The issue has to do with content loading on “appearance” and the topbar less than 25px from the top of the screen causing the appear function to miss it.

Ben

[Ben Ritner]

Ben Ritner

#230231

For some reason you are adding this:

#kad-banner > .container {
    padding: 0;
}

And if you want to keep that you must then add this:

#kad-banner > .container .row {
    margin: 0;
}

Ben

[Francis]

Francis

#230166

This reply has been marked as private.

[Ben Ritner]

Ben Ritner

#229787

Hey,
No I wasn’t in your site.

Looks like you really need to update your PHP version.

I must make this as clear as possible, virtue does not support a transparent header option. If you want this and you want it to work well you should use the ascend theme.

All I am providing is a hack and it’s not a good option if you plan to use on some pages and not others.

Because your logo doesn’t make sense on a transparent header (it should be switched out while transparent) I can’t emphasize this enough that you should not be trying this with virtue.

Finally, you are using sticky header and the site you linked to is not, this again means you should be using ascend not virtue if you want sticky and transparent support.

Here is the css hack for your home page:

.home.stickyheader #kad-banner {
    position: absolute;
    width: 100%;
    background: transparent;
    transition:background .3s ease;
}
.home.stickyheader .is-sticky #kad-banner { background: rgba(255,255,255,0.8);}

.home #kad-banner-sticky-wrapper {
    height: 0 !important;
}

Ben