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(http://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.
EDIT1: He podido solucionarlo en base a lo que me han dicho. Este es el codigo del estilo modificado usando clases:
<style>
/* 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(http://fonts.googleapis.com/css?family=Open+Sans);
nav.inicio1 {
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.inicio2 {
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.inicio3 {
display: inline-block;
}
nav ul li a.inicio4 {
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.inicio5 {
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>
Y aquí el código de la barra de inicio:
<nav class="inicio1 inicio2 inicio3 inicio4 inicio5">
<ul class="inicio2 inicio3 inicio4 inicio5">
<li class="inicio3 inicio4 inicio5">
<a href="http://localhost:8000/" class="inicio4 inicio5">Inicio</a>
</li>
<li class="inicio3 inicio4 inicio5">
<a href="{{ route('blog')}}" class="inicio4 inicio5">Actualidad</a>
</li>
<li class="inicio3 inicio4 inicio5">
<a href="{{ route('instituto')}}" class="inicio4 inicio5">Instituto</a>
</li>
<li class="inicio3 inicio4 inicio5">
<a href="#" class="inicio4 inicio5">Aulas</a>
</li>
<li class="inicio3 inicio4 inicio5">
<a href="#" class="inicio4 inicio5">Departamentos</a>
</li>
</ul>
</nav>
class = "nav-menu"
para que el css lo llames así.nav-menu
y así no afectas a las etiquetas del HTML directamente