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.