Using the Plugin Responsive-Nav this is done in a simple way and without using framework like Bootstrap.
There are other options as well as the @Bruno tip
@Hugo set the height of the class . menu_topo_general as auto;
But you have to be very careful with good practices when making some part of a site responsive.
Let’s get down to business.
@-webkit-viewport { width: device-width; }
@-moz-viewport { width: device-width; }
@-ms-viewport { width: device-width; }
@-o-viewport { width: device-width; }
@viewport { width: device-width; }
.nav-collapse ul {
margin: 0;
padding: 0;
width: 100%;
display: block;
list-style: none;
}
.nav-collapse li {
width: 100%;
display: block;
}
.js .nav-collapse {
clip: rect(0 0 0 0);
max-height: 0;
position: absolute;
display: block;
overflow: hidden;
zoom: 1;
}
.nav-collapse.opened {
max-height: 9999px;
}
.disable-pointer-events {
pointer-events: none !important;
}
.nav-toggle {
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
@media screen and (min-width: 40em) {
.js .nav-collapse {
position: relative;
}
.js .nav-collapse.closed {
max-height: none;
}
.nav-toggle {
display: none;
}
}
header {
background: #616161;
position: fixed;
z-index: 3;
width: 100%;
left: 0;
top: 0;
}
.logo {
-webkit-tap-highlight-color: rgba(0,0,0,0);
text-decoration: none;
font-weight: bold;
line-height: 55px;
padding: 0 20px;
color: #fff;
float: left;
}
.mask {
-webkit-transition: opacity 300ms;
-moz-transition: opacity 300ms;
transition: opacity 300ms;
background: rgba(0,0,0, .5);
visibility: hidden;
position: fixed;
opacity: 0;
z-index: 2;
bottom: 0;
right: 0;
left: 0;
top: 0;
}
.android .mask {
-webkit-transition: none;
transition: none;
}
.js-nav-active .mask {
visibility: visible;
opacity: 1;
}
@media screen and (min-width: 40em) {
.mask {
display: none !important;
opacity: 0 !important;
}
}
fixed {
position: fixed;
width: 100%;
left: 0;
top: 0;
}
.nav-collapse,
.nav-collapse * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.nav-collapse,
.nav-collapse ul {
list-style: none;
width: 100%;
float: left;
}
@media screen and (min-width: 40em) {
.nav-collapse {
float: right;
width: auto;
}
}
.nav-collapse li {
float: left;
width: 100%;
}
@media screen and (min-width: 40em) {
.nav-collapse li {
width: auto;
}
}
.nav-collapse a {
-webkit-tap-highlight-color: rgba(0,0,0,0);
border-top: 1px solid white;
text-decoration: none;
background: #616161;
padding: 0.7em 1em;
color: #fff;
width: 100%;
float: left;
}
.nav-collapse a:active,
.nav-collapse .active a {
background: #323232;
}
.nav-collapse a:hover,
.nav-collapse .hover a {
background: #484848;
}
@media screen and (min-width: 40em) {
.nav-collapse a {
border-left: 1px solid white;
padding: 1.02em 2em;
text-align: center;
border-top: 0;
float: left;
margin: 0;
}
}
.nav-collapse ul ul a {
background: #484848;
padding-left: 2em;
}
@media screen and (min-width: 40em) {
.nav-collapse ul ul a {
display: none;
}
}
.nav-toggle {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-decoration: none;
text-indent: -300px;
position: relative;
overflow: hidden;
width: 60px;
height: 55px;
float: right;
}
.nav-toggle:before {
color: #fff; /* Edit this to change the icon color */
font: normal 28px/55px "responsivenav"; /* Edit font-size (28px) to change the icon size */
text-transform: none;
text-align: center;
position: absolute;
content: "\2261"; /* Hamburger icon */
text-indent: 0;
speak: none;
width: 100%;
left: 0;
top: 0;
}
.nav-toggle.active:before {
font-size: 24px;
content: "\78"; /* Close icon */
}
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<script src="http://www.barietoner.com.br/js/responsive-nav.js"></script>
</head>
<body>
<header>
<a href="#home" class="logo" data-scroll>Menu</a>
<nav class="nav-collapse">
<ul>
<li class="menu-item active"><a href="#home" data-scroll>Inicio</a></li>
<li class="menu-item"><a href="#about" data-scroll>Sobre</a></li>
<li class="menu-item"><a href="#projects" data-scroll>Projetos</a></li>
<li class="menu-item"><a href="#blog" data-scroll>Blog</a></li>
</ul>
</nav>
</header>
<script src="http://www.barietoner.com.br/js/fastclick.js"></script>
<script src="http://www.barietoner.com.br/js/scroll.js"></script>
<script src="http://www.barietoner.com.br/js/fixed-responsive-nav.js"></script>
</body>
Because of the Stack snippet the menu is apparently not functional, but it is working and can be seen here.
To check how the menu would look in different resolutions, you can
resize the browser window, use CTRL + SHIFT + M (google
Chrome) or check your browser developer tool ;)
Technically unviable, because today there are CSS frameworks that help you produce fully responsive software. For example - Bootstrap -
– Marcus Daniel
I understand, but I find it impossible to use a frameworks for something as simple as this menu
– Hugo Borges
@Hugo place the height of the class . menu_topo_general as auto. You left fixed with 50px so the background will never follow the Divs that go down, as they end up surpassing those 50px.
– Bruno Romualdo
ok blz ;) it worked
– Hugo Borges