Search Results for 'banner'

[Ben Ritner]

Ben Ritner

#132525

#kad-banner is the anchor link. I don’t see how it would show on the page unless something else was broken. can you send a temp login.

Ben

[Leonard]

Leonard

#132482

When I hover over the scroll arrow at the bottom of the slider, this text shows up on the page. *Login to see link
Is there a way to have this not show up?
The site is new and in Maintenance mode, so I am not sure a site link would help. marriagefoundationbuilding.com

Thank you

[Leonard]

Leonard

#132482

When I hover over the scroll arrow at the bottom of the slider, this text shows up on the page. *Login to see link
Is there a way to have this not show up?
The site is new and in Maintenance mode, so I am not sure a site link would help. marriagefoundationbuilding.com

Thank you

[Karisma]

Karisma

#132382

Hi,

I am working on a website and I wanted a full width banner just like Site Style 1 *Login to see link Just above the footer there is a banner of the snowy mountains which is full width and says “Like what you see” At the moment I notice it moves when you scroll up but if it could be static but full width that would be great.

Thanks in advance!

Karisma

[Karisma]

Karisma

#132382

Hi,

I am working on a website and I wanted a full width banner just like Site Style 1 *Login to see link Just above the footer there is a banner of the snowy mountains which is full width and says “Like what you see” At the moment I notice it moves when you scroll up but if it could be static but full width that would be great.

Thanks in advance!

Karisma

[Carrie]

Carrie

#132047

Hi
I’ve been struggling with the header image consistency on this website:
*Login to see link

The home page banner is perfect. But when I use the same settings on inner pages, the image is huge. (It’s the background of the row) I think this is because I have text within the banner on the home page, which gives the banner height. I also added padding above and below in that home page header, but replicated that on inner pages and still nothing even close.

I’m using this page for testing; you’ll see I have 2 banners in there right now:

*Login to see link

Thank you for your help!
Carrie

[Carrie]

Carrie

#132047

Hi
I’ve been struggling with the header image consistency on this website:
*Login to see link

The home page banner is perfect. But when I use the same settings on inner pages, the image is huge. (It’s the background of the row) I think this is because I have text within the banner on the home page, which gives the banner height. I also added padding above and below in that home page header, but replicated that on inner pages and still nothing even close.

I’m using this page for testing; you’ll see I have 2 banners in there right now:

*Login to see link

Thank you for your help!
Carrie

[Kevin]

Kevin

#131913

Try this CSS, and if it doesn’t do what you’re after, could you kindly explain in a bit more detail what you’re after?

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

Thanks!,
Kevin

[Safa Bee]

Safa Bee

#131525

Hi there,

I am working on *Login to see link

There is a lot of white space between the top header / banner and the front page content. I am wondering how to decrease this space.

Thank you in advance for your help!

// Amber

[Safa Bee]

Safa Bee

#131525

Hi there,

I am working on *Login to see link

There is a lot of white space between the top header / banner and the front page content. I am wondering how to decrease this space.

Thank you in advance for your help!

// Amber

[Ben Ritner]

Ben Ritner

#130600

ok… thinking of a way you can do this. I have thought of two options. If you want the “banner” to be below your menu then use:
Step 1. Remove the virtue banner.

Step 2. Theme options > main settings scroll to the bottom where you see the “Add shortcode here for output just after the header.”

add this:

<div class="container custom_banner_area">
<div class="normal_banner"><img src="http://alicenrobinson.com/wp-content/uploads/2017/01/AliceRWebsite_ResponsiveBanner_HighResWeb.jpg" width="1800" height="477" alt=""></div>
<div class="mobile_banner"><img src="http://alicenrobinson.com/wp-content/uploads/2017/01/AliceRWebsite_ResponsiveBanner_HighResWeb.jpg" width="1800" height="477" alt=""></div>
</div>

NOTE THAT YOU NEED TO UPDATE THE URL FOR the MOBILE BANNER IMAGE.

Step 3. Go to theme options > advanced settings and add this css:

.mobile_banner {
display:none;
}
@media (max-width: 768px) {
.normal_banner {
display:none;
}
.container.custom_banner_area {
    padding: 0;
}
.mobile_banner {
display:block;
}
}

If you want the banner above your menu then post a temp login to your site. Make sure the “mobile” version of your banner is uploaded.

why does the menu disappear while shrinking the window from full width to mobile

The menu is replaced on mobile with a mobile dropdown menu for touch.

adding this css will make it stay below the logo area if that is the design you prefer.

.nav-trigger .nav-trigger-case {
    position: static;
    width: 100%;
}

in mobile, the topbar and banner don’t line up exactly with the other content but are slightly indented?

Notice how the menu and image align with your text. That is because the text is content and the background is the background. In the same way your logo and menu are content, not a background and thus they align with your content not with the background.

But using this css will remove that space and make your header content the width of your background

@media (max-width: 768px) {
.headerclass .container {
    padding: 0px;
}
}

