How To Add The Beacon To Your Header (Or Main Menu)

The Beacon is a cool little feature that broadcasts a custom message on your site. It was built into the last theme I released before MD, Spotlight.

The Beacon is now available for download.

https://marketersdelight.com/dropins/beacon/

A shoutout to +Ray Smith for getting me to port the beacon onto his site as a custom mod earlier this year & jwnek for opening a support thread about it.

 

[Ray]

Hey everyone...

If you're offering a service from your MD site, you should really consider adding the (pulsating) Beacon to your header menu.

The beacon has been getting more clicks and converting better than my "contact" did. Same placement...better results.

Here's an example of it (Evernote link)

 

[flamerz]

I think you need to add:

@media all and (min-width: 900px) {
 
    .header-menu {
       float: left;
    }
 
    .beacon-content {
        display: none;
        position: absolute;
        right: 0;
        top: 35px;
        width: 300px;
    }
 
    .beacon-trigger {
        display: none;
    }
 
}

 
to get some free room for the beacon.

 

[callummahoney]

As someone with about as much colour design skill as a blind person, does anyone have any thoughts on finding colour options to change the colour of the beacon?

I'm looking at the default red (#ae2525), but wouldn't have any idea on the other colour options for the pulsing.

 

[Alex]

Great question. I assume you've already installed the beacon to your site, so open up your style.css file and look for these selectors:

.beacon-status-on {
background-color: #30a146;
}

.beacon-status-off {
background-color: #777;
}

The "on" status selector is the main part, the green color, of the Beacon. The "off" status selector is the gray color when the Beacon is turned off. You would switch out #30a146 with the #ae2525 color.

Next, the color of the pulse behind the main beacon circle is directly below the lines above:

.beacon-pulse {
background-color: #2b803c;
[...]
}

You can change that color to another color code, preferably a more subtle red color so the pulse has contrast behind the main Beacon.

I hope that helps get you started! I intend on releasing the Beacon with more controls in a plugin one of these days, but until then, we have total control over how it works with this code. If you get stuck with anything else, let me know and I'll be more than happy to walk you through it!

 

[drbarrywheeler]

What if I want to add it to the the main menu instead of header menu?

 

[Alex]

Hey Dr. Barry, great question. I've added further instructions to the end of the top post. By making those small adjustments you'll be able to move the Beacon into the Main Menu.

One day this will be in a plugin of some kind and will be far easier to work with! Let me know if you need any further help with this.

 

[drbarrywheeler]

Thanks Alex, Worked great. I am using the custom header nav with logo in the center you discuss on another post so I also had to remove " .header-menu { float: left; } but otherwise loox good. I was struggling with this for hours before I got on here and asked you.

 

[Alex]

Sorry for the troubles but I hope you learned something new during the struggle. Always feel free to ask whatever you get stuck on here. Glad it's all working in the end!

 

[greatsun0]

Hi Alex,

I followed the above instruction, but the beacon isn't quite right yet.  The position and the background mismatch.

Below is my website.

https://www.ptcn.me/

Would you please check?

 

[Alex]

Maybe you solved it because everything looks about right to me.

 

[amalseed]

I have just added beacon to my site and it has moved all the nav elements, see image attached.

Any ideas on how to fix?

 

[Alex]

Thank you for bringing this up - I actually have re-releasing the Beacon on my list of Monday releases and think it will be the perfect candidate for this next release. If you take your site off maintenance mode I can see your issue, otherwise wait 'til Monday and I will have the updated release for the Beacon then!

 

[amalseed]

No worries, I will just wait until monday... Thx Alex

 

[Alex]

The Beacon is now available for download.

https://marketersdelight.com/dropins/beacon/