I have a sidebar div and a content div that act as two CSS grid columns. The sidebar itself is composed of two more columns, but here's the gist of the setup:
<div class='site-wrap'>
<div class='sidebar'>
<div class='navbar'></div>
<div class='menu'>
<ul>
<li>menu item</li>
</ul>
</div>
</div>
<div class='content>
<h1>Hello world</h1></div>
</div>
</div>
Most of the CSS isn't important, but here's how the sidebar works:
.site-wrap {
display: grid;
grid-template-columns: 320px 1fr;
}
.sidebar {
display: grid;
grid-template-columns: 64px 1fr;
height: 100vh
}
Here's a JS Fiddle with a working implementation: https://jsfiddle.net/z4mLtwoy/
Currently, my solution to closing the menu is adding grid-template-columns: 72px 1fr to the site-wrap. This works, but I wish to add a transition. Since CSS grid doesn't have transitions yet, is there a CSS (maybe flexbox) or JS implementation that can offer a transition?
If you set a width or a max-width property to the menu element, it is possible to animate this property using CSS transitions. No need to use grids, you can use a flexbox layout to display them as columns.
body {
margin: 0;
padding: 0;
}
.site-wrap {
display: flex;
height: 100vh;
}
.sidebar {
display: flex;
}
.site-wrap .menu {
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
box-sizing: border-box;
height: 100vh;
margin: 0;
overflow: hidden;
padding: 0;
transition: max-width 0.5s ease;
max-width: 100px;
}
.site-wrap .navbar {
background: green;
height: 100vh;
width: 64px;
}
.menu li {
padding: 16px;
white-space: nowrap;
}
.content {
background: #EFEFEF;
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
flex-grow: 1;
padding: 16px;
}
.banner {
background: lightblue;
box-sizing: border-box;
padding: 16px;
height: 64px;
width: 100%;
}
#trigger {
display: none;
position: fixed;
}
.button {
background: blue;
color: white;
cursor: pointer;
margin: 8px;
padding: 8px 16px;
}
#trigger:checked ~ .site-wrap .menu {
max-width: 0px;
}
<input id='trigger' type='checkbox'>
<div class='banner'>
<label for='trigger' class='button'>Click me</label>
</div>
<div class='site-wrap'>
<div class='sidebar'>
<div class='navbar'></div>
<ul class='menu'>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
<div class='content'>
<h2>Hello world</h2>
</div>
</div>
Related
I've been looking around here for an example drop down nav menu that does three things:
When the user CLICK on the menu drop it shows the drop down (this works)
When the user CLICKS outside of the nav area or anywhere else on the page is closes an open drops (this works too)
When a user CLICKS on another drop down if one is already open, it closes the previously open drop and opens the new drop menu. <-(I'm stuck here).
Currently if you click on one drop menu, then click on another, the first stays open. I want any other menus that are open to close if you click on another drop down. But i want to retain the behavior that when the user clicks outside of the menu anywhere in the document it closes too.
I've found several SO posts that solve some of this. However sometimes they nav bar only has 1 drop down as an example. Other times for some reason the solution causes other issues in my nav. So i decided to create a new post.
Please note that i'm learning JS and jquery now.
Here is my code:
$(document).ready(function() {
$('.dropdown').click(function(e) {
e.stopPropagation();
// hide all dropdown that may be visible -
// this works but it breaks the functionality of toggling open and closed
// when you click on the menu item
e.preventDefault();
// close when click outside
$(this).find('.dropdown-content').toggleClass('open')
});
// Close dropdown when u click outside of the nav ul
$(document).click(function(e) {
if (!e.target.closest("ul") && $(".dropdown-content").hasClass("open")) {
$(".dropdown-content").removeClass("open");
}
})
});
.nav__topbar {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
min-height: 2em;
background: #fff;
}
.nav__links {
overflow: hidden;
display: flex;
align-items: center;
margin-left: auto!important;
a {
float: left;
display: block;
text-align: center;
padding: 14px 16px;
text-decoration: none;
&:hover {
color: #ccc;
}
}
.icon {
display: none;
}
}
.nav__links .dropdown .dropdown-content {
position: absolute;
max-width: 25%;
}
.dropdown .dropbtn,
.nav__links a {
font-size: 1.5em!important;
color: #222;
}
/* Upon click the menu should turn into a vertical stacked menu with a soft drop shadow */
.nav__links.vertical {
position: absolute;
display: flex;
flex-direction: column;
align-items: flex-start;
padding-top: 2em;
top: 50%;
left: 70%;
background-color: #fff;
z-index: 1;
border: 1px solid #f2f3f3;
border-radius: 4px;
background: #fff;
-webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}
.dropdown {
float: left;
overflow: hidden;
}
/* Codepen doesn't like when i nest styles */
.dropdown .dropbtn {
border: none;
outline: none;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropdown {
cursor: pointer;
display: block;
&:hover {
background-color: #444;
}
}
/* Style the dropdown content (hidden by default) */
.dropdown-content {
display: none;
background-color: #fff;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
width: 100%;
transition: all 0.25s ease-in;
transform: translateY(-10px);
}
/* Style the links inside the dropdown codepen doesn't like my nesting */
.dropdown-content a {
float: none;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content li,
.nav__links li,
.nav__links li a {
list-style-type: none;
text-decoration: none;
}
.dropdown li {
padding: 20px
}
.dropdown .dropdown-content.open {
display: block;
padding: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="nav__topbar">
<ul class="nav__links">
<li class="dropdown" data-hover="title">
<button class="dropbtn">community <span class="downBtn">▼</span>
</button>
<ul class="dropdown-content">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
</li>
<li>Menu item 2</li>
<li class="dropdown" data-hover="title">
<button class="dropbtn">menu <span class="downBtn">▼</span>
</button>
<ul class="dropdown-content">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
</li>
<li class="dropdown" data-hover="title">
<button class="dropbtn">menu <span class="downBtn">▼</span>
</button>
<ul class="dropdown-content">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
</li>
</ul>
</nav>
And here [is a codepen](https://codepen.io/lwasser/pen/BaVKYNX as well with the same code in case you want to play with the code.
UPDATE: the code above works with the fixes provided in the accepted answer below! The code had another bug which was drop down links didn't work. but i was able to remove / fix that by removing:
e.stopPropagation();
e.preventDefault();
Many thanks for the folks who helped below!! And i'll try to fully update my codepen with the hamburger as well as soon as I can in case that helps people.
You are almost there!
Store in a var the clicked element.
Remove the open class name from all elements except the clicked one.
Toggle the open class of the clicked element.
$(document).ready(function () {
$(".dropdown").click(function (e) {
e.stopPropagation();
e.preventDefault();
// 1. Store in a var the clicked element
var current_dropdown = $(this).find(".dropdown-content");
$(".dropdown-content").each(function() {
var element = $(this);
// 2. Remove the `open` class name from all elements except the clicked one.
if (!element.is(current_dropdown)) {
$(this).removeClass("open");
}
});
// 3. Toggle the open class of the clicked element.
current_dropdown.toggleClass("open");
});
// Close dropdown when u click outside of the nav ul
$(document).click(function (e) {
if (!e.target.closest("ul") && $(".dropdown-content").hasClass("open")) {
$(".dropdown-content").removeClass("open");
}
});
});
I forked your codepen:
https://codepen.io/Valeriu-Ciuca/pen/KKezYME
While adding the open class, remove open class of the other dropdowns
$(this).siblings('.dropdown').find('.dropdown-content').removeClass('open');
Finding the siblings with dropdown class and removing open class of the corresponding element.
$(document).ready(function () {
$(".dropdown").click(function (e) {
e.stopPropagation();
e.preventDefault();
// close when click outside
$(this).find(".dropdown-content").toggleClass("open");
$(this).siblings('.dropdown').find('.dropdown-content').removeClass('open');
});
// Close dropdown when u click outside of the nav ul
$(document).click(function (e) {
if (!e.target.closest("ul") && $(".dropdown-content").hasClass("open")) {
$(".dropdown-content").removeClass("open");
}
});
});
.nav__topbar {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
min-height: 2em;
background: #fff;
}
.nav__links {
overflow: hidden;
display: flex;
align-items: center;
margin-left: auto!important;
a {
float: left;
display: block;
text-align: center;
padding: 14px 16px;
text-decoration: none;
&:hover {
color: #ccc;
}
}
.icon {
display: none;
}
}
.dropdown .dropbtn, .nav__links a {
font-size: 1.5em!important;
color: #222;
}
/* Upon click the menu should turn into a vertical stacked menu with a soft drop shadow */
.nav__links.vertical {
position: absolute;
display: flex;
flex-direction: column;
align-items: flex-start;
padding-top: 2em;
top: 50%;
left: 70%;
background-color: #fff;
z-index: 1;
border: 1px solid #f2f3f3;
border-radius: 4px;
background: #fff;
-webkit-box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
}
.dropdown {
float: left;
overflow: hidden;
}
/* Codepen doesn't like when i nest styles */
.dropdown .dropbtn {
border: none;
outline: none;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropdown {
cursor: pointer;
display: block;
&:hover {
background-color: #444;
}
}
/* Style the dropdown content (hidden by default) */
.dropdown-content {
display: none;
background-color: #fff;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
width: 100%;
transition: all 0.25s ease-in;
transform: translateY(-10px);
}
/* Style the links inside the dropdown codepen doesn't like my nesting */
.dropdown-content a {
float: none;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content li, .nav__links li, .nav__links li a {
list-style-type: none;
text-decoration: none;
}
.dropdown li {
padding: 20px
}
.dropdown .dropdown-content.open {
display: block;
padding: 0;
}
.nav__links .dropdown .dropdown-content {
position: absolute;
max-width: 25%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><html>
<head>
</head>
<body>
<nav class="nav__topbar">
<ul class="nav__links">
<li class="dropdown" data-hover="title">
<button class="dropbtn">community <span class="downBtn">▼</span>
</button>
<ul class="dropdown-content">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
</li>
<li>Menu item 2</li>
<li class="dropdown" data-hover="title">
<button class="dropbtn">menu <span class="downBtn">▼</span>
</button>
<ul class="dropdown-content">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
</li>
<li class="dropdown" data-hover="title">
<button class="dropbtn">menu <span class="downBtn">▼</span>
</button>
<ul class="dropdown-content">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
</li>
</ul>
</nav>
</body>
</html>
https://codepen.io/brunhild_912/pen/MWQPErp
Here is my code. I am trying to enable the nav list toggle, but its not happening. Why? Any guidance or tips over this issue ae welcomed. I have tried many options but its being stubborn unfortunately.
HTML
<button type="button" class="nav-toggler">
<span></span>
</button>
<!--Navbar-->
<nav class="nav">
<ul>
<li class="nav=item">Home</li>
<li class="nav=item">About</li>
<li class="nav=item">Menu</li>
<li class="nav=item">Testimonials</li>
<li class="nav=item">Team</li>
<li class="nav=item">Contact</li>
</ul>
</nav>
CSS
.header .nav-toggler{
height: 40px;
width: 44px;
margin-right: 15px;
cursor: pointer;
border: none;
background-color: transparent;
display: flex;
align-items: center;
justify-content: center;
}
.header .nav-toggler.active{
position: absolute;
right: 0;
z-index: 1;
}
.header .nav{
position: fixed;
right: 0;
top: 0;
height: 100%;
width: 280px;
background-color: var(--main-color);
box-shadow: var(--shadow);
overflow-y: auto;
padding: 80px 0 40px;
transform: transform 0.5s ease;
transform: translateX(100%);
}
.header .nav .open{
transform: translateX(0%);
}
JavaScript
const navToggler = document.querySelector(".nav-toggler");
navToggler.addEventListener("click", toggleNav);
function toggleNav(){
navToggler.classList.toggle(".active");
document.querySelector(".nav").classList.toggle(".open");
}
The first issue you have is that you need to remove the . (period) from your class references (toggle(".active")). Making your toggleNav method like:
function toggleNav(){
navToggler.classList.toggle("active");
document.querySelector(".nav").classList.toggle("open");
}
Also, in your css you reference an object with a .header class that does not exist. So you would need to wrap your entire html with:
<div class='header'>
... [YOUR HTML CODE]
</div>
Also, in your css your declaration:
.header .nav .open
Should be:
.header .nav.open
You need a bit of css work for it to function smoothly but this should point you in the right direction.
There are some JS and css issues in your code. check following code.
const navToggler = document.querySelector(".nav-toggler");
navToggler.addEventListener("click", toggleNav);
function toggleNav(){
navToggler.classList.toggle("active");
document.querySelector(".nav").classList.toggle("open");
}
.header .nav-toggler{
height: 40px;
width: 44px;
margin-right: 15px;
cursor: pointer;
border: none;
background-color: transparent;
display: flex;
align-items: center;
justify-content: center;
background: red;
}
.header .nav{
position: fixed;
right: 0;
top: 0;
height: 100%;
width: 280px;
background-color: var(--main-color);
box-shadow: var(--shadow);
overflow-y: auto;
padding: 80px 0 40px;
transition: transform 0.5s ease;
transform: translateX(100%);
}
.header .nav.open{
transform: translateX(0%);
}
<div class="header">
<button type="button" class="nav-toggler">
<span></span>
</button>
<!--Navbar-->
<nav class="nav">
<ul>
<li class="nav=item">Home</li>
<li class="nav=item">About</li>
<li class="nav=item">Menu</li>
<li class="nav=item">Testimonials</li>
<li class="nav=item">Team</li>
<li class="nav=item">Contact</li>
</ul>
</nav>
</div>
const navToggler = document.querySelector(".nav-toggler");
navToggler.addEventListener("click", toggleNav);
function toggleNav(){
navToggler.classList.toggle("active");
document.querySelector("nav").classList.toggle("open");
}
.header .nav-toggler{
height: 40px;
width: 44px;
margin-right: 15px;
cursor: pointer;
border: none;
background-color: transparent;
display: flex;
align-items: center;
justify-content: center;
}
.header .nav-toggler.active{
position: absolute;
right: 0;
z-index: 1;
}
.header .nav{
position: fixed;
right: 0;
top: 0;
height: 100%;
width: 280px;
background-color: var(--main-color);
box-shadow: var(--shadow);
overflow-y: auto;
padding: 80px 0 40px;
transform: transform 0.5s ease;
transform: translateX(100%);
}
.header .nav.open{
transform: translateX(0%);
}
<div class="header">
<button type="button" class="nav-toggler active">
<span>button</span>
</button>
<!--Navbar-->
<nav class="nav open">
<ul>
<li class="nav=item">Home</li>
<li class="nav=item">About</li>
<li class="nav=item">Menu</li>
<li class="nav=item">Testimonials</li>
<li class="nav=item">Team</li>
<li class="nav=item">Contact</li>
</ul>
</nav>
</div>
Problems in code
classList.toggle(".active"); remove . in string like classList.toggle("active");
add <div> main div in side code class is .header
remove space in between .header .nav .open like- .header .nav.open in css
I am building up my skills by designing a mini web pag
so I started the navigation bar .
The button "Template" is supposed to change the view of the and display the lists but when I click it nothing happens.
Can anyone help me ?
The code:
html:
<div class="menu-toggle">
<h1 id="logo">PROTOCOL</h1>
<li class="right table" id="table"><a class="list template" href="#template" >☰</a></li>
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
<ul id="navigate" class="navigate">
<li><a class="list home" href="#home"> Home</a></li>
<li><a class="list" href="#conntacting">Contact us</a></li>
<li class="right"><a class="list sign-up" href="#signing">Sign up</a></li>
<li class="right"><a class="list" href="#logging">Log in</a></li>
</ul>
</nav>
CSS:
I designed my navigation bar to be displayed when the user press the "template" button
and hide it again by pressing the same button.
#media screen and ( max-width : 675px){
.container{
position: relative;
}
.menu-toggle{
text-align: center;
float: none;
display: block;
}
.template{
display: inline;
float: right;
padding: 0 40px;
margin: auto;
}
li.table{
left: 80px;
height: 20px;
}
.nav{
height: 90px;
}
.template:hover{
display: inline;
float: right;
padding: 0 40px;
margin: auto;
}
.navigate,.active{
text-align: center;
display: grid;
grid-template-columns: auto;
background-color: #b00000;
margin: 0;
width: 100%;
position: absolute;
top:90px;
transition: all 0.5 ease;
left: 100%;
}
li.right{
display: table;
padding: 0;
}
.menu-toggle.bar{
width: 25px;
height: 3px;
margin: 5px auto;
transition: all 0.3s ease-in-out;
box-sizing: border-box;
}
.active{
text-align: center;
display: grid;
grid-template-columns: auto;
background-color: #b00000;
margin: 0;
width: 100%;
position: absolute;
top:90px;
transition: all 0.5 ease;
}
}
JavaScript:
I brought the button "template" and "ul" by it ids
var template = document.getElementById('template');
var nav = document.getElementById('navigate');
template.onclick = function () {
if (nav.className === ('navigate')) {
nav.className += 'active';
} else {
nav.className = 'navigate';
};
You can use classList.toggle method.
Also, to tidy up things, I've removed the list buttons, changed menu font color to white, and removed the duplicated CSS on classes navigate and active: now .active just displays the navigation menu.
(The navigation menu was exploding the width when opened, and it was clobbering the menu icon, so I just removed position: absolute; and width: 100% from it)
Far from done here. Try to change things in steps, and to study the css rules on MDN, instead of doing many things at once.
var template = document.querySelector('.template');
var nav = document.querySelector('.navigate');
template.onclick = function() {
nav.classList.toggle('active');
};
#media screen and ( max-width: 675px) {
.container {
position: relative;
}
.menu-toggle {
text-align: center;
float: none;
display: block;
}
.template {
display: inline;
float: right;
padding: 0 40px;
margin: auto;
}
li.table {
left: 80px;
height: 20px;
}
.nav {
height: 90px;
}
.template:hover {
display: inline;
float: right;
padding: 0 40px;
margin: auto;
}
.navigate {
text-align: center;
display: none;
background-color: #b00000;
list-style: none;
margin: 0;
left: 0;
top: 90px;
transition: all 0.5 ease;
}
a.list:not(.template) {
text-decoration: none;
color: white;
}
li.right {
display: table;
padding: 0;
}
.menu-toggle.bar {
width: 25px;
height: 3px;
margin: 5px auto;
transition: all 0.3s ease-in-out;
box-sizing: border-box;
}
.active {
display: grid;
grid-template-columns: auto;
}
<div class="menu-toggle">
<h1 id="logo">PROTOCOL</h1>
<li class="right table" id="table"><a class="list template" href="#template">☰</a></li>
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
<nav id="navigate">
<ul class="navigate">
<li><a class="list home" href="#home"> Home</a></li>
<li><a class="list" href="#contacting">Contact us</a></li>
<li class="right"><a class="list sign-up" href="#signing">Sign up</a></li>
<li class="right"><a class="list" href="#logging">Log in</a></li>
</ul>
</nav>
your code has many mistakes please create button having template class.
however i updated your javascript for current use
template.onclick = function () {
if (nav.className === 'navigate') {
nav.classList.remove('navigate')
nav.className = 'active';
}
else {
nav.classList.remove('active')
nav.className = 'navigate';
}
}
}
I tried to implement Tab controls. However, when I run the page, the 1st instance will have all the fields from other tabs visible in the 1st tab itself. If I click on 2nd tab and then comeback to 1st tab, I works as expected.
View:
<style>
.tabs {
height: 1475px; width: 100%; text-align: left; }
.tab-nav-wrapper {
width: 100%; overflow-x: auto; position: relative !important; z-index: 999 !important; top: 3px; }
.tabs ul {
display: block; overflow-y: hidden; margin: 0px; }
.tabs ul li {
display: inline-block; border: 1px solid grey; border-bottom: 3px solid blue; background-color: white; }
.tabs ul li.active {
border: 1px solid black; border-bottom: 3px solid white; }
.tabs ul li a {
text-decoration: none; color: blue; padding: 10px; line-height: 25px; position: relative; font-weight: bold; }
.tab-content-wrapper {
position: relative !important; z-index: 1 !important; border: 3px solid blue; padding: 20px; min-height: 40px; }
.tab-content {
display: block; height: 700px; width: 100%; }
</style>
<body>
<div class="tabs">
<div class="tab-nav-wrapper">
<ul>
<li id="tab1Section" class="active">Corporation Details</li>
<li id="tab2Section">Contact Information</li>
<li id="tab3Section">Documents</li>
</ul>
</div>
<div class="tab-content-wrapper">
<div id="tab1" class="tab-content">
Content 1
</div>
<div id="tab2" class="tab-content">
Content 2
</div>
<div id="tab3" class="tab-content">
Content 3
</div>
</div>
</div>
</body>
<script>
$(document).ready(function () {
$(".tab-nav-wrapper li").click(function (e) {
e.preventDefault();
e.stopPropagation();
$(".tab-nav-wrapper li").removeClass("active");
$(this).addClass("active");
var target = $(this).find("a").attr("href");
$(".tab-content-wrapper").find(".tab-content").hide();
$(".tab-content-wrapper").find(target).show();
})
});
</script>
Below is the result I have. As you can see, last field in the tab 1 is the button. But, I am getting that Tab 2 connect below that and tab 3 content after tab 2.
When I click on tab 2 and comeback to tab 1, it works as expected.
Can someone, help me with this please?
Change to
.tab-content {
display: none;
height: 700px;
width: 100%; }
.tab-content + .tab-content{
display: none;
It should hide all tabs but first one.
than your script will activate necessary tab
As you can see on the gif below, my Tabs are expanding vertically. However I want them to expand horizontally. I already tried with white-space:nowrap, and other things that proved to work for other people, but it just doesn't work in my case.
Image Example
HTML:
<div class="l_tabs">
<div>
<ul id="myTab1" class="nav nav-tabs bordered">
<li class="tab-add">
<li class="contentTab">
<li class="contentTab">
<li class="contentTab">
<li class="contentTab">
<li class="contentTab">
<li class="contentTab active">
</ul>
</div>
</div>
CSS:
.l_tabs {
background: #474544 none repeat scroll 0 0;
display: block;
height: 57px;
overflow: auto;
white-space: nowrap;
width: 500px;
}
.l_tabs > div {
background-color: white;
height: 40px;
padding-top: 4px;
width: 99%;
}
Change your width in .l_tabs{ }
width: 500px;
to
width: 100%;
Updated
Check this fiddle for your reference.
That would do it!
You don't provide the CSS for the li, but I guess there's a float assigned to it, that's why the div stacked to bottom, you need to remove it and apply display: inline-block instead.
.tab-add,
.contentTab {
float: none;
display: inline-block;
}
Try this:
.l_tabs > div {
overflow-x: auto;
white-space: nowrap;
}
Full Code:
.l_tabs {
background: #474544 none repeat scroll 0 0;
display: block;
height: 57px;
width: 500px;
}
.l_tabs > div {
background-color: #fff;
height: 40px;
padding-top: 4px;
width: 100%;
overflow-x: auto;
white-space: nowrap;
}
.l_tabs li {
display: inline-block;
padding: 0 50px;
}
Ref: https://jsbin.com/gogayo/edit?html,css,output