I want THIS (I mean, the same menu system): https://i.stack.imgur.com/O5EtV.gif
I have THIS (I mean, the same menu system): https://i.stack.imgur.com/ChI3e.gif
Here's the code I got:
body {
margin: 0;
font-family: Helvetica;
}
.topnav {
overflow: hidden;
background-color: rgb(159,44,40);
height: 48px;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
#myprofile {
position: absolute;
right: 12.5px;
}
#mailshortcut {
position: absolute;
right: 57.5px;
}
#notif {
position: absolute;
right: 102.5px;
width: 69px;
padding: 14px 16px;
text-align: left;
}
#calendarshortcut {
position: absolute;
right: 170px;
text-align: left;
}
#search {
position: absolute;
right: 215.5px;
width: 50px;
padding: 14px 14px;
}
.topnav .unee {
color: #CDB26E;
text-transform: lowercase;
font-weight: 800;
}
.active {
font-weight: 800;
text-transform: lowercase;
position: absolute;
left: 54px;
}
#univlogo {
left: 25px;
top: 4px;
position: absolute;
}
.thelogo {
position: absolute;
right: 285px;
top: 4px;
}
.badge {
position: absolute;
top:12px;
right: 8px;
padding: 5px 8px;
border-radius: 50%;
background-color: rgb(209,91,71);
color: white;
font-size: 10px;
}
#phonetablet {display: none;}
@media screen and (max-width: 990px) {
.column {
float: left;
width: 100%;
padding: 10px;
height: 300px;
}
#phonetablet {
display: block;
}
.topnav .responsive a .active {
display: none;
}
#desktop {
display: none;
}
#myprofile {
position: absolute;
right: 0px;
width: 57px;
}
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
#univlogo {
left: 40px;
top: 4px;
position: absolute;
}
.thelogo {
position: absolute;
right: 285px;
top: 4px;
}
}
#archive {
background: #6e8cd0;
color: white;
margin-top: 0;
}
.sidenav {
height: 100%;
width: 200px;
position: fixed;
z-index: 1;
top: 48px;
left: 0;
background-color: #ddd;
overflow-x: hidden;
padding-top: 20px;
border-right: solid 1px #ccc;
}
.sidenav a {
padding: 6px 6px 6px 32px;
text-decoration: none;
font-size: 25px;
color: rgb(88,88,88);
display: block;
font-size: 20px;
border-top: #ccc solid 1px;
}
.first {
position: absolute;
top: 0;
width: 200px;
border: none;
border-top: none;
border-bottom: none;
}
.second {
position: absolute;
top: 37px;
width: 200px;
}
.secondhalf {
position: absolute;
top: 74px;
width: 200px;
}
.third {
position: absolute;
top: 111px;
width: 200px;
}
.fourth {
position: absolute;
top: 148px;
width: 200px;
}
.fifth {
position: absolute;
top: 185px;
width: 200px;
}
.sixth {
position: absolute;
top: 222px;
width: 200px;
border-bottom: #ccc solid 1px;
}
.seventh {
position: absolute;
top: 259px;
width: 200px;
border-bottom: #ccc solid 1px;
}
.sidenav a:hover {
color: rgb(159,44,40);
background: white;
}<!DOCTYPE html><head><link rel="stylesheet" href="style.css"></head><body><div class="topnav" id="myTopnav"><img id="univlogo" src="file:///Users/Ari/Library/Mobile%20Documents/com~apple~CloudDocs/SIMON/SIMON%20TRABAJOS/ai%20doll%20face/Renault%202006/NewLogo.jpg" width="40" height="40"><img class="thelogo" id="desktop"src="file:///Users/Ari/Library/Mobile%20Documents/com~apple~CloudDocs/SIMON/SIMON%20TRABAJOS/ai%20doll%20face/Renault%202006/thelogo.png" height="40" width="60"><img class="thelogo" id="phonetablet" src="file:///Users/Ari/Library/Mobile%20Documents/com~apple~CloudDocs/SIMON/SIMON%20TRABAJOS/ai%20doll%20face/Renault%202006/shortened%20logo.png" height="40" width="60"><a href="file:///Users/Ari/Library/Mobile%20Documents/com~apple~CloudDocs/SIMON/SIMON%20TRABAJOS/ai%20doll%20face/Renault%202006/Users/AriadnaMi.html" id="desktop" style="color: #CDB26E;" class="active">UNEE</a></div> <div class="sidenav"><!-- Add font awesome icons --><a class="first" id="archive" href="#"> <i class="fa fa-archive"></i><strong> Histórico</strong></a><a class="second" href="file:///Users/Ari/Library/Mobile%20Documents/com~apple~CloudDocs/SIMON/SIMON%20TRABAJOS/ai%20doll%20face/Renault%202006/Users/AriadnaMi.html"><i class="fa fa-tachometer"></i> <strong>Mi espacio</strong></a><a class="secondhalf" href="#"><i class="fa fa-comments-o"></i> uneeChat</a><a class="third" href="#"><i class="fa fa-cloud"></i> uneeCloud</a><a class="fourth" href="#"><i class="fa fa-calendar"></i> Asistencia</a><a class="fifth" href="file:///Users/Ari/Library/Mobile%20Documents/com~apple~CloudDocs/SIMON/SIMON%20TRABAJOS/ai%20doll%20face/Renault%202006/Users/Ariadna%20Mi%20Evaluation.html"><i class="fa fa-check-square-o"></i> Evaluaciones</a><a class="sixth" href="#"><i class="fa fa-film"></i> Cuatrimestres</a><a class="seventh" href="#"><i style="font-style: italic !important;"class="fa fa-book"></i> Comisiones</a></div></body>"style.css" is the css code up here.
So, tell me what can I do to get the desired menu.
And I have tried once with a code made by myself, but I couldn't make it work. Plus, I have searched for the solution in all forums on the internet and in coding websites, but I still cannot find the answer.
Please. Will you be able to solve my problem? Thank u in advance!
PS: The links in there are the pictures.