Cuando aplico este estilo al layout:
<!-- Nota: Aqui empieza codigo de menu --> <STYLE TYPE="text/css"> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ @import url(https://fonts.googleapis.com/css?family=Open+Sans); nav { max-width: 100%; mask-image: linear-gradient(90deg, rgba(0, 255, 0, 0) 0%, #000000 10%, #000000 100%, rgba(0, 255, 0, 0) 90%); margin: 0 auto; padding: 0px 0; } nav ul { text-align: center; background: linear-gradient(90deg, rgba(0, 255, 0, 0) 0%, rgba(0, 255, 0, 0.2) 25%, rgba(0, 255, 0, 0.2) 75%, rgba(0, 0, 0, 0) 100%); box-shadow: 0 0 25px rgba(0, 0, 0, 0.1), inset 0 0 1px rgba(0, 0, 0, 0.6); } nav ul li { display: inline-block; } nav ul li a { padding: 24px; font-family: "Open Sans"; text-transform:uppercase; color: rgba(0, 0, 0, 0.5); font-size: 24px; text-decoration: none; display: block; } nav ul li a:hover { box-shadow: 0 0 10px rgba(0, 0, 0, 0.1), inset 0 0 1px rgba(0, 0, 0, 0.6); background: rgba(0, 0, 0, 0.1); color: rgba(0, 0, 0, 0.7); } </STYLE> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script> <!-- Nota: Aqui termina codigo de menu -->
Se aplica no solo al menú de inicio, sino también a la parte del usuario: Este el código de la parte del usuario la cual quiero separar del estilo que adjunte anteriormente (La que se puede ver en la parte superior en la imagen adjunta)
<div id="app"> <nav class="navbar navbar-expand-md navbar-light navbar-laravel"> <div class="container"> <a class="navbar-brand" href="{{ url('/') }}"> {{ config('app.name', 'Laravel') }} </a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <!-- Left Side Of Navbar --> <ul class="navbar-nav mr-auto"> <li><a href="{{ route('blog') }}">Blog</a></li> </ul> <!-- Right Side Of Navbar --> <ul class="navbar-nav ml-auto"> <!-- Authentication Links --> @guest <li><a class="nav-link" href="{{ route('login') }}">Login</a></li> <li><a class="nav-link" href="{{ route('register') }}">Register</a></li> @else <li><a href="{{ route('tags.index') }}">Etiquetas</a></li> <li><a href="{{ route('categories.index') }}">Categorias</a></li> <li><a href="{{ route('posts.index') }}">Entradas</a></li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> {{ Auth::user()->name }} <span class="caret"></span> </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="{{ route('logout') }}" onclick="event.preventDefault(); document.getElementById('logout-form').submit();"> Logout </a> <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;"> @csrf </form> </div> </li> @endguest </ul> </div> </div> </nav> @if(session('info')) <div class="container"> <div class="row"> <div class="col-md-8 col-md-offset-2"> <div class="alert alert-success"> {{ session('info') }} </div> </div> </div> </div> @endif @if(count($ errors)) <div class="container"> <div class="row"> <div class="col-md-8 col-md-offset-2"> <div class="alert alert-danger"> <ul> @foreach($ errors->all() as $ error) <li>{{ $ error }}</li> @endforeach </ul> </div> </div> </div> </div> @endif </div>
La idea es que ese estilo solo se aplique al menú de inicio y no a la parte del usuario.