Map and Navigation Menu

[Joey Colson]

First question, do you have a solution for disabling the scroll wheel on a Google map iframe? None of the solutions I’ve come across online have worked when I’ve used them in the contact widget.

Second question, is there any way to have the navigation menu scroll down the page with you? I guess this is essentially locking the header in place, but I’m not sure how to do that or if it’s possible.

[Bill Robbins]

Good Morning Joey,

Great questions there. Let’s see if we can find answers for you:

Scroll Map

Fantastic question there. Google has a pretty useful API for interacting with their maps and one of the options there is to disable the scroll wheel. It’s a bit more involved than just adding the embed code for your map though. If you want to go that route, you can read about it at https://developers.google.com/maps/documentation/embed/guide#overview.

Two other options you might consider:

1. You can disable click events on the map which would also include the scroll wheel. To do that, change the opening of the embed code to be like this:

   
   <iframe style="pointer-events:none" 
   

   while keeping the rest the same. That’s the easiest option.

2. Take a screenshot of your map and then place the image of your map inside a link in your widget instead of the embed code. That disables scrolling and still lets people click through and see the full map. This also has a benefit of being fast loading.

---

You can have the header fixed in place so that it’s always visible. Here’s how to do that:

1. Go to your theme options page and choose the Advanced tab.
2. Scroll down to the Custom CSS box and add this:

   
   #header {
   	position: fixed;
   }
   

3. Update your settings.

While you’re in the Custom CSS, you might add this too to help out the padding on your home page widgets:

#home-widgets .organizedthemes-contact.widget {
	padding: 0;
}

#home-widgets .widget {
	padding: 30px;
}

That change will be part of the next theme update.

Let me know if you have any questions or trouble.

Have a great weekend,
Bill

[Joey Colson]

Thanks a million. I am so appreciative of how fast you are to respond all the time and how great your advice is. I’ll work on those things today, but thought of another thing I wanted to ask.

I added an Events Countdown widget to my home screen, but would love if that particular widget were centered (http://www.crossbridgelincoln.org). Do I just need to change a margin somewhere?

[Bill Robbins]

Hey Joey,

I do try to be as quick as I can with support requests. I’m a procrastinator about most things, but requests can really snowball so I try to stay on top of them.

It looks like you can center the countdown text. Here’s how to do that:

1. Go to your theme options page and choose the Advanced tab.
2. Scroll down to the Custom CSS box and add this:

   
   .tribe-events-countdown-widget,
   span.trabe-countdown-time {
   	text-align: center;
   }
   
   #home-widgets .tribe-countdown-number,
   #home-widgets div.tribe-countdown-colon {
   	display: inline-block;
   	float: none;
   }
   

3. Update your settings.

Let me know if that doesn’t do the trick.

[Joey Colson]

Awesome! All of those things worked like a charm (although I didn’t like the fixed header after all so I squashed that). I need to get better at CSS and not bother you with simple tasks like those 🙂 Thank you again for your quick response. I will continue recommending Organized Themes because of your service and fantastic products. Keep up the good work!

[Bill Robbins]

Thanks so much Joey 🙂

Let me know if you need anything else and enjoy your Saturday.

[Author]

Posts