Wordpress Site: Navigation Dropdown boxes do not show?

[LauraMJ]

Someone trying to access our website ( http://www.virginiahorsecouncil.org/ ) says that when she hovers over the Navigation headings, none of the drop down boxes appear for her. They do for me, so I have no way to try to trouble shoot it. Does anyone else have this problem? If not, does anyone have any idea as to why those dropdown boxes would NOT work for someone?

 

[colinsp]

Laura

I have checked your site in all the common browsers and it works fine. I suspect your member with the problem does not have javascript enabled on her browser and that is what is causing the issue.

Your page takes a long time to load see http://tools.pingdom.com/fpt/#!/baiAKk/http://www.virginiahorsecouncil.org/ Your images are huge that is what is taking the time can I suggest that you resize them and get them down to around 100k each and you will get a much faster loading page. Having images as large as you have (over 4 meg in one case) is totally unnecessary for a website.

 

[LauraMJ]

The header image needs to be that big for that theme or it won't look right. But are you talking about the photos at the bottom?

 

[JiminSA]

Using this online facility I was able to reduce your main picture from 1,408,347 bytes to 1,066,871 bytes - a saving of about 24% of image weight, without reducing it in size and without any quality degradation - food for thought ...

 

[colinsp]

Laura

Just look at the pingdom report that I linked to it shows all of the items loading on your home page. Just check out anything with a jpg extension.

If you don't have any suitable software try this site https://tinyjpg.com/

Your image Roger and De at the mansion for instance is 4.4meg in size and the image is 4192px by 2784 px you are only displaying it at 364px x 402px. I have resized it to that and have cut the file size to 112kb see the attached.

Likewise your main image is 4896px by 1264px. Very few of your visitors will have screens wider than 1920px. I have done the same thing with this one and reduced it to 122k from 1.3meg. Also attached

If you do this to all your images you will drastically improve you page speed load time. Also consider mobile users and what it costs them to download images this size when it isn't necessary. Reduced to this size they will still look fine on the website and will make your website much faster to load and much more friendly to people with slow broadband or mobile data services.

 

[LauraMJ]

Please be patient as all this Wordpress stuff is brand new to me and I've pretty much learned everything I did here on that website in the last couple of months by the seat of my pants.

Regarding the main images, every single time I've tried to use something smaller, it ends up bringing the photo "forward" so that (in the case of the image with the lake), all you end up seeing is, for example, the area in the middle or near the top, so you'd see maybe the top of the rider's head and the water of the lake. If I don't use photos that are HUGE (and I agree, it's a pain), then they don't work correctly. I spent days.......WEEKS......resizing and changing photos until I was ready to cry. As you can see, not all pages even now HAVE a header photo, though that was the original intention, because it's been so frustrating.

As for the smaller photos at the bottom in the sliders, I could probably make the sliders smaller and then resize the images to be smaller, too. This this may all take a while since I'm about burned out with using this stupid Wordpress and I've also been learning how to install and configure and edit and use the WooCommerce, since the organization HAS to have that functional. I actually just spent ALLLLL day today adding and customizing required check out fields that our organization needs for office data so that it is included during checkout AND included in the "new order" email that is sent to the office.

*sigh*.........so far, I'm not really happy with using Wordpress. And I'm very frustrated.

 

[colinsp]

Laura

No problem I am just trying to help you and your website visitors.

Stick with Wordpress it will suddenly all click into place.

Try those 2 images I attached to the post above. You will find that they work just fine and don't look any different. There is no need to resize the slider unless you want to you can just do the images. You can just run your images through that online resource I mentioned or add this plugin https://wordpress.org/plugins/ewww-image-optimizer/ and it will do all the images on the site now and in the future as you upload them.

Woocommerce like any shopping cart system requires a lot of initial configuration but once that is done the maintenance required is negligible.

BTW. Did you get the menu issue sorted with your visitor?

 

[LauraMJ]

Yes, we did get the visitor sorted. Thanks or the tip about javascript.

I'll look at those pictures and give it a try today. I do have a resizer program on my computer that will resize in batch mode. I generally use that.

 

[LauraMJ]

Okay, I resized one of the slider pictures at the bottom of that page. I resized a picture on the far right slider of a girl sitting on a horse with ribbons hanging from it's reins. I only made it smaller by 500 pixels. As you can see, now, the picture in the slider is cutting off half of the horse's face.

This is what happens if I use anything less than humungous pictures.

 

[LauraMJ]

I took the photo of the horse and rider at the lake that you attached and added it to the header of this page:

http://www.virginiahorsecouncil.org/annual-awards-and-presentations/

As you can see, most all of the skyline is cut off.

 

[colinsp]

How are you re-sizing?

If you look at my image of the horse and rider in the water there is loads of skyline showing. So it must be something you have done in adding it to the site.

If you look at the page in your last link the CSS is set with a margin top of -50px and that is what is hiding the skyline of that image.

 

[LauraMJ]

For many, I used the Wordpress Media resizing tool. At other times, I've used a resizer tool I have on my desktop. I have used both simply depending on what I've found most convenient at the time.

For the one you provided, I simply downloaded it to my computer, then uploaded it to the media area, then went to the option for that page I linked to to upload the header image and choose the picture you gave me.

As far as the CSS on the homepage, someone else did that for me to get the photo to show as well as it does now on that page, though I'd rather have more skyline showing. It really doesn't seem to matter WHAT I want the picture to show, lol, it never really ever shows ANY picture I put on those header images the way I want them to or expect them to according to how the photo displays, unless they are enormous. Even then, there have been a few that would show only the top part of the photo, or just the bottom part, etc.

 

[LauraMJ]

Did you see that other photo I resized in the right hand slider? I used the Wordpress Media resizing tool for that one.

 

[colinsp]

That photo is currently 2000px by 1500px and you are trying to fit it into a viewport of 402px by 364px. This is a different aspect ratio and so it will never display the entire image. You need to crop the image to the same aspect ratio losing parts you can afford to or alternatively add some plain colour top or bottom or change the size of your slideshow.

The two alternatives that I can do for you are attached. Your original image was 588k in size. My two are 18k and 19k respectively.

You need to get a decent photo resizing programme that allows you to crop and minimise. Photoscape is free and it allows you to do this as does Gimp. If you are prepared to pay for something I recommend Photoshop Elements. Wordpress Media resizing is not the best at doing what you want because it dictates the size you have no control.

If you have control over the CSS in your theme than make use of the background-size: tag using cover or contain as this will help to fit the image into the containing div.

 

[LauraMJ]

I chose the photo on the right, above, and uploaded it to the media content. I then removed the current image of that photo, and replaced it with this one you've given me. Unfortunately, it still cuts off a part of the horse's face when viewed in the slider on the actual web page.