Menu::Widget (Static when scrolling)

1

I am sure this is something simple. But what I would like is when scrolling on the page for the menu to follow you, so that is always visible when scrolling.

<div class="nav-wrapper" ><a id="logo-container" href="#" class="brand-logo" style="margin-left:50px; top-margin:0px; bottom-margin:10px;"><img class="topleft" width="200px" height="50px" src='http://go2-telecom.com/resources/images/logo-nobackground-1000.png'></a>
	  		<?php
						echo Menu::widget([
						    'options' => ['id' => "nav-mobile", 'class' => 'green lighten-1 right navbar-fixed-top'],
						    'items' => [
						        ['label' => 'Home', 'url' => ['site/index']],
						        ['label' => 'About', 'url' => ['site/about']],
						        ['label' => 'Services', 'url' => ['site/services']],
                    ['label' => 'Careers', 'url' => ['site/careers']],
                    ['label' => 'Contact', 'url' => ['site/contact']],
                    ['label' => 'Resumes', 'url' => ['resume/index'], 'visible' => !Yii::$app->user->isGuest],
						        ['label' => 'Login', 'url' => ['site/login'], 'visible' => Yii::$app->user->isGuest],
						    ],
						]);
					?>
          <a href="#" data-activates="nav-mobile" class="button-collapse"><i class="mdi-navigation-menu"></i></a>
      </div>
2

Your nav needs a navbar-fixed-top class. See W3Schools Tryit Editor

3

Thanks, I did try that, but it scrolls anyway:

page: https://go2-telecom.com

4

Hello there.

you are using bootstrap 4 on this website, use the class “fixed-top” on the element

<nav class="white fixed-top lighten-1" role="navigation">
    <div class="container">
      <div class="nav-wrapper"><a id="logo-container" href="#" class="brand-logo" style="margin-left:50px;"><img class="topleft" width="200px" height="50px" src="http://go2-telecom.com/resources/images/logo-nobackground-1000.png"></a>
	  		<ul id="nav-mobile" class="green lighten-1 right side-nav navbar-fixed-top "><li class="active"><a href="/site/index">Home</a></li>
<li><a href="/site/about">About</a></li>
<li><a href="/site/services">Services</a></li>
<li><a href="/site/careers">Careers</a></li>
<li><a href="/site/contact">Contact</a></li>
<li><a href="/site/login">Login</a></li></ul>          <a href="#" data-activates="nav-mobile" class="button-collapse"><i class="mdi-navigation-menu"></i></a>
      </div>
    </div>
  </nav>
1 Like
5

Thanks that did it!