Full width header image


#1

Hi there!

I was wondering if it is possible to get the header image to be actual full width in West Pro.

It seems to cut off on either side, with grey bars. Nothing I do seems to prevent that from happening. I could work around it but I would prefer an actual full width image.

It seems quite odd that a full width header doesn’t allow the photo to go full width. It would be nice if it could go parallax as well.

I tried using the idea of creating my own header in a block, but when you hide the header it leaves a gap at the top of the page that I haven’t been able to get rid of.

Fixing these problems would allow me to get full use out of West Pro. Sorry if I missed a setting somewhere, but I don’t think I did.

Any help would be greatly appreciated.

Thank you!


#2

Hi,

Could I see a link to your site please?

If the image isn’t full width then it means it’s not big enough for your screen. Please note that we’re showing an actual image, not a background image, so we cannot stretch it or make it parallax. We do this so that the image is fully responsive.
However, if parallax is really need it we could do that too with some custom CSS, though it will affect a bit how your image is displayed, meaning that it will be cut down left/right or top/bottom.


#3

Sure - two links…

The first one is the free West theme that I tested first before buying West Pro. It looks like it is full width, but in actual fact, when I couldn’t get it to go full, I made the background black, and made the image fade to black on the edges to make it look like it was full width.

I tried several image widths, including one that was 4584 x 1000 px, but the result was always cut off on both sides in both the free version and Pro - the media import always asks me to crop the image when I import one larger than 1920 in width - unfortunately 1920 px doesn’t appear to go full width - although it is true that I am viewing it on a 30" monitor at 2540 x 1600px so I might be seeing beyond what others might be able to…

http://inedmontonab.com/electricians/

The second is a site using West Pro - same problem. I thought that maybe the lack of actual full width in the free version was an option not available unless one purchased the Pro version. Doesn’t seem to be the case.

http://inedmontonab.com/thrive1/

I added the same header image to one of the West demo pages after I cleaned it up a little - I could see that the demo page was using a block instead of the header, but further noticed that there is that same gap at the top of the page when one turns off the header. It is just hidden by the menu in the case of that particular layout.

Adding the header to this page gets rid of the gap, but then the cropping happens.

So my problems are that the header area from the customizer import seems to crop the images when the width is beyond 1920px. The media importer will allow whatever width otherwise (I tested that) - the other problem is that there is a gap at the top of the page I would like to get rid of when I try to hide the header.

I like the integration of Live Composer with your theme. If I can get rid of the problems, it would be almost perfect. Having Parallax scrolling on the header would be icing on the cake - although I am kind of surprised that it wasn’t already an included feature.

Thank you for your reply. I look forward to any solutions you can come up with and very much appreciate it.


#4

Forgot to mention earlier - I would like to put in a request for a feature addition…

I was curious why there isn’t a setting to change the font color in the menu. or when the menu is in sticky mode. Was that an oversight?

It seems logical to assume that someone might want to do that, especially given there is a setting to change the background color of the menu itself, and if one wanted a dark menu in sticky mode, that they might want to change the color of the font to something other than black.

Could that be added to the color settings in the theme? In my opinion it is something that should already be there.

My overall thought is that the theme is pretty good - why not make it complete?


#5

Hey,

Let’s take this one step at a time.

  1. The feature request - I was just wondering 5 minutes ago when handling a different support request why I haven’t added that option. Will add it.
  2. As I explained in my previous post, a parallax header would result in a somewhat non-responsive image. We’ve had parallax headers on other themes - I can write a book on the support requests from people asking why the header image isn’t fully visible. That’s why it’s not a feature.
  3. The image size is indeed limited to 1920px. That’s because most monitors don’t go above that resolution. Last time I checked, above 1920px the usage was like 3-4%.
    For example I see the image full width on your website. Anyway, I can add a filter in the next version to allow changing the max. size.

Not sure what gap you’re referring to.


#6

Hey Vlad - thank you again for the reply!

