Docs

[lucrobinson11]

Hi,

I want to add an item to the top bar of my website, http://www.leaveatrace.co, but make it into a button (or at least make it look like a button) for extra emphasis.

How can I do that?

Thanks,
Luc

[Rue Nel]

Hello Luc,

Thanks for writing in! To make a button in your topbar, please update the code in your navbar and use this instead:

<div style="float:right;font-size:12px;display: inline-block;width: 100%;text-align: right;margin-top:-20px;margin-right:15px;text-transform: uppercase;position:relative;z-index:2000;">
   <a class="x-btn x-btn-regular" href="https://chrome.google.com/webstore/detail/leave-a-trace-reminder/coblijfbgogagjlmpholhacgldkbaeam" target="_blank" onclick="extensionClick(1)">Never forget: Download the chrome extension</a>
</div>

Hope this helps.

[lucrobinson11]

Thanks! That seems to make the text I have there into a button, but it’s still being displayed below the top menu, not in line with it. Is there any way to put it inline with the menu (like just to the right of the “FAQ” link?

[Thai]

Hi There,

Please update the previous code a bit and put the code below before the navbar code:

<div style="float:right;font-size:12px;display: inline-block;width: 315px;text-align: right;margin-right:15px;text-transform: uppercase;position:relative;z-index:2000;margin-top: 36px;"><a href="https://chrome.google.com/webstore/detail/leave-a-trace-reminder/coblijfbgogagjlmpholhacgldkbaeam" target="_blank" onclick="extensionClick(1)">Never forget: Download the chrome extension</a></div>

Hope it helps 🙂

[lucrobinson11]

Thanks for all your help. Unfortunately, that didn’t quite do it either!

I updated my JavaScript to be:

jQuery("<div style='float:right;font-size:12px;display: inline-block;width: 315px;text-align: right;margin-right:15px;text-transform: uppercase;position:relative;z-index:2000;margin-top: 36px;'><a href='https://chrome.google.com/webstore/detail/leave-a-trace-reminder/coblijfbgogagjlmpholhacgldkbaeam' target='_blank' onclick='extensionClick(1)'>Get the extension</a></div>").insertBefore(".x-navbar .x-nav");

and that yields the result attached. The text isn’t a button any more and it’s above the nav bar instead of inline with it (I intentionally changed the text to be a briefer snippet).

Any idea what to try next?

[Christopher]

Hi there,

Please remove JS code and add ‘custom link’ menu item to your navbar to make it inline with other items.
Then we’ll help you to style it like a button.

Thanks.

[Author]

Posts