How can I convert an already created sidebar into a responsive design? - javascript

The sidebar looks like the below snippet. What should i add to this code, like a wrapper to make it responsive in mobile screen?
.sidebar{
position: fixed;
left: 0px;
width: 314px;
height: 100vh;
background-color: #002438;
box-shadow: hsl(0, 0%, 75%) 7px 2px 15px;
}
.sidebar li{
margin-top: 45px;
font-size: 24px;
color: white;
text-align: center;
text-decoration: none;
}
.sidebar a{
color: white;
text-decoration: none;
}
.sidebar li :hover{
color: #00fff2;
}
.sidelist{
display: flex;
flex-direction: column;
padding-top: 20px;
margin-top: 40px;
text-align: center;
}
.active a{
width: 230px !important;
display: block;
margin: 10px auto;
font-weight: bold;
padding: 5px 10px;
border-radius: 50px;
background: #fff;
}
<div class="sidebar">
<ul class="sidelist">
<li>DASHBOARD</li>
<li class="active">CUSTOMER</li>
<li>LEADS</li>
<li>REPORTS</li>
<li>SMS</li>
<li>PROFILE</li>
</ul>
</div>
This is my sidebar. How do i turn it into a hamburger icon in mobile screens, which when clicked or dragged, moved from left to right side with all the sidebar.

What I might do is use a media query. If you want this to just be an icon button with the little hamburger icon, make the icon button above or below where you made this sidebar. In your css that you have there, give it another class maybe something like this:
.menuIcon {
display: 'none';
/* your other styles here */
}
Then the media query (you can make more than one) do something like this:
#media only screen and (max-width: 1000px) {
.menuIcon {
/* styles */
}
.sidebar {
display: 'none';
/* styles */
}
}
Of course change the media query to match what size screen you want to adjust for, and style how you want.

Related

How can I hide the searchBar in a responsive navbar?

I have a problem with the searchbar not hiding when reducing the size of the window. Maybe there's a better way to solve the problem but hiding the searchbar, however, this is my first webpage project... sorry for the many mistakes!
My intention is to hide the searchbar (or maybe relocate it) so that the new "hamburger" button takes place.
Here you have a snippet of the navbar code:
/* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
/* Logo resize */
.logo-container {
max-width: 0px;
max-height: 0px;
margin-bottom: -3px;
left: 0;
position: absolute;
}
.logo {
width: 180px;
height: 48.5px;
object-fit: cover;
object-position: 50% 42%;
}
/* Add a black background color to the top navigation */
.topnav {
background-color: #333;
margin-top: 130px;
overflow: hidden;
margin-right: -10px;
margin-left: -10px;
}
/* Style the links inside the navigation bar */
.topnav a {
float: left;
position: relative;
left: 42%;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}
/* Change the color of links on hover */
.topnav a:hover {
background-color: rgb(228, 228, 228);
color: rgb(68, 66, 70);
}
/* Add an active class to highlight the current page */
.topnav a.active {
background-color: #616161;
color: rgb(228, 228, 228);
}
/* Style the search box inside the navigation bar */
.topnav input[type=text] {
float: right;
position: relative;
right: 40px;
padding: 6px 10px;
border: none;
margin-top: 10px;
margin-right: 16px;
font-size: 17px;
border-radius: 10px;
}
.topnav .search-container button {
float: right;
position: absolute;
right: 15px;
padding: 6px 10px;
margin-top: 10px;
background: #ddd;
font-size: 17px;
border: none;
cursor: pointer;
border-radius: 50%;
}
.topnav .search-container button:hover {
background: #ccc;
border-radius: 50%;
}
/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
display: none;
}
/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
#media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
}
}
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
#media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
.topnav input[type=text] {
border: 1px solid #ccc;
}
}
<!-- The Navbar -->
<div class="topnav" id="myTopnav">
<!-- The logo -->
<div class="logo-container">
<img class= "logo" src="https://img.freepik.com/vector-gratis/logo-lorem-ipsum-eslogan-aqui-plantilla-arte-diseno_647943-2.jpg?w=2000"
alt="logo">
</div>
<!-- The buttons -->
HOME
NEWS
HISTORY
GUIDE
<!-- The searchbar -->
<div class="search-container">
<form action="/action_page.php">
<input type="text" placeholder="Search.." name="search">
<button type="submit"><i class="fa fa-search"></i></button>
</form>
</div>
<!-- Responsiveness to small window with a button -->
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
Sorry again for my mistakes and terrible style... I guess we all start somewhere! hahaha
Thanks in advance!
You could just use a media query(as you already have) and hide the whole div when below a certain viewport
ex:
#media screen and (max-width: 600px) {
.search-container {
display: none;
}
}
i had a similar problem, i found out that when using bootstrap and MUI together , it messes many things .. so i would recommend to uninstall one of the two ..

navbar, problem with the responsive navigation

When my navigation bar is displayed on a small screen (mobile example), it doesn't appear as expected, I cannot fix the problem
I tried to change my css several times but it gets worse
Can u help me please :)
navbar responsive test
#media( max-width: 1200px){
header{
/*margin: 20px;*/
}
}
#media( max-width: 768px){
.menu-toggle{
display: block;
width: 40px;
height: 40px;
margin: 10px;
float: right;
cursor: pointer;
text-align: center;
font-size: 30px;
color: #069370;
}
.menu-toggle:before{
content: '\f0c9';
font-family: FontAwesome;
line-height: 40px;
}
.menu-toggle.active:before{
content: '\f00d';
font-family: FontAwesome;
line-height: 40px;
}
nav {
display: none;
}
nav.active {
display: block;
width: 100%;
}
nav.active ul {
display: block;
}
nav.active ul li a {
margin: 0;
}
}
The elements in your <header> element a floated and so the menu doesn't know where the element stops and this causes CSS to not know how to compute the height of that element
A quick fix to that would be to put overflow: hidden:
<header style="overflow: auto"> ... </header>
You can learn a lot about this from this elaborated StackOverflow answer link to answer
i have add overflow: auto on my header it s works but i can t fixe the menu panel too when i click on the button menu toggle , the text go right and i can t see him.
i think i have a problem with my "float: right" in the class .menu-toggle ;
the text isn't show in the mobile display, he go to the right and he dont take the good place...
i want to place the menu panel one below the other
home
about
services
navbar responsive with overflow : auto
#media( max-width: 1200px){
header{
/*margin: 20px;*/
overflow: auto;
}
}
#media( max-width: 768px){
.menu-toggle{
display: block;
width: 40px;
height: 40px;
margin: 10px;
float: right;
cursor: pointer;
text-align: center;
font-size: 30px;
color: #069370;
}
.menu-toggle:before{
content: '\f0c9';
font-family: FontAwesome;
line-height: 40px;
}
.menu-toggle.active:before{
content: '\f00d';
font-family: FontAwesome;
line-height: 40px;
}
nav {
display: none;
}
nav.active {
display: block;
width: 100%;
}
nav.active ul {
display: block;
}
nav.active ul li a {
margin: 0;
}
}
You just need to set a bigger width for your container.
To fix your issue:
#media( max-width: 768px){
.menu-toggle{
width: 400px;
}
}
Hi Can you please follow Below Html Structure :
<header>
Logo
<div class="menu-toggle"></div>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Team</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</nav>
<div class="clearfix"></div>
</header>

Close navigation when navigation item is clicked

My goal is for my hamburger menu to close when an item is clicked inside of it. As of right now, the menu only uses html and css.
The difference between this nav bar and others is that mine is created from a input checkbox html element, what i need is for my checkbox to uncheck when a link is clicked inside of the hamburger. This should close the entire menu just like it would if i clicked on the hamburger. Also, could you explain what and why the javascript does what it does, i don't have much experience with javascript, thanks. :)
I also made the checkbox visible just so that we can have a better understanding of whats going on.
My CSS:
/* navigation menu */
.nav {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 70px;
line-height: 70px;
text-align: right;
z-index: 10000;
background-color: #ffffff;
border-bottom: 1px solid #eaeaeb;
}
.menu {
margin: 0 30px 0 0;
}
/* link items */
.menu a {
clear: right;
line-height: 70px;
text-decoration: none;
margin: 0 10px;
text-align: center;
color: #33334d;
background-color: #ffffff;
}
.menu a:hover {
background-color: #c2c2d6;
}
/* hamburger properties */
label {
float: right;
display: none;
width: 26px;
line-height: 70px;
margin: 0 40px 0 0;
font-size: 36px;
}
/* checkbox */
#toggle {
}
#media only screen and (max-width: 1075px) {
/* hamburger properties */
label {
display: block;
cursor: pointer;
}
/* nav menu properties */
.menu {
width: 100%;
display: none;
text-align: center;
}
/* link items */
.menu a {
display: block;
margin: 0px;
border-bottom: 1px solid #eaeaeb;
}
/* makes links show when checkbox is checked */
#toggle:checked + .menu {
display: block;
}
}
My HTML:
<div class="nav">
<label for="toggle">☰</label>
<input type="checkbox" id="toggle"/>
<div class="menu">
example
example
example
example
example
example
example
</div>
</div>
Javscript may not actually be required, depending on your needs.
If you give the div containing your nav links an ID you can target this with an a tag setting the href to the ID. Then you can use the :target selector to change the visibility of our navigation div.
/* navigation menu */
.nav {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 70px;
line-height: 70px;
text-align: right;
z-index: 10000;
background-color: #ffffff;
border-bottom: 1px solid #eaeaeb;
}
.menu {
margin: 0 30px 0 0;
}
/* link items */
.menu a {
clear: right;
line-height: 70px;
text-decoration: none;
margin: 0 10px;
text-align: center;
color: #33334d;
background-color: #ffffff;
}
.toggle {
text-decoration: none;
color: #33334d;
}
.menu a:hover {
background-color: #c2c2d6;
}
/* hamburger properties */
.toggle,
label {
float: right;
display: none;
width: 26px;
line-height: 70px;
margin: 0 40px 0 0;
font-size: 36px;
}
/* checkbox */
#toggle {}
#media only screen and (max-width: 1075px) {
/* hamburger properties */
.toggle,
label {
display: block;
cursor: pointer;
}
/* nav menu properties */
.menu {
width: 100%;
display: none;
text-align: center;
}
/* link items */
.menu a {
display: block;
margin: 0px;
border-bottom: 1px solid #eaeaeb;
}
/* makes links show when checkbox is checked */
#menu:target,
#toggle:checked+.menu {
display: block;
}
}
<div class="nav">
<a class="toggle" href="#menu">☰</a>
<div class="menu" id="menu">
example
example
example
example
example
example
example
</div>
</div>
Wow, interesting. It's a pretty weird practise, what you have, but it could work. You can make menu show/hide by input checked. Very interesting. I have never think of like that.
But also you will need a piece of JS code.
By CSS you can handle some basic selector like :hover, :focus, :active etc. In our your case you also make some interesting click event. But checkbox is not for that purpose.
Click and other event are handled by JS (more https://www.w3schools.com/js/js_events.asp).
So in our case, we select all links:
var links = document.querySelectorAll('.menu a');
then we have to add click event to every link, which will set our input to checked="false" = close menu.
This JS code will only work, when selected links are rendered, so you need to put this piece of code to the end of your html file before </body> or use window.onload...
var links = document.querySelectorAll('.menu a');
var linksLength = links.length
for(var i = 0; i < linksLength; i++) {
links[i].addEventListener('click', function() {
document.getElementById('toggle').checked = false;
});
}
/* navigation menu */
.nav {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 70px;
line-height: 70px;
text-align: right;
z-index: 10000;
background-color: #ffffff;
border-bottom: 1px solid #eaeaeb;
}
.menu {
margin: 0 30px 0 0;
}
/* link items */
.menu a {
clear: right;
line-height: 70px;
text-decoration: none;
margin: 0 10px;
text-align: center;
color: #33334d;
background-color: #ffffff;
}
.menu a:hover {
background-color: #c2c2d6;
}
/* hamburger properties */
label {
float: right;
display: none;
width: 26px;
line-height: 70px;
margin: 0 40px 0 0;
font-size: 36px;
}
/* checkbox */
#toggle {
}
#media only screen and (max-width: 1075px) {
/* hamburger properties */
label {
display: block;
cursor: pointer;
}
/* nav menu properties */
.menu {
width: 100%;
display: none;
text-align: center;
}
/* link items */
.menu a {
display: block;
margin: 0px;
border-bottom: 1px solid #eaeaeb;
}
/* makes links show when checkbox is checked */
#toggle {
display: none;
}
#toggle:checked + .menu {
display: block;
}
}
<label class="nav" for="toggle">
<div class="icon">☰</div>
<input type="checkbox" id="toggle"/>
<div class="menu">
example
example
example
example
example
example
example
</div>
</label>

