Look at this two images, and please tell me what is going on?
Why the icons moving ?
i'm stuck on this for about an hour...
The icons must be align on the right or left, the 3 icons are "floating left" but still look like this...
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<!--Import Google Icon Font-->
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Duall Sistemas</title>
<!-- Bootstrap core CSS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/materialize.css">
<link rel="stylesheet" type="text/css" href="css/custom.css">
<link rel="stylesheet" type="text/css" href="libs/bootstrap/bootstrap-social.css">
<link rel="stylesheet" type="text/css" href="libs/font-awesome/css/font-awesome.css">
<base href="/index.ejs">
</head>
<body>
<div class="navbar-fixed">
<nav>
<div class="row">
<div class="col s12 ">
<div class="nav-wrapper">
<a href="/home" class="brand-logo">Duall Sistemas</a>
<a href="#" data-activates="mobile-demo" class="button-collapse right"><i class="material-icons">menu</i></a>
<ul class="right hide-on-med-and-down">
<li><a href="/home">Principal</a></li>
<li><a href="/contact">Contato</a></li>
<li><a href="/about">Sobre</a></li>
</ul>
<!-- Menu para Mobile -->
<ul class="side-nav" id="mobile-demo">
<li>
<div class="userView">
<img class="background" src="img/image03.jpg">
<a href="#!user"><img class="circle" src="img/duallsistemas.png"></a>
<a href="/home"><span class="white-text name">Duall Sistemas</span></a>
<a href="#!email"><span class="white-text email">[email protected]</span></a>
</div>
</li>
<li><a href="/home"><i class="material-icons">home</i>Principal</a></li>
<li><a href="/contact"><i class="material-icons">mail</i>Contato</a></li>
<li><a href="/about"><i class="material-icons">favorite border</i>Sobre</a></li>
</ul>
<script>
$(document).ready(function(){
$(".button-collapse").sideNav({
closeOnClick: true
});
})
</script>
</div>
</div>
</div>
</nav>
</div>
<!-- DIV que recebe as VIEWs na pasta Partials de acordo com os Controlleres -->
<div class="container" id="container-main">
<div ng-view>
</div>
</div>
<!-- Scripts para inicializar o Angular e seus Controladores -->
<script type="text/javascript" src="libs/jquery/jquery.js"></script>
<script type="text/javascript" src="js/materialize.js"></script>
<script type="text/javascript" src="libs/angular/angular.js"></script>
<script type="text/javascript" src="libs/angular-route/angular-route.js"></script>
<script type="text/javascript" src="libs/angular-resource/angular-resource.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="libs/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script type="text/javascript" src="js/controllers/homeController.js"></script>
<script type="text/javascript" src="js/controllers/navController.js"></script>
<script type="text/javascript" src="js/controllers/aboutController.js"></script>
<script type="text/javascript" src="js/controllers/contactController.js"></script>
<script type="text/javascript" src="js/services/Api.js"></script>
</body>
</html>It looks as though you are floating your icons to the left and the following elements are catching on it.
Try setting clear left on your lis.
li {clear: left;}