Dirección General del Sistema Estatal de Informática

Gobierno del Estado de México

Elemento Header + menu de navegación

Vista Previa

Código de Elemento

<section class="container">  
<div class="row  ">
<div class="hidden-xs hidden-sm hidden-md col-lg-12 fondoheader">  
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">  
<img class="img-responsive" src="/sites/all/themes/portalgem/imagenes/h1.png">

</div>
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-6">  
<img class="img-responsive" src="/sites/all/themes/portalgem/imagenes/h2.png">

</div>
<div style="padding-top:3%;" class="col-xs-12 col-sm-4 col-md-4 col-lg-2"> 
<a href="https://es-la.facebook.com/gobierno.edomex" target="_blank"><img src="/files/images/iconos/sm_fb.png"></a>
<a href="https://twitter.com/edomex" target="_blank"><img src="/files/images/iconos/sm_tw.png"></a>
<a href="https://www.youtube.com/user/GobEdoMex" target="_blank"><img src="/files/images/iconos/sm_yt.png"></a>
 
</div>
</div>
<div class="hidden-lg">  
<div class="col-xs-12 col-sm-12 col-md-12">  
<img class="img-responsive" src="sites/all/themes/portalgem/imagenes/H1.jpg">

</div>

<div style="padding-top:3%;text-align:center;" class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> 
<a href="https://es-la.facebook.com/gobierno.edomex" target="_blank"><img src="/files/images/iconos/sm_fb.png"></a>
<a href="https://twitter.com/edomex" target="_blank"><img src="/files/images/iconos/sm_tw.png"></a>
<a href="https://www.youtube.com/user/GobEdoMex" target="_blank"><img src="/files/images/iconos/sm_yt.png"></a>
 
</div>
</div>
</div>

</section>
<section class="container">

<header class="navbar navbar-inverse">
      <nav class="container-fluid">
        <div class="collapse navbar-collapse" id="barranavegacion">
              <ul class="links nav navbar-nav navegacion" id="main-menu"><li class="menu-628 first active"><a class="active" target="_self" rel="inicio" name="inicio" href="/">Inicio</a></li>
<li class="menu-1305"><a href="/pagos_impuestos">Trámites y Servicios</a></li>
<li class="menu-688"><a target="_top" rel="gobierno_participacion" name="Gobierno" href="/gobierno">Gobierno</a></li>
<li class="menu-1311"><a href="/identidad_mexiquense">Cultura e Identidad</a></li>
<li class="menu-685"><a rel="ventanilla" name="ventanilla" href="/categorias">Temas</a></li>
<li class="menu-1308"><a title="" href="/personas">Personas</a></li>
<li class="menu-687"><a rel="transparencia" name="transparencia" href="/transparencia">Transparencia</a></li>
<li class="menu-920 last"><a title="" rel="destacamos" name="destacamos" href="/destacamos">Destacamos</a></li>
</ul>  
        </div><!-- /.navbar-collapse El boton tenia esta clase uk-button--> 
<button type="button" data-uk-offcanvas="{target:'#my-id'}" class=" navbar-toggle hidden-sm hidden-md hidden-lg">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
</button>

<!-- This is the off-canvas sidebar -->
<div class="uk-offcanvas" id="my-id">
    <div class="uk-offcanvas-bar uk-offcanvas-bar-flip">
     
    <ul class="links uk-nav uk-nav-offcanvas" id="main-menu"><li class="menu-628 first active"><a class="active" target="_self" rel="inicio" name="inicio" href="/">Inicio</a></li>
<li class="menu-1305"><a href="/pagos_impuestos">Trámites y Servicios</a></li>
<li class="menu-688"><a target="_top" rel="gobierno_participacion" name="Gobierno" href="/gobierno">Gobierno</a></li>
<li class="menu-1311"><a href="/identidad_mexiquense">Cultura e Identidad</a></li>
<li class="menu-685"><a rel="ventanilla" name="ventanilla" href="/categorias">Temas</a></li>
<li class="menu-1308"><a title="" href="/personas">Personas</a></li>
<li class="menu-687"><a rel="transparencia" name="transparencia" href="/transparencia">Transparencia</a></li>
<li class="menu-920 last"><a title="" rel="destacamos" name="destacamos" href="/destacamos">Destacamos</a></li>
</ul>    

    </div>
</div>


      </nav>


    </header>

</section>

CSS

.fondoheader {
    background-image: url("../imagenes/BG-Header.jpg");
    background-position: 16px center;
    background-repeat: no-repeat;
}
.redesheader{padding-top:3%;}
.redesheadermovil{padding-top:3%;text-align:center;}

header.navbar {
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    border-top-color: #578432;
}
nav li a {
    font-size: 16px;
    padding-top: 0;
}
nav li a:hover {
    border-bottom: 3px solid #a4c33a;
    border-color: #a4c33a;
    font-size: 16px;
    padding-bottom: 10px;
}	

Descripción El Header se se compone basicamente de 2 renglones en los cuales el primero se subdivide entres partes siendo la primera el escudo de armas del Gobierno del Estado de México seguido y el logo de la administración actual, la segunda parta al centro es el nombre del sitio o sistema y terminando con el componente de redes sociales. En el segundo renglon va la barra de navegacón o menú principal el cual debera contar con la clase nav-inserse de bootsrap para que se despliegue con los colores correctos.