Responsive Navigation Not Showing All Items

Hello I am currently learning responsive design and I am trying to make a responsive navigation bar which turns in to a menu when visited on a phone or mobile device! Everything works except not all the navigation items show on the mobile device and I am not sure why! This is the code:
<div class="container">
<div class="navbar">
<ul style="padding-left: 0px;">
<li class="logo"> RONNIE<b>GURR</b></li>
<section class="div_navbar_items">
<li class="navbar_items"> HOME </li>
<li class="navbar_items"> ABOUT US </li>
<li class="navbar_items"> GALLERY </li>
<li class="navbar_items"> SHOP </li>
<li class="navbar_items"> CONTACT </li>
</section>
<li class="icon">
☰
</li>
</ul>
</div>
</div>
<script src="js/responsive.js"></script>
Here is the CSS:
.container {
margin: auto;
width: 90%;
}
.navbar {
position: fixed;
z-index: 100;
overflow: hidden;
margin: auto;
width: 100%;
left:0;
top:0;
}
.navbar li.logo,
.navbar li.navbar_items {
list-style-type: none;
display: inline-block;
}
.navbar li a {
margin-top: 50px;
font-family: 'Cabin', sans-serif;
font-size: 1.3em;
color: white;
font-weight: 700px;
display: inline-block;
text-align: center;
padding: 10px 16px;
text-decoration: none;
}
.navbar li.navbar_items a:hover {
border-bottom-style: solid;
border-bottom-color: white;
/* padding-bottom: 5px; */
}
.navbar li.icon {
display: none;
}
.div_navbar_items {
float: right;
padding-right:1%;
}
/*Start of mobile nav*/
#media screen and (max-width:875px) {
.navbar li.navbar_items {
display: none;
}
.navbar li.icon {
float: right;
display: inline-block;
position: absolute;
right: 0;
top: 19px;
}
}
#media screen and (max-width:875px) {
.navbar.responsive {
position:fixed;
width: 100%;
height: 100vh;
background-color: rgba(236,201,205, 1);
transition: background-color .6s;
}
.navbar.responsive li.logo {
floatL: left;
display: block;
}
.navbar.responsive .div_navbar_items {
float: none;
padding-right:0;
}
.navbar.responsive li.navbar_items {
display: block;
padding: 50px;
font-size: 25px;
}
.navbar.responsive li.navbar_items a {
display: block;
text-align: center;
}
.navbar.responsive li.navbar_items a:hover{
color:#17171e;
border-bottom-color: transparent;
}
}
/*End of mobile nav*/
And here is the JS:
function navBarFunction() {
document.getElementsByClassName("navbar")[0].classList.toggle("responsive");
}
codepen: https://codepen.io/anon/pen/JyEoWY
I think this will get you in the right direction, then you can decide upon what you'd like to do from here. You are setting your navbar to be 100vh, which is 100% height of the screen, so you need to make sure your padding and margin on your nav elements aren't so much. Try removing any margin and padding from these two styles, then adapt it on your own from here. If you don't want to change this stuff, refer to the second part of my answer, and just make the nav scrollable.
.navbar li a {
margin-top: 0px;
}
#media screen and (max-width: 875px) {
.navbar.responsive li.navbar_items {
display: block;
padding: 0px;
font-size: 25px;
}
}
Also, if you look in .navbar styling (line 8 of your codepen) you have it set to overflow: hidden. You can update your .navbar.responsive class with overflow of scroll to get it to work.
#media screen and (max-width:875px) {
.navbar.responsive {
position:fixed;
width: 100%;
height: 100vh;
background-color: rgba(236,201,205, 1);
transition: background-color .6s;
overflow: scroll; // Set overflow to scroll
}
}
I guess this happenes because you make .navbar.responsive {
position:fixed;
And you just can't watch all content of block, because it's not allow to scroll. When i change this property to absolute, i looked all items of menu.
By the way, you write CSS property font-weight with px, font-weight: 700px, but it shouldn't be px, it's relative value: font-weight: 700

Responsive Navigation without duplicate links?

Recently I've been attempting to make my own responsive navigation and have managed to, but now i'm wanting to jump the next hurdle, which is to create the same navigation but without having two seperate link lists.
Now I've tried various methods to get this to work, including using javascript to add / remove classes when at a certain width, which worked to a certain extent, but only if i resized the browser for it to find out the browser width, which obviously has it's flaws when you can't resize the browser when on a mobile device.
The code i've currently got is -
HTML
<nav class="mainnav" role="navigation">
<div class="desktopnav" id="navigation">
<ul class="mainlinks">
<li role="menuitem">Home</li>
<li role="menuitem">About</li>
<li role="menuitem">My Work</li>
<li role="menuitem">Contact</li>
</ul>
</div>
<div class="mobilenav">
<button class="navtoggle">toggle</button>
<ul class="mainlinks">
<li role="menuitem">Home</li>
<li role="menuitem">About</li>
<li role="menuitem">My Work</li>
<li role="menuitem">Contact</li>
</ul>
</div>
</nav>
CSS
.mainnav {
width: 100%;
height: auto;
background: #64137B; }
/*Desktop nav*/
.desktopnav {
display: block; }
.desktopnav ul.mainlinks {
list-style-type: none;
margin: 0 auto;
padding: 0;
display: table;
min-height: 50px; }
.desktopnav ul.mainlinks li {
display: table-cell;
vertical-align: middle;
text-align: center;
padding: 10px;
border-right: 1px solid #A37EAE; }
.desktopnav ul.mainlinks li:first-child {
border-left: 1px solid #A37EAE; }
.desktopnav ul.mainlinks a {
color: white;
text-decoration: none; }
.mobilenav, .desktopnav {
min-height: 50px;
height: auto; }
/*Mobile Nav*/
.mobilenav {
text-align: center; }
.mobilenav, button.navtoggle {
display: none; }
.mobilenav ul.mainlinks {
display: none;
list-style: none;
padding-left: 0px; }
#media (max-width: 768px) {
.desktopnav {
display: none; }
.mobilenav {
display: block; }
button.navtoggle {
display: table-cell;
margin: 5px auto;
text-align: center;
border: 0;
text-indent: 200%;
overflow: hidden;
background: white url(../../images/navbutton.png) center no-repeat;
border: 1px solid #ddd;
border-radius: 5px;
background-size: 80%;
width: 40px;
height: 40px;
outline: none;
opacity: 1;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out; }
button.navtoggle:hover {
opacity: 0.7; }
ul.mainlinks {
background: #8421A0;
margin: 0px;
padding: 0px 0px; }
ul.mainlinks li {
padding: 15px 10px;
border-bottom: 1px solid #A37EAE; }
ul.mainlinks a {
color: white;
text-decoration: none; }
}
Has anyone got any ideas on what i might be able to do, to fix my problem?
Thanks
You need to use media queries, that way you can set position values entirely based on the size of the screen:
.nav {
/* some common properties here */
/* some positioning properties here */
/* these will be set for everything and may need over-riding */
}
#media (min-width: 800px) {
.nav {
/* some completely different positioning properties here */
/* remember, some may be over-rides */
}
}
Declaring the common properties in a class then over-riding as the screen gets wider is basic mobile first best practice - it enables you to handle tough layout issues with room to expand, rather than getting everything perfect large and finding it's hard to squeeze down. In some cases, you may need to use a declaration like this:
#media (min-width: 480px) and (max-width: 800px) {
/* properties */
}

Categories