I want to say that although my comments may seem negative at times, I really like the theme overall. I think you have done some good work here, and offering it under very reasonable pricing and licencing. I would just like it to be even better - hope you understand…I will answer in step form as well:

  1. When do you think that might be updated?

  2. I have managed to get a workaround regarding the gap I mentioned. If I install Siteorigin’s CSS editor, I can remove it by setting the header to absolute, which effectively makes it disappear, then I can add spacing to the title and buttons to bring them down and over the following block (which basically becomes the header at that point, so I have the advantages of being able to do parallax scrolling and actual full width with a regular block, while still having the advantage of using the title with buttons you have set up in your theme. Further notes on this below after point 3…

  3. I have yet to see on several themes I have used any limit on full width when offered - and as of January of this year, monitor resolutions beyond 1920 take up about a third of the stats ( http://www.w3schools.com/browsers/browsers_display.asp ), although there may be skewed stats revolving around higher use of mobile devices that may have come into play I suspect.

Regardless, the stats you mentioned were active somewhere around 4 or 5 years ago. Also, the rise of 4K monitor resolution means something, I suspect. This will continue to improve (as it has) into the future. It should be accommodated by all logical estimates.

Even Live Composer allows actual full width. Throttling such a feature because you feel it is not seeing much action is kind of short-sighted, don’t you think?

Sorry to hear about your troubles with clients that can’t grasp the issues that come with parallax headers, regardless. Seems to work okay in Live Composer as a block feature otherwise.

I will look forward to the next version with the new settings - when do you think that might be available?

FURTHER NOTES REGARDING THE GAP

http://inedmontonab.com/thrive1/

The gap I refer to may actually be caused by the fact that you can’t turn off the header in the customizer without the menu bar changing to always being a solid color, instead of fully transparent, and pushing the first block in line down under the menu block.

I tried added a 1 pixel PNG file to the header to try to cheat the height of it - in effect hiding the header and area - while still maintaining a transparent menu.

What you see in the link above is the result of that.

It leaves a gap at the top. This is likely because there is a 1 pixel image there, but my hope was that the space around the one pixel image would only just be as tall as the image itself (1 pixel). This is not the case.

I have my workaround for this using the Siteorigin CSS editor plugin, so I can fix this without the 1 pixel image nonsense, but it would be great to be able to turn off the header and not have a solid menu bar as an option in the theme itself.

In fact, upon further reflection, it would also be great to have a setting that allows one to set the opacity (or alpha) of the bar (which I was able to do in the free version of west by editing the CSS manually.

Sorry, I wasn’t very detailed about the gap earlier.

Thank you for your help and time on all of this. I really do appreciate it!


#7

Hey Vlad - any news on that pesky menu text color update?


#8

Oh, sorry, looks like I missed this reply. Let me try to read through your post. If you could please keep it shorter in the future :slight_smile:


#9

The update will be as soon as we manage to resolve some issues with our way of providing updates.

Yeap, not sure where I came up with that resolution stat. Anyway, here’s what you can do with some custom CSS to make it full width and parallax:


@media only screen and (min-width: 1024px) {
  .large-header {
      display: none;
  }
  .header-image {
      height: 700px;
      background-image: url(http://inedmontonab.com/electricians/wp-content/uploads/2015/11/cropped-cropped-cropped-light-bulb-924935_1920-YELLOW21.jpg);
      background-attachment: fixed;
  }
}

Not really able to focus atm as I just woke up so if there’s anything else from your last post that I can help with, feel free to let me know.

Sorry again for missing your reply.


#10

And instead of just increasing that 1920px it probably would be better if I add an extra option for images on larger screens. This way I can make sure that nobody uses a 5000px wide image for 1920 screens.


#11

Actually alternative images that would automatically update for Desktop/Tablets/Smartphone would be cool!

That might not quite be what you were referring to, but I have seen that elsewhere, and it is a good idea.

Your CSS code to fix the header image issue I was having worked very nicely once I changed the minimum width. Can’t wait to see that incorporated as an easy to use setting in the theme, but that gets me by.

Thank you!


#12

One of my other issues was when you hide the theme header image, the menu goes solid and does not allow the first block of Live Composer content to underlap the menu, like it does with the regular header turned on.

As I mentioned, I can get around that, but it would be nice if the menu would stay transparent and overlap the page content when you turn off the header, even as an option somehow.


#13

In addition to the two comments above, I would like to offer you any testing help you might need. Possibly the larger monitors I am using could come in handy at times?

And otherwise, if you want me to test themes and/or plugins, I am happy to do so.

Dave


#14

Thanks for offering your help with testing. I actually bought a 1920 monitor since this topic started.

Now, regarding #131007, this in no way can be the default behavior as there’s no way of knowing if the first section on a specific page would have a background image or a color other than white. So it will result on making the menu invisible.
Having it as an option might be a good idea, though I’m not inclined to bloat the theme with options that won’t be used by the majority of users. Specifically in this case as it is extremely easy to do this with custom CSS. If you remove the black strip you’ve added I can show you how.


#15

Well, one of the reasons I like your theme is because it is light weight. And I don’t want to be responsible for bloating it. I am not a big fan of customizing with CSS, but I will take what I can get.

The workaround using Siteorigin’s CSS editor I mentioned earlier is pretty easy, and it has the interesting effect of hiding the header image, which brings up the next block to replace it (without a gap at the top). So it means that I can use anything from an image to a slider of my choosing. Another interesting thing about it is that it can leave behind the Title and buttons from the theme header in place, so I still have that if I want it.

But I wouldn’t mind having your CSS code - anything from the creator of the theme would be preferable.


#16

Thanks again for working on all this with me, btw. And congrats on the new monitor! :slight_smile:


#17

Something like this would do it:


.page-id-66 .site-header:not(.header-scrolled) {
     position: fixed;
     background-color: transparent;
}
.page-id-66 .header-clone {
     display: none;
}

All you need to do is replace 66 with the ID of your page which you can find by clicking on Edit Page and looking at the URL bar in your browser.


#18

I will give that a try and see how it goes. Thank you!

Dave


#19

That seemed to fix the gap issue.

I am wondering if the menu request I made was ever updated on the theme - I have copied the original request below for easy reference:


November 22, 2015 at 2:23 pm #125150

Dave Stevens

Participant
Forgot to mention earlier – I would like to put in a request for a feature addition…

I was curious why there isn’t a setting to change the font color in the menu. or when the menu is in sticky mode. Was that an oversight?

It seems logical to assume that someone might want to do that, especially given there is a setting to change the background color of the menu itself, and if one wanted a dark menu in sticky mode, that they might want to change the color of the font to something other than black.

Could that be added to the color settings in the theme? In my opinion it is something that should already be there.

My overall thought is that the theme is pretty good – why not make it complete?



#20

Anybody out there? Please see above if so… :slight_smile: