1

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: introducir la descripción de la imagen aquí 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>

Creo que no esta muy bonito, pero al menos funciona. introducir la descripción de la imagen aquí

3
  • es lógico que esto ocurra porque estas aplicando estilos por etiquetas html y no por id o por un nombre de clase. Debes asignarle una clase o un id a los estilos y aplicarle estilos solo a ellos. Commented el 15 feb. 2018 a las 18:35
  • Debes aplicar los estilos ya sea por id (usando #) o crear clases especificas para los elementos de tu menú nada más, algo como class = "nav-menu" para que el css lo llames así .nav-menu y así no afectas a las etiquetas del HTML directamente Commented el 15 feb. 2018 a las 19:53
  • 1
    SI la respuesta que te han dado te ha servido deberías marcarla como aceptada. Si tienes una respuesta mejor deberías publicarla como respuesta y no añadirla en la pregunta.
    – user7176
    Commented el 16 feb. 2018 a las 7:04

1 respuesta 1

2

Realmente tu problema se centra en que estás aplicando los estilos a las etiquetas HTML pero no a los elementos concretos para los cuales quieres cambiar un estilo.

Para realizar lo que tu quieres necesitarás usar clases o ID's. Las clases se utilizan cuando quieres que más de un elemento tenga un mismo estilo y los ID cuando te quieras referir a un solo elemento.

Ejemplo cambiando el color de texto por etiqueta HTML:

span{
   color: red;
}
<span>Este es un texto rojo</span><br>
<span>Este es un texto rojo</span><br>
<span>Este es un texto rojo</span><br>
<span>Este es un texto rojo</span><br>

Como puedes observar, el estilo se aplica a todas las etiquetas span.

Ejemplo cambiando el color de texto por clases e ID

.rojo{
   color: red;
}

#azul{
   color: blue;
}
<span class="rojo">Este es un texto rojo</span><br>
<span class="rojo">Este es un texto rojo</span><br>
<span>Este es un texto por defecto</span><br>
<span id="azul">Este es un texto rojo</span><br>

Como puedes observar, en este caso he aplicado una clase llamada rojo a varios de los textos pero sin afectar al resto de elementos, solo los que tienen dicha clase.

Además, he utilizado un ID llamado azul que aplico a un solo elemento. No apliques ID's iguales a más de un elemento, en su defecto usa clases.

Ten en cuenta que el texto al que no le hemos indicado ninguna clase o ID no se ve afectado.

NOTA: En tu CSS los ID's se verán representados por una almohadilla # y las clases por un punto .

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.