you can use media queries for making your website content responsive for screen sizes , and for the collapse nav it’s available in bootstrap if you like to build the code using it
Solution 1 :
Problem :
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.
Comments
Comment posted by SLM Productions
I don’t understand. Did you see the gifs in the links?
Comment posted by Sara Nabil
@SLMProductions yes i see , i mean that by using media querie you can change the width of each div according to the screen size so you can set them in the same line or horizontally
Comment posted by SLM Productions
NO. I wanna make the menu collapsible in the phones and tablets, but fixed in computers. Not do what you are telling me to do.
Comment posted by SLM Productions
You gave me a wonderful idea on how to continue with the website! thank u and sorry for not listening 2 u before!
Comment posted by Sara Nabil
you are welcomed