ultracobra
Ni
Verificado por Whatsapp
Estoy usando HTML, CSS, JS para programar un footer que en varias versiones se ve bien en pantallas grandes, pequeñas, pero queda una plasta en celulares.
Tal vez aguante un poco antes de ir a CodePen y tomar un footer de muestra y adaptarlo, pero si tienes un enfoque que recomendarme para hacer que mi nav superior que incluye el menu superior y el footer que contiene un menu inferior, pues se vea bien en pantallas de celular.
Basta una mejor aplicación de los media queries o mejor uso algo que ya fue optimizado...
Pondré el nav-top que es el que se ve peor en pantallas pequeñas. Iba a poner CSS pero son muchas clases y se pone muy denso el tema.
Tal vez aguante un poco antes de ir a CodePen y tomar un footer de muestra y adaptarlo, pero si tienes un enfoque que recomendarme para hacer que mi nav superior que incluye el menu superior y el footer que contiene un menu inferior, pues se vea bien en pantallas de celular.
Basta una mejor aplicación de los media queries o mejor uso algo que ya fue optimizado...
Pondré el nav-top que es el que se ve peor en pantallas pequeñas. Iba a poner CSS pero son muchas clases y se pone muy denso el tema.
HTML:
<nav>
<button class="menu-toggle" aria-label="Toggle menu">
<!-- <span class="fas fa-bars"></span> -->
</button>
<div class="main-menu-container">
<ul class="main-menu">
<li><a href="#footer-bottom" class="menu-item active" title="Inicio parte inferior"><i class="fas fa-home"></i></a></li>
<li class="menu-dropdown">
<a href="#" title="Enlaces a la table-board - Re-pulsa las categorías en la table-board principal" class="menu-item">Asistencia</a>
<ul class="submenu">
<li><a href="#td9">Asistente Dev</a></li>
<li><a href="#td8">Asistente Copy</a></li>
<li><a href="#td11">Asistente Audio</a></li>
<li><a href="#td5">Asistente Digital</a></li>
</ul>
</li>
<li class="menu-dropdown">
<a href="#" title="Enlaces a la table-board - Re-pulsa las categorías en la table-board principal" class="menu-item">Generación</a>
<ul class="submenu">
<li><a href="#td1">Texto a Audio</a></li>
<li><a href="#td12">Texto a Imagen</a></li>
<li><a href="#td10">Texto a Video</a></li>
<li><a href="#td7">Buscador Web</a></li>
</ul>
</li>
<li class="menu-dropdown">
<a href="#" title="Enlaces a la table-board - Re-pulsa las categorías en la table-board principal" class="menu-item">Edición</a>
<ul class="submenu">
<li><a href="#td3">Editor Imagen</a></li>
<li><a href="#td4">Editor Video</a></li>
<li><a href="#td6">Editor Logo</a></li>
<li><a href="#td2">Editor CV</a></li>
</ul>
</li>
<li class="menu-dropdown">
<a href="#" title="Enlaces a Board, Blogs y RSS feed" class="menu-item">Contenido</a>
<ul class="submenu">
<li><a href="#" class="blog-item"><i class="fas fa-newspaper"></i>Board</a></li>
<li><a href="./blogs/_site/index.html" class="blog-item"><i class="fas fa-newspaper"></i>Blogs</a></li>
<li><a href="./blogs/_site/feed.xml"><i class="fas fa-rss"></i>RSS</a></li>
</ul>
</li>
</ul>
</div>
</nav>
