Google translate widget appearing twice in table

I'm trying to add a Google Translate widget to my website that uses Bootstrap and CakePHP.

When I add the following code into some of my body, it all works as expected: default language is set when loading the page, the layout is miminal, top translation bar is not showing and so on...

<div id="google_translate_element"></div>
    <script type="text/javascript">
    function googleTranslateElementInit() {
        new google.translate.TranslateElement({pageLanguage: 'en',
            includedLanguages: 'es', defaultLanguage: 'es',  background:
            'trasparent', multilanguagePage: true, layout:
            google.translate.TranslateElement.InlineLayout.SIMPLE},
            'google_translate_element');
    }</script>
    <script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

However, when I try adding the widget to the navigation table, things get all messed up. First, the widget appears twice, then it does not align with anything or even worse, overlaps with other cells and so on.

Here a simple example of where I'd try to fit the plugin:

<div class="navbar-collapse nav-slide-toggle" id="nav-collapse">
    <ul class="nav navbar-nav navbar-right text-uppercase">
        <li><a class="active-nav" href="<?php echo $this->Html->url('../en/')?>">English</a></li>
        <!-- google widget should be another cell here...-->
        <li> <div id="google_translate_element"></div>
        <!-- rest of widget code...-->
    </ul>
</div>

What am I doing wrong here???