El componente de encabezado de Hidrotecno consiste en un logo de la empresa, un menú de navegación principal y un botón con un menú desplegable adicional. Este diseño claro y accesible facilita la identificación de la marca y la navegación fluida para los usuarios, mientras se garantiza la compatibilidad con diferentes dispositivos y navegadores.
Está diseñado para proporcionar una navegación clara y accesible a través de tres elementos principales:
- Logo de la Empresa: En la esquina superior izquierda del encabezado se encuentra el logo de Hidrotecno. Este logo sirve como marca distintiva de la empresa.
- Menú de Navegación: El menú de navegación principal está ubicado en la parte superior del encabezado. Proporciona enlaces a las secciones principales del sitio web. Este menú está diseñado para ser claro y fácil de usar, garantizando una experiencia de navegación fluida para los usuarios.
- Botón con Menú Desplegable: A la derecha del menú de navegación principal, hay un botón con un ícono de menú. Al hacer clic en este botón, se despliega un menú adicional que ofrece acceso a paginas secundarias.
Archivos Usados
1.
header.php
PHP
includes/header.php
Include
1.
header.php
PHP
includes/header.php
Include
<!DOCTYPE html>
<html class="no-js">
<head>
<title>
<?php wp_title('•', true, 'right'); ?>
</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<?php wp_head(); ?>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
</head>
<body <?php body_class(); ?>>
<!--[if lt IE 8]>
<div class="alert alert-warning">
You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.
</div>
<![endif]-->
<?php $class_name = "main-menu" ?>
<header>
<nav class="<?php echo $class_name ?> navbar navbar-expand-lg fixed-top p-0">
<div class="container-fluid">
<div class="d-flex w-100 justify-content-between align-items-center">
<a class="navbar-brand <?php echo $class_name ?>__logo" href="<?php echo home_url('/'); ?>">
<?php echo get_bloginfo('name'); ?>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar"
aria-controls="offcanvasNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class=" <?php echo $class_name ?>__one py-2">
<div class="d-flex justify-content-end alingn-items-center">
<div class="my-3">
<?php
wp_nav_menu(
array(
'theme_location' => 'menu-main',
'depth' => 0,
'menu_class' => 'nav navbar-nav',
'fallback_cb' => 'wp_bootstrap_navwalker::fallback',
'walker' => new wp_bootstrap_navwalker()
)
); ?>
</div>
<?php
wp_nav_menu(
array(
'theme_location' => 'menu-sustainability',
'depth' => 0,
'menu_class' => 'menu-sustainability m-0',
'fallback_cb' => 'wp_bootstrap_navwalker::fallback',
'walker' => new wp_bootstrap_navwalker()
)
); ?>
<div class="d-flex <?php echo $class_name ?>__eccomerce-items">
<div> <a class="<?php echo $class_name ?>__login mx-2" href="#"></a></div>
<div> <a class="<?php echo $class_name ?>__shopping mx-2" href="#"></a></div>
</div>
</div>
</div>
</div>
</div>
<div class="offcanvas offcanvas-end <?php echo $class_name ?>__menu-responsive" tabindex="-1" id="offcanvasNavbar"
aria-labelledby="offcanvasNavbarLabel">
<div class="offcanvas-header">
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body ">
<div class="<?php echo $class_name ?>__two">
<div class="ps-3 mb-3">
<?php
wp_nav_menu(
array(
'theme_location' => 'menu-main',
'depth' => 0,
'menu_class' => 'nav navbar-nav main-menu__nav',
'fallback_cb' => 'wp_bootstrap_navwalker::fallback',
'walker' => new wp_bootstrap_navwalker()
)
); ?>
</div>
<?php
wp_nav_menu(
array(
'theme_location' => 'menu-sustainability',
'depth' => 0,
'menu_class' => 'menu-sustainability mb-4',
'fallback_cb' => 'wp_bootstrap_navwalker::fallback',
'walker' => new wp_bootstrap_navwalker()
)
);
?>
<div class="d-flex ">
<div> <a class="<?php echo $class_name ?>__login mx-2" href="#"></a></div>
<div> <a class="<?php echo $class_name ?>__shopping mx-2" href="#"></a></div>
</div>
</div>
</div>
</nav>
</header>
2.
_header.scss
SCSS
frontend/scss/theme/layout/_header.scss
Styles
2.
_header.scss
SCSS
frontend/scss/theme/layout/_header.scss
Styles
.main-menu {
box-shadow: rgba(0, 0, 0, 0.25);
height: rem(90px);
a {
color: $black;
}
&__logo {
@include imageBg("../img/logo.png", rem(100px), rem(200px));
}
&__one {
li {
margin: 0 rem(10px);
}
display: none;
@include from(l) {
display: initial;
}
}
&__login {
@include imageBg("../img/icons/login.svg", rem(50px), rem(40px));
}
&__shopping {
@include imageBg("../img/icons/shopping.svg", rem(50px), rem(40px));
}
.menu-sostenibilidad-container {
.menu-sustainability {
#navbarDarkDropdown-0 {
@extend %button-header;
gap: 0;
}
}
}
.dropdown-menu {
@include from(l){
border: none;
}
}
.navbar-toggler-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%23276fbf' stroke-width='3' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
@include from(l) {
display: none;
}
}
.navbar-toggler:focus {
box-shadow: 0 0;
}
.offcanvas-end {
width: rem(300px);
}
}
Artículos relacionados
Cómo descargar Formularios/Leads en Wagtail (Racafe)
Este artículo documenta el proceso para...
