Responsive Sidebar
How do I make an responsive sidebar?
What is a responsive sidebar? How do you make a responsive sidebar? This script and codes were developed by Thomas Hare on 17 November 2022, Thursday.
Responsive Sidebar - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Responsive Sidebar</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container-fluid"> <ul class="nav navbar-default col-xs-12 col-sm-2" id="sidebar" role="navigation"> <li class="navbar-brand col-xs-6 col-sm-12"><a href="#"><img alt="branding" src="https://s29.postimg.org/n9hckcrpz/cubefun.png"></a></li> <li class="visible-xs col-xs-6" id="phone"><a href="tel:480-955-1503"><span class="glyphicon glyphicon-phone"></span>(480) 955-1503</a></li> <li class="visible-xs col-xs-6" id="email"><a href="#"><span class="glyphicon glyphicon-envelope"></span>[email protected]</a></li> <div class="col-xs-12"> <li class="col-xs-6 col-sm-12"><a href="#"><span class="glyphicon glyphicon-tint"></span>Irrigation & Landscape</a></li> <li class="col-xs-6 col-sm-12"><a class="active" href="#"><span class="fa fa-soccer-ball-o"></span>Turf & Athletics</a></li> <li class="col-xs-6 col-sm-12"><a href="#"><span class="fa fa-tree"></span>Outdoor Living</a></li> <li class="col-xs-6 col-sm-12"><a href="#"><span class="fa fa-globe"></span>Agriculture</a></li> </div> <li class="col-xs-6 col-sm-12"><a href="#"><span class="fa fa-leaf"></span>Land & Resource Management</a></li> <li class="col-xs-6 col-sm-12"><a href="#"><span class="fa fa-bug"></span>Pest Control</a></li> </ul> <div class="hidden-xs col-sm-10" id="topbar"> <a href="tel:480-955-1503"><span class="glyphicon glyphicon-phone"></span>(480) 955-1503</a> <a href="#"><span class="glyphicon glyphicon-envelope"></span>[email protected]</a> </div> <ul class="col-sm-10 nav navbar-default" id="topnav" role="navigation"> <li><a href="#">Products</a></li> <li><a href="#">Locations</a></li> <li><a href="#">Services</a></li> <li><a href="#">Products</a></li> <li><a href="#">Education</a></li> <li><a href="#">News</a></li> </ul> <div class="landing_img hidden-xs col-sm-10"><img alt="Irrrigation products" class="col-xs-12 img-responsive" src="http://www.gratisography.com/pictures/219_1.jpg"></div>
</div>
</body>
</html>
Responsive Sidebar - Script Codes CSS Codes
body { background-color: #F0F0F0;
}
.container-fluid { min-width: 250px; padding: 0;
}
#sidebar { background-color: #669; padding: 1.5rem 0; z-index: 1000;
}
#sidebar [class*="col-"] { padding: 0;
}
#sidebar li { float: left;
}
#sidebar a:not(#phone) { color: #EEE; display: block; line-height: 3rem; padding: 1.25rem; text-decoration: none; transition: background-color 0.3s ease; width: 100%;
}
#sidebar a:hover, #sidebar a:focus, #sidebar .active { background-color: #69C;
}
#sidebar .navbar-brand { float: left; height: auto; padding: 1rem;
}
#sidebar .navbar-brand a { background: none !important; padding: 0; text-align: center;
}
#sidebar .navbar-brand img { max-height: 60px; max-width: 100%; width: auto;
}
#sidebar .glyphicon, #sidebar .fa { margin-right: 0.5rem;
}
#phone a, #email a { background: none !important; padding: 0.25rem !important;
}
#phone .glyphicon, #email .glyphicon { margin-right: 0.5rem;
}
#topbar a { display: inline-block; padding: 2rem;
}
#topbar .glyphicon { margin-right: 0.5rem;
}
#topnav li { display: inline-block;
}
.landing_img { height: 150px; overflow: hidden;
}
.landing_img img { margin-top: -30%; padding: 0;
}
Developer | Thomas Hare |
Username | tommyhare |
Uploaded | November 17, 2022 |
Rating | 3 |
Size | 2,460 Kb |
Views | 8,096 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Bootstrap V4 tabs | 2,297 Kb |
Space Ashley | 2,028 Kb |
Stock Card | 4,263 Kb |
Random Drawing | 15,816 Kb |
Bootstrap Form Fun | 2,424 Kb |
Micropush | 3,184 Kb |
Slate v2 | 14,201 Kb |
The Initiator | 2,695 Kb |
Material UI | 4,384 Kb |
12 Column Grid Framework In 12 Lines of Code | 2,210 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Direction-icon | Alexandremasy | 3,323 Kb |
Buttons for autumn | Nikazawila | 1,795 Kb |
Wavy Road with Dashes | Jonobr1 | 2,679 Kb |
Mosaic transition effect between two photos using jQuery | Stathisg | 2,518 Kb |
Apple website | Jds317 | 1,835 Kb |
Mostly Fluid | Mccreath | 3,308 Kb |
Mobile Nav Menu | AliKlein | 4,745 Kb |
Profile box | Daniesy | 2,766 Kb |
Vue.js Lazy Loading | Kjbrum | 3,620 Kb |
Product item | Mymahesh11 | 2,256 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!