I hope that helps,
Ben

[Cavendish]

Cavendish

#130543

Thanks for the reply. I’m eager to try that css ! But once I’ve hidden the banner for mobile, how do I cause an alternative graphic to be *displayed* only for mobile?

Also, do you have any answers re: 2 other minor glitches?

— why does the menu disappear while shrinking the window from full width to mobile

I’ve uploaded a screenshot so it’s clear what I’m saying. It seems the tablet menu is located above the top margin of the screen:

https://postimg.org/image/k9q0bb3jh/
— in mobile, the topbar and banner don’t line up exactly with the other content but are slightly indented?

again, a screenshot. I’d like the topbar and banner (or mobile replacement for banner as per above) to extend the whole width without the darker olive margin top left and right:
https://postimg.org/image/fgi27ktdb/

[Hannah]

Hannah

#130535

Hi Kevin,
1. There isn’t a built in option for this, sorry. If you would like I can provide css to hide the banner only in mobile.

2.

.nav-trigger .nav-trigger-case {
    position: static;
    width: 100%;
}

3.

@media (max-width: 768px) {
.headerclass .container {
    padding: 0 10px;
}
}

Hannah

[Cavendish]

Cavendish

#130497

Update: after much trial and error it seems sitewide banner might be the way to go, see current live site.

but is there a way to have a different graphic displayed for mobile, so that I can do a version with larger text overlayed?

other than that, just a couple of minor glitches: why does the menu disappear while shrinking the window from full width to mobile, and then in mobile the topbar and banner don’t line up exactly with the other content but are slightly indented?

thanks,
Kevin

[Cavendish]

Cavendish

#130401

oh dear seems NOT to be so great.

I just got integrated art from the designer that includes the text w/ the image. Now, without the text to ‘hold the space,’ that image becomes extremely narrow and small *at the largest screen sizes.* this is similar to what was happening at the beginning of this thread. I would expect a responsively scaled image to get proportionally *bigger* as the browser window gets bigger,

Once again, I am at a loss as to how the responsiveness and dimensions here are working.

Again, perhaps header background is not the right theme option to be using for this? Though I tried Logo and that also *shrank* in the wide screen view.

I simply want a web banner that will grow bigger as the screen grows bigger. I can do the text as a separate layer, or maybe have a mobile version with larger text so it’s legible when the overall banner is at its smallest. It seems such a basic functionality and I’m mystified as to why it’s required so many hours of work.

[Hannah]

Hannah

#130277

Hey James,
Try adding this css:

#nav-second ul.sf-menu>li {
    width: auto;
}
header#kad-banner {
    height: auto !important;
}
div#kad-banner-sticky-wrapper {
    background: #fff;
}
@media (max-width: 1200px) {
#nav-second ul.sf-menu > li {
    padding: 10px 10px;
}
}
@media (min-width: 1200px) {
#nav-second ul.sf-menu > li {
    padding: 10px 27px;
}
}

Does that work for you?

Hannah

[Kevin]

Kevin

#130115

Here is some CSS to make the header see through:

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

You can adjust the .9 lower and lower to make it more and more transparent if you wish.

Using that same property, you can do this with images. Which ones are you specifically wanting? the images at the top of your blog posts?

-Kevin

[Hannah]

Hannah

#130099

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

#kad-mobile-banner, #kad-mobile-banner-sticky-wrapper {
    display: block !important;
}
div#kad-banner-sticky-wrapper {
    display: none;
}

Does that work for you?

Hannah

[Hannah]

Hannah

#129847

Ok, remove the above css and just use this:

#kad-banner-sticky-wrapper {
    background: transparent;
    width: 100%;
    z-index: 1000;
    position: absolute;
}
.contentclass {
    padding-top: 0;
}

That should work throughout your site.

Hannah

[Carrie]

Carrie

#129810

I added margin-top: 150px; to the h2 style because I wanted to move the text down in the banner. That works great on the desktop, but for some reason it’s acting as leading on mobile. So I added a line-height style, but it isn’t working.

@media (max-width: 992px) {
h2 {
font-size: 24px !important;
line-height: 28px;
}
}

Thanks for your help!
Carrie

[Pamela]

Pamela

#129599

This reply has been marked as private.

[Pamela]

Pamela

#129587

Thanks, Kevin. This was helpful. I will try the container setting for the mobile device issue. Will also try the parallax setting to see how that works.

Thanks also for explaining the reasoning behind and purpose for the large banner image. I will relay that message to my client.

[Kevin]

Kevin

#129552

It looks like the image is now displaying well in the site header now. You can share the link to the image here, it is preferred over email communication since it is useful for both Ben and Hannah to see as well.

This is the image that I’m seeing display:
http://www.pamz-sandbox.igneousfeldsperling.com/wp-content/uploads/2017/01/1.22.17-Banner-V8-MLO.png

Does it display well on your end as well?

-Kevin

[Pamela]

Pamela

#129548

This reply has been marked as private.