Habilitar el campo de Archivo en los Webform Drupal
Para habilitar la funcionalidad de carga de...
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);
}
}
