Split theme: add a CTA on the menu

Classic Themes
1

Hello
there’s a thing that is making me crazy and I need your help.
I’m using the Split theme for a website and I would like to add on the top menu a CTA to launch a “call to phone” action.
See the attached file: the button I need is like “SHOP NOW” or “GET BUNDLE”.
Could you please help me?
Many thanks in advance.
Antonio

39
391156×226 18.6 KB

2

I’m going to hate myself in the morning for this.

This adds a single button with a specific id…

In the global CSS code pane, add this:

#customButtonSplitNav {
    background-color: #00A0FF;
    background: -webkit-gradient(linear, left top, left bottom, from(#00A0FF), to(#0060BF));
    border: 1px solid #0060BF;
    padding: 3px 20px;
    color: #FFFFFF;
    box-shadow: rgba(0, 0, 0, 0.5) 0px 1px 2px;
    margin: 5px;
    font-weight: bold;
    height: 3em;
    font-size: 0.8em;
}

Got that? It should look like this:

04
041982×694 83.9 KB

Next, hop over to the javascript pane and add this:

$(document).ready(function(){
	$i = $('body > header > nav > ul');
	$i.append('<li><button id="customButtonSplitNav"><a href="http://www.google.com">GET BUNDLE</a></button></li>')
});

Should look like this:

33
332402×394 58.6 KB

Hit preview. You should get this:

15
151100×544 608 KB

Just change the construct of the code in the js snippet to do whatever you need. It’s just a button after all. If you need to learn a bit about click to call then this might be a good place to start:
https://developers.google.com/web/fundamentals/native-hardware/click-to-call/

5 Likes
3

Wooooow @klaatu - fantastic tutorial!!
I hope you love yourself this morning :heart_eyes:

1 Like
4

@klaatu you’re amazing! Great! It’s exactly what I need.
It works great.

2 Likes
5

This topic was automatically closed 6 days after the last reply. New replies are no longer allowed.