Widget not generating html correctly?

Question

css

What you need to get:

<!-- Navigation panel -->
    <nav class="main-nav dark transparent stick-fixed">
      <div class="full-wrapper relative clearfix">
        <!-- Logo ( * your text or image into link tag *) -->
        <div class="nav-logo-wrap local-scroll">
          <a href="#top" class="logo">
            <img src="images/logo-white.png" alt="" />
          </a>
        </div>
        <div class="mobile-nav">
          <i class="fa fa-bars"></i>
        </div>
        <!-- Main Menu -->
        <div class="inner-nav desktop-nav">
          <ul class="clearlist scroll-nav local-scroll">
            <li class="active"><a href="#home">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#services">Services</a></li>
            <li><a href="#portfolio">Portfolio</a></li>
            <li><a href="#news">News</a></li>
            <li><a href="#contact">Contacts</a></li>

          </ul>
        </div>
      </div>
    </nav>
    <!-- End Navigation panel -->

My NavBar Widget:

NavBar::begin([
    'options' => ['class' => ' main-nav dark transparent stick-fixed'],
    'innerContainerOptions' => ['class' => ' full-wrapper relative clearfix'],
    'brandOptions' => ['class' => 'logo'],
    'brandLabel' => '<img src="/images/logo-white.png" alt="TEST"/>',
    'brandUrl' => "/"
]);
?>
<div class="mobile-nav">
    <i class="fa fa-bars"></i>
</div>
<div class="inner-nav desktop-nav">
    <?php
    $menuItems[] = [
        "label" => Yii::$app->language,
        'items' => $availableLangs
    ];
    echo Nav::widget([
        'encodeLabels' => false,
        'options' => ['class' => 'clearlist scroll-nav local-scroll'],
        'items' => $menuItems
    ]);
    NavBar::end();


    ?>
</div>

What is generated:

<!-- Navigation panel -->

<nav id="w0" class="main-nav dark transparent stick-fixed navbar" role="navigation">
    <div class=" full-wrapper relative clearfix">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#w0-collapse"><span
                    class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span></button>
            <a class="logo navbar-brand" href="/"><img src="/images/logo-white.png" alt="TEST"/></a></div>
        <div id="w0-collapse" class="collapse navbar-collapse">
            <div class="mobile-nav">
                <i class="fa fa-bars"></i>
            </div>
            <div class="inner-nav desktop-nav">
                <ul id="w1" class="clearlist scroll-nav local-scroll nav">
                    <li><a href="#portfolio">Test</a></li>
                    <li class="dropdown"><a class="dropdown-toggle" href="#" data-toggle="dropdown">FR <b
                                class="caret"></b></a>
                        <ul id="w2" class="dropdown-menu">
                            <li><a href="/ru" tabindex="-1">Ru</a></li>
                            <li><a href="/en" tabindex="-1">En</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
</nav></div>

<!-- End Navigation panel -->

Answer 1

Google css gradient animation
css.yoksel.ru/animation-for-gradients

Answer 2

Widget correctly generates HTML! To make sure of this, we find it in the vendor folder, and see what it should generate. If something does not suit you, there are two options:
1. Make your own widget customNav, which is inherited (extends) from Nav, and rewrite methods (init, run, etc.).
2. Do not use this widget. You leave your required HTML as is, fill in the menu lists like this:

<ul>
<?php foreach( $availableLangs as $lang ) { 
echo '<li>';
echo $lang;
echo '</li>';
}; ?>
</ul>

ps. 'html markup' - I wonder where you heard such a phrase)