My mobile css hamburger menu isn't working, if I click on it it doesn't stay open, and I have no clue on how to open the dropdown menu inside the hamburger menu. Also my nav title (.logo) is hard to center, does anyone have a solution for that?
JSFidlle for easy viewability (Mobile css & Style.css in are merged here only the background is missing)
Thanks for any help, and sorry if my code looks messy :/
My Code:
Index.html file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello, I'm Sten</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/mobile.css">
<link rel="stylesheet" href="css/animate.css">
</head>
<body>
<div class="nav animated slideInDown">
<img src="img/hamburger.png" alt="" class="hamburger">
<div class="logo">
<h1>STEN</h1>
</div>
<ul>
<li>
PAGE
<ul>
<li>DROPDOWN</li>
<li>DROPDOWN</li>
</ul>
</li>
<li>PAGE</li>
<li>PAGE</li>
<li>PAGE</li>
</ul>
</div>
<div class="landing animated fadeIn">
<div class="container">
<h1>STEN</h1>
<hr>
<p>I'M A</p>
<h2>-OCCUPATION-</h1>
<button>KNOP</button>
<button>KNOP</button>
</div>
<div class="scroll" onClick="">
</div>
</div>
<div class="about">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script scr="main.js"></script>
</body>
</html>
Style.css (Master css file)
* {
padding: 0;
margin: 0;
border: 0;
}
html, body {
height: 100%;
width: 100%;
font-family: 'Open Sans', sans-serif;
}
h1 {
font-weight: 300;
font-size: 50px;
}
.nav {
width: 100%;
height: 10%;
background-color: #F2F2F2;
border-bottom: 1px solid #E4E4E4;
text-align: center;
position: fixed;
z-index: 999;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.nav .hamburger {
display: none;
}
.nav .logo {
float: left;
margin-left: 10%;
}
.nav .logo h1 {
color: #000;
line-height: 10vh;
font-size: 32px;
}
.nav > ul {
height: 100%;
width: auto !important;
display: inline-block;
float: right;
margin-right: 10%;
}
.nav > ul > li {
display: inline-block;
list-style: none;
padding: 0 20px 0 20px;
vertical-align: top;
position: relative;
}
.nav > ul > li:first-child > a:after {
width: 6px;
height: 6px;
border-bottom: 1px solid #000;
border-right: 1px solid #000;
position: absolute;
margin-top: calc(5vh - 5px);
margin-left: 8px;
content: "";
transform: rotate(45deg);
}
.nav > ul > li > ul {
display: none;
margin-left: -50%;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.nav > ul > li > ul > li {
list-style: none;
background-color: #F2F2F2;
padding: 0 20px 0 20px;
position: relative;
}
.nav li:hover > ul {
display: block;
position: absolute;
}
.nav ul a {
color: #000;
text-decoration: none;
line-height: 10vh;
}
.nav a:hover {
color: #999;
}
.landing {
padding-top: 10vh;
height: 90%;
width: 100%;
background: url('../img/bg.jpg');
background-size: cover;
background-position: center;
position: fixed;
text-align: center;
color: #FFF;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
z-index: 0;
}
.landing:before {
content: " ";
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.4);
}
.landing .container {
position: absolute;
top: 50%;
left: 50%;
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
width: 100%;
}
.landing .container h1 {
letter-spacing: 6px;
font-size: 78px;
}
.landing .container p {
font-size: 20px;
font-weight: 100;
}
.landing hr {
width: 300px;
margin: 25px 0 25px 0;
margin-left: calc(50% - 150px);
border-bottom: 3px solid #EF2D56;
}
.landing button {
width: 200px;
padding: 24px;
margin-top: 20px;
position: relative;
color: #FFF;
background-color: transparent;
border: 1px solid #FFF;
}
.landing button:first-child {
margin-right: 1%;
}
.landing button:last-child {
margin-left: 1%;
background-color: #EF2D56;
border: 1px solid #EF2D56;
}
.landing button:hover {
cursor: pointer;
}
.landing button:focus {
outline: none;
}
.scroll {
width: 16px;
height: 16px;
border-bottom: 1px solid #FFF;
border-right: 1px solid #FFF;
position: absolute;
content: " ";
transform: rotate(45deg);
bottom: 0;
margin-bottom: 30px;
margin-left: calc(50% - 8px);
cursor: pointer;
}
.about {
height: 200%;
width: 100%;
background-color: #FFF;;
z-index: 50;
position: absolute;
margin-top: 100vh;
}
Mobile css file
#media only screen and (max-device-width: 850px){
.nav .hamburger {
height: 6vh;
width: 6vh;
display: inline-block;
float: left;
margin: 2vh 0 0 2vh;
}
.nav .logo {
position: relative;
}
.nav > ul {
display: none;
float: none;
margin-top: 10vh;
}
.nav .hamburger:hover ~ ul {
display: block;
width: 100%;
margin: 0;
}
.nav > ul > li {
display: block;
background-color: #F2F2F2;
}
.about {
margin-top: 100vh;
}
}
Change the way you wrote media query, Try this way:
#media only screen and (max-width: 850px) {
//Your mobile CSS code
}
See the fiddle: https://jsfiddle.net/7xjyutuf/1/
chnage your media query into this #media only screen and (max-width:850px){}.
If you are using the max-device-width, when you change the size of the browser window on your desktop, the CSS style won't change to different media query setting;
If you are using the max-width, when you change the size of the browser on your desktop, the CSS will change to different media query setting and you might be shown with the styling for mobiles, such as touch-friendly menus.
for more info you can visit this http://www.menucool.com/3613/max-device-width-vs-max-width-Which-one-should-I-use
check this fiddle https://jsfiddle.net/ok7hmodo/1/
For making the menu static use Jquery.Please check this https://jsfiddle.net/7xjyutuf/10/.
This is a css only solution.You have to make the ul display block when user hovers on it
https://jsfiddle.net/tucsgohy/1/
Related
So i have made a website with HTML and CSS. It has different effects like the parallax effect(a very simple version of it), transparent navbar, and now I am trying to make my Navbar responsive. Everything works, but my hamburger menu is very far to the left and when I find a way to move it, it doesnt work after i moved it.
As you can see it is very close to the top of the screne and so far to the left that it is past the logo. I want it to stay to the right even if i made the screen smaller ofr bigger, like it moves with the screen when i move it.
This is my css code:
#font-face {
font-family: 'Poppins';
src: url(Fonts/Poppins-Regular.ttf
}
#font-face {
font-family: 'Comfortaa';
src: url(Fonts/Comfortaa-VariableFont_wght.ttf);
}
#font-face {
font-family: 'DancingScript';
src: url(Fonts/DancingScript-VariableFont_wght.ttf);
}
* {
padding: 0;
margin: 0;
color: #A6808C;
box-sizing: border-box;
}
body {
background-color: #565264;
font-family: Poppins;
}
html {
overflow: scroll;
overflow-y: hidden;
}
::-webkit-scrollbar {
width: 0%;
}
nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 80px;
padding: 10px 90px;
box-sizing: border-box;
background: rgba(0, 0, 0, 0.4);
border-bottom: 0px solid #fff;
z-index: 9999
}
nav .logo {
padding: -22px 20px;
height: 50px;
float: left;
}
nav ul {
list-style: none;
float: right;
margin: 0;
padding: 0;
display: flex;
}
nav ul li a {
line-height: 60px;
color: #fff;
padding: 12px 30px;
text-decoration: none;
font-size: 25px;
}
nav ul li a:hover {
background: rgba(0,0,0,0.1);
border-radius: 5px;
}
.text {
font-size: 2rem;
padding: 2rem;
background-color: #565264;
color: whitesmoke;
}
.title {
font-size: 7rem;
color: whitesmoke;
text-shadow: 0 0 5px black;
}
.background {
position: absolute;
height: 100%;
width: 100%;
object-fit: cover;
z-index: -1;
transform: translateZ(-10px) scale(3);
background-repeat: no-repeat;
}
header {
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
transform-style: preserve-3d;
z-index: -1;
}
.wrapper {
height: 100vh;
overflow-y: auto;
overflow-x: hidden;
perspective: 10px;
}
.hamburger {
position: relative;
width: 30px;
height: 4px;
background: #fff;
border-radius: 10px;
cursor: pointer;
z-index: 2;
transition: 0.3s;
}
.hamburger:before, .hamburger:after {
content: "";
position: absolute;
height: 4px;
right: 0;
background: #fff;
border-radius: 10px;
transition: 0.3s;
}
.hamburger:before {
top: -10px;
width: 20px;
}
.hamburger:after {
top: 10px;
width: 20px;
}
.toggle-menu {
position: absolute;
width: 30px;
height: 100%;
z-index: 3;
cursor: pointer;
opacity: 0;
}
.hamburger, .toggle-menu {
display: none;
}
.navigation input:checked ~ .hamburger {
background: transparent;
}
.navigation input:checked ~ .hamburger::before {
top: 0;
transform: rotate(-45deg);
width: 30px;
}
.navigation input:checked ~ .hamburger::after {
top: 0;
transform: rotate(45deg);
width: 30px;
}
.navigation input:checked ~ .menu {
right: 0;
box-shadow: -20px 0 40px rgba(0,0,0,0.3);
}
#media screen and (max-width: 1062px) {
.hamburger, .toggle-menu {
display: block;
}
.header {
padding: 10px 20px;
}
nav ul {
justify-content: start;
flex-direction: column;
align-items: center;
position: fixed;
top: 0;
right: -300px;
background-color: #565264;
width: 300px;
height: 100%;
padding-top: 65px;
}
.menu li {
width: 100%;
}
.menu li a, .menu li a:hover {
padding: 30px;
font-size: 24px;
box-shadow: 0 1px 0 rgba(112,102,119,0.5) inset;
}
}
<head>
<meta charset="utf-8">
<meta name="veiwport" content="width=device-width, initalscale=1.0">
<Title>Test</Title>
<link rel="stylesheet" href="Style.css">
</head>
<body>
<nav>
<div class="logo">
<a href="index.html">
<img src="Pictures\Logo DesignK whitegreen.png" alt="DesignK" height="50px" width="200px">
</a>
</div>
<div class="navigation">
<input type="checkbox" class="toggle-menu">
<div class="hamburger"></div>
<ul class="menu">
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Services</li>
<li>Feedback</li>
</ul>
</div>
</nav>
<div class="wrapper">
<header>
<img src="Pictures/LakeandMoutains.jpg" class="background">
<h1 class="title">Welcome!</h1>
</header>
<section class="text">
<h3>Essay on Mountains</h3>
</section>
</div>
</body>
Does anyone know how to make the hamburger menu move to the right side of the screen?
Update your .hamburger, .toggle-menu styles like this
.hamburger, .toggle-menu {
display: block;
position: absolute;
right: 30px;
}
Update the value of right according to your need.
You could always use flexbox. The following lines of code will display this on the right hand side:-
nav {
display: flex;
flex-wrap: wrap;
align-items: center;
}
.navigation {
margin-left: auto;
}
Add this to your navigation class:
.navigation{
position:relative;
}
and then this to your hamburger menu to make it stick to the right.
.hamburger{
position:relative;
right:8%;
}
The position absolute will make the hamburger-menu stick relative to the navigation bar and right 8% will stick it to the right.
You must understand the importance of HTML structure and positioning because this is the problem in your HTML.
To fix your problem, you need to put the burger menu and the check box in one container and then position the container.
The problem now is that you are positioning every part individually and their width and height are not properly set.
try to follow the steps I mentioned then let us know if you can do it or not.
So basically I am trying to make a search engine page. The hr does not want to align in the center. On top of that when I resize the page in height it sends the text in the middle and the search bar diagonally left. I am unsure what I am doing wrong. I find positioning in CSS so so hard.
I am unsure on if I am positioning correctly. I was trying to lock my content down by using vh and vw. However I have a lot of trouble locking everything down vertically.
Live Preview" https://codepen.io/thanksfortheride136/project/editor/DYaryO
#indexbody {
background-image: url("/school.jpg");
background-size: 100% auto;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
a {
text-decoration: none;
}
/*controls size of logo link box*/
.logo a {
display: block;
height: auto;
}
li {
list-style: none;
}
/* NAVBAR STYLING STARTS */
.navbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px;
background-color: #2f2e2e;
color: #2f2e2e;
font-family: 'Open Sans';
z-index: 1;
}
.navbaratlus {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px;
background-color: transparent;
color: #2f2e2e;
font-family: 'Open Sans';
z-index: 1;
}
.nav-links a {
color: #fff;
}
/* LOGO */
.logo img {
width: 230px;
height: 75px;
}
/* NAVBAR MENU */
.menu {
display: flex;
gap: 1em;
font-size: 20px;
z-index: 1;
}
.menu li:hover {
background-color: #1a1a1a;
transition: 0.1.5s ease;
}
/*everytime i adjust sizing i usually need to adjust sizing on the dropdown menu too*/
.menu li {
padding: 25px 24px;
padding-left: 5px;
border-left: 1px solid white;
display: inline-block;
width: 200px;
z-index: 1;
}
.home {
border-left: 1px solid white;
}
/* DROPDOWN MENU */
.classes {
position: relative;
}
.dropdown {
background-color: #1a1a1a;
padding-top: 1em;
position: absolute;
/*WITH RESPECT TO PARENT*/
display: none;
top: 70px;
}
.dropdown li+li {
margin-top: 10px;
}
.dropdown li {
padding: 0.5em 1em;
width: 8em;
}
.dropdown li:hover {
background-color: #2f2e2e;
width: 100%;
}
.classes:hover .dropdown {
display: block;
}
/*RESPONSIVE NAVBAR MENU STARTS*/
/* CHECKBOX HACK */
input[type=checkbox] {
display: none;
}
/*HAMBURGER MENU*/
.hamburger {
display: none;
font-size: 24px;
user-select: none;
}
/* APPLYING MEDIA QUERIES */
#media (max-width: 768px) {
.menu {
display: none;
position: absolute;
background-color: teal;
right: 0;
left: 0;
text-align: center;
padding: 16px 0;
}
.menu li:hover {
display: inline-block;
background-color: #4c9e9e;
transition: 0.3s ease;
}
.menu li+li {
margin-top: 12px;
}
input[type=checkbox]:checked~.menu {
display: block;
}
.hamburger {
display: block;
}
.dropdown {
left: 50%;
top: 30px;
transform: translateX(35%);
}
.dropdown li:hover {
background-color: #4c9e9e;
}
}
.footercontainer {
position: fixed;
bottom: 0;
width: 100%;
height: 20px;
background-color: #2f2e2e;
border: 5px solid green;
}
.atlasbar[type=text] {
padding: 6px;
font-size: 17px;
font-family: 'open sans';
color: white;
display: block;
position: absolute;
height: 40px;
width: 35%;
z-index: 1;
top: 30vh;
left: 50vh;
right: 50vh;
box-shadow: inset 0 0 50px #000, /* inner color*/
inset 20px 0 80px #000, /* inner left short*/
inset -20px 0 80px #0ff, /* inner right short*/
inset 20px 0 300px #f0f, /* inner left broad*/
inset -20px 0 300px #0ff, /* inner right broad*/
0 0 10px #fff, /* outer color*/
-1px 0 10px #f0f, /* out left color*/
1px 0 10px #0ff; /* outer right color*/
}
::placeholder {
color: white;
}
.atlascontainer {
display: block;
height: 35vh;
width: 100vw;
position: absolute;
border: 1px solid red;
}
.title {
font-family: 'Akshar', sans-serif;
color: white;
font-size: 100px;
text-align: center;
display: block;
position: absolute;
width: 35%;
z-index: 1;
top: 10vh;
left: 50vh;
right: 50vh;
}
hr {
color: white;
display: block;
z-index: 1;
margin-top: 27vh;
margin-left: 50vw;
margin-right: 50vw;
width: 30%;
position: absolute;
}
p {
font-family: 'Open Sans', sans-serif;
color: white;
text-align: center;
display: block;
position: absolute;
width: 35%;
top: 23vh;
left: 50vh;
right: 50vh;
z-index: 1;
}
.atlasimage {
display: block;
position: absolute;
width: 50%;
height: 100%;
right: 0;
top: 0;
z-index: -1;
}
body {
height: 100vh;
}
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght#300&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Akshar&family=Open+Sans:wght#300&display=swap" rel="stylesheet">
<nav class="navbaratlus">
<!-- LOGO -->
<div class="logo">
</div>
<!-- NAVIGATION MENU -->
<ul class="nav-links">
<!-- USING CHECKBOX HACK -->
<input type="checkbox" id="checkbox_toggle" />
<label for="checkbox_toggle" class="hamburger">☰</label>
<!-- NAVIGATION MENUS -->
<div class="menu">
<li class='home'>Home</li>
<li class="classes">Classes
<!-- DROPDOWN MENU -->
<ul class="dropdown">
<li>AP CS</li>
<li>STEM</li>
<li>Media Arts</li>
<li> Physics</li>
<li>Tech 8</li>
</ul>
</li>
<li>Atlas</li>
<li>Curriculum</li>
<li>Contact</li>
</div>
</ul>
</nav>
<div class='atlascontainer'>
<input type="text" placeholder="Search.." class="atlasbar">
<h1 class='title'>ATLAS</h1>
<p>A Technology Learning Aid System</p>
<hr>
</div>
<img src="editedatlas.png" alt="" class='atlasimage'>
<div class='footercontainer'></div>
I`m trying to make this navbar responsive, and have not found a code that works in this example. When I adjust the width of the screen, I want all the links (not the logo) to be gathered in a hamburger icon, so in portrait mode it will only display the logo and the hamburger icon with the links.
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_responsive_navbar_dropdown This example is very close to what I would like, but the content in my navbar is centered with a logo in between the links, and I couldn`t make it work. Also I want the third element (the logo) to be displayed instead of the first link (when the width reaches a certain point). Any help would be greatly appreciated
nav{
display: flex;
width: 100%;
height: 17%;
background: black;
align-items: center;
justify-content: center;
font-family: Times New Roman;
font-size: 1.5vw;
position: fixed;
top: 0;
z-index: 1;
}
nav a{
text-decoration: none;
background-color: white;
color: black;
margin: 0 40px;
padding: 16px;
border: 3px solid #f9c534;
}
#logo{
width: 7vw;
height: auto;
background: rgba(0,0,0,0.3);
border-radius: 50%;
margin: 0 5vw;
}
.dropbtn {
padding: 16px;
background: white;
font-family: Times New Roman;
font-size: 1.5vw;
color: black;
border: 3px solid #f9c534;
margin: 0 40px;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
margin: 0;
text-decoration: none;
display: block;
}
nav a:hover {
background-color: #f9c534;
border: 2px solid white;
}
.dropdown-content a:hover {
background-color: #f9c534;
border: 2px solid white;
}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {
background-color: #f9c534;
border: 2px solid white;
}
<nav>
Home
News
<div><img id="logo" src="src/Logo.jpg" alt=""></div>
Sponsors
<div class="dropdown">
<button class="dropbtn">About us</button>
<div class="dropdown-content">
Our employees
About company
Founder
</div>
</div>
</nav>
I just updated your code with few fixes your logo will always on center and hamburger menu also added. I hope it'll help you out. Thanks
nav {
background: black;
font-family: Times New Roman;
font-size: 14px;
height: 94px;
position: fixed;
width: 100%;
z-index: 1;
}
nav ul {
display: flex;
justify-content: space-around;
align-items: center;
list-style: none;
padding: 0;
margin: 0;
height: 94px;
}
nav ul li {
background-color: white;
border: 3px solid #f9c534;
position: relative;
white-space: nowrap;
}
nav ul li:hover {
background-color: #f9c534;
border-color: #fff;
}
nav ul li a {
color: black;
display: block;
margin: 0;
padding: 16px;
text-decoration: none;
}
nav li ul {
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
display: none;
position: absolute;
right: -3px;
top: 50px;
height: auto;
min-width: 150px;
}
nav ul li:hover ul {
display: block;
}
nav #logo {
border-radius: 50%;
background: rgba(0,0,0,0.3);
border: 0;
padding: 0;
width: 100px;
}
#mob-dropChecked {
display: none !important;
}
#media only screen and (max-width: 768px) {
nav {
height: 60px;
}
nav ul {
display: block;
height: 60px;
position: relative;
top: 44px;
}
nav ul li {
display: none;
}
nav #logo {
display: block;
position: absolute;
left: 34%;
top: -29px;
}
#mob-btn {
background-image: url('https://www.shareicon.net/data/512x512/2017/05/09/885755_list_512x512.png');
background-color: transparent;
border: 0;
background-repeat: no-repeat;
background-size: contain;
position: relative;
top: 21px;
height: 40px;
width: 40px;
padding: 13px 20px;
z-index: 2;
}
#mob-dropChecked:checked ~ ul li{
display: block;
}
nav li ul {
position: relative;
right: 0;
top: 16px;
}
}
<nav>
<label for="mob-dropChecked" id="mob-btn"></label>
<input type="checkbox" id="mob-dropChecked" role="button">
<ul>
<li>Home</li>
<li>News</li>
<li id="logo"><img id="logo" src="https://s.w.org/style/images/about/WordPress-logotype-alternative-white.png" alt=""></li>
<li>Sponsors</li>
<li>About us
<ul>
<li>Our employees</li>
<li>About company</li>
<li>Founder</li>
</ul>
</li>
</ul>
</nav>
You can add class to the wrapper div of logo img tag
and add css position: absolute; top: 10px; left: 10px to it for smaller devices using css media queries.
Else (not recommended), you can use two img tags. Hide one on desktop and another on mobile using display: block / display: none.
You could remove the logo from the nav and add a spacer element in its place. Then use absolute position on the logo to get it into place. It's a bit hacky, but would work. https://codepen.io/nickberens360/pen/bZmGWy
header{
position: fixed;
width: 100%;
top: 0;
}
.logo{
display: block;
margin: auto;
position: absolute;
left: 36px;
right: 0;
margin-left: auto;
margin-right: auto;
width: 200px;
z-index: 99999999;
top: 0;
}
.spacer{
margin: 0 100px;
border: 1px solid red;
}
nav{
display: flex;
width: 100%;
height: 17%;
background: black;
align-items: center;
justify-content: center;
font-family: Times New Roman;
font-size: 1.5vw;
z-index: 1;
}
nav a{
text-decoration: none;
background-color: white;
color: black;
margin: 0 40px;
padding: 16px;
border: 3px solid #f9c534;
width: 143px;
text-align: center;
}
#logo{
width: 7vw;
height: auto;
background: rgba(0,0,0,0.3);
border-radius: 50%;
margin: 0 5vw;
}
.dropbtn {
padding: 16px;
background: white;
font-family: Times New Roman;
font-size: 1.5vw;
color: black;
border: 3px solid #f9c534;
margin: 0 40px;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
margin: 0;
text-decoration: none;
display: block;
}
nav a:hover {
background-color: #f9c534;
border: 2px solid white;
}
.dropdown-content a:hover {
background-color: #f9c534;
border: 2px solid white;
}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {
background-color: #f9c534;
border: 2px solid white;
}
In some ways, I'm still pretty new to CSS and don't "get" how things are done (is seems convoluted, and there doesn't seem to be an easy way to figure things out) - so I am hoping someone here can help me. I'll post the relevant code. I am a programmer - but can't seem to figure out how to do what I want. (BTW - are there any good tools for 'visually' editing CSS? I'm doing this purely by code).
a) I need an HTML text box to expand/contract as the browser window expands/contracts, with a 'search' image icon to the right of it.
b) I need some signup/login buttons right justified
c) I need the logo/text left justified.
So basically the flow is:
[#1 logo] [#2 menu items ] [#3 search-bar with icon] [#4 login/signup buttons]
And if the browser window expands, then #3 expands to fill in the space.
i.e.,
small desktop
[#1][#2][#3][#4]
big desktop
[#1][#2][<#3-------------------------->][#4]
ideally, I'd also like to figure out on mobile (tiny desktop) how to make it:
[#1][#4]
[#3---->]
This is the HTML I have (with other stuff removed to make it simple)
/* General CSS */
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
padding-top: 150px;
padding-bottom: 30px;
font-family: 'Open Sans', sans-serif;
font-size: 18px;
line-height: 1.42857143;
margin: 0;
}
ul {
list-style-type: none;
}
.clfix {
display: table;
content: " ";
clear: both;
}
.hide {
display: none;
}
/* Top bar */
.logo-separator {
float: left;
width: 1px;
border-right: 1px dashed #fff;
height: 80px;
padding-left:20px;
}
.navbar {
background-color: #124780;
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 1030;
}
.navbar .navbar-brand {
text-decoration: none;
float: left;
height: 85px;
padding: 15px 15px;
font-size: 18px;
line-height: 20px;
}
.navbar .navbar-header {
position: relative;
}
.navbar ul li a, .navbar .navbar-brand {
position: relative;
display: block;
padding: 15px;
line-height: 20px;
color: #fff;
text-decoration: none;
}
.nav.navbar-nav {
float: left;
margin: 50;
padding-left:20px;
color: #fff;
}
.navbar-nav > .separator {
padding: 15px 2px;
line-height: 20px;
}
.navbar-nav .dropdown .dropdown-menu > ul > li.separator {
padding: 5px 10px;
color: #000;
}
.navbar-nav .dropdown .dropdown-menu {
text-align:center;
display: none;
position: absolute;
background: #fff;
border-bottom: 1px solid #124780;
z-index: 999;
}
.navbar-nav .dropdown .dropdown-menu > li:hover > a {
background-color: #8fb4de;
}
.navbar-nav > li {
float: left;
}
/*
.nav.navbar-nav li > a:hover, .nav.navbar-nav > li.open a {
color: #000;
}*/
.top-buttons {
margin: 0;
padding: 0;
float:right;
}
.searchBar {
margin: 0;
padding: 0;
float:right;
border-style:solid;border-width:2px;border-color:#FF0000;
display:inline-flex;
background-color: #124780;
position: absolute;
top: 0;
right: 0;
left: 0;
}
.navbar-nav-button {
display: inline-block;
float:right;
padding-top:18px;
padding-right: 5px;
padding-left: 5px;
}
.top-buttons .btn.btn-sm {
padding: 5px 10px;
font-size: 12px;
line-height: 1.5;
border-radius: 7px;
display: inline-block;
margin-bottom: 0;
font-weight: 400;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
width: 88px;
text-align: center;
}
.top-buttons .btn.btn-primary {
color: #fff;
background-color: #337ab7;
border-color: #2e6da4;
font-weight:bold;
}
.top-buttons .btn.btn-default {
color: #333;
background-color: #fff;
border-color: #ccc;
font-weight:bold;
}
.icon-bar {
background-color: #fff;
}
.navbar-nav2 {
display: inline-flex;
width: 100%;
padding-bottom: 5px;
padding-top: 0px;
position: absolute;
left: 0;
top: 85px;
background: #fff;
height: 35px;
overflow: hidden;
}
.navbar-line {
position: absolute;
bottom:0px;
width: 100%;
height: 1px;
background-color: #000;
left: 0;
}
/* Content */
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.row {
margin-right: -15px;
margin-left: -15px;
}
.col-50 {
float: left;
width: 50%;
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
/* Panels */
.submenu {
xborder: 1px solid #ebf2f2;
border-radius: 5px;
margin-bottom: 20px;
background-color: #fff;
}
.submenu .panel-heading {
background-color: #24a3d1;
border: 11px solid #ebf2f2;
cursor: pointer;
text-align: center;
border-radius: 25px;
padding: 20px 15px;
}
.submenu .panel-heading.expanded {
border: 11px solid #ebf2f2;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.submenu .panel-heading .fa-plus, .submenu .panel-heading.expanded .fa-minus {
display: block;
}
.submenu .panel-heading.expanded .fa-plus, .submenu .panel-heading .fa-minus {
display: none;
}
.submenu .panel-heading:hover {
background-color: #166988;
}
.submenu .panel-heading .panel-title {
display: inline-block;
margin: 0;
font-size: 20px;
color: #fff;
}
.submenu .panel-heading i.fa {
font-size: 25px;
color: #fff;
}
.submenu .panel-heading i:first-child {
float: left;
}
.submenu .panel-heading i.fa-plus, .submenu .panel-heading i.fa-minus {
float: right;
}
.submenu .panel-body {
padding: 0;
overflow: hidden;
}
.submenu .panel-body.closed {
display: none;
}
.submenu .panel-body ul {
border: 1px solid #ebf2f2;
border-bottom: 12px solid #ebf2f2;
margin: 0;
padding: 0;
}
.submenu .panel-body ul li a {
display: block;
padding: 12px 8px;
color: #000;
/* border-left: 1px solid #24a3d1;
border-right: 11px solid #ebf2f2; */
border-left: 11px solid #ebf2f2;
border-right: 11px solid #ebf2f2;
border-bottom: 1px solid #ebf2f2;
text-decoration: none;
font-size: 16px;
}
.submenu .panel-body ul li a i {
font-size: 12px;
color: #24a3d1;
}
.submenu .panel-body ul li a:hover, .submenu .panel-body ul li a:hover i {
color: #fff;
background-color: #24a3d1;
text-decoration: none;
}
/* Modals */
.modal {
position: fixed;
left: 0;
top: 0;
z-index: 2000;
width: 100%;
height: 100%;
}
.modal-overlay {
position: relative;
left: 0;
top: 0;
background-color: #000;
opacity: .7;
width: 100%;
height: 100%;
}
.modal-content {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
padding-top: 60px;
padding-bottom: 60px;
padding-left: 20px;
padding-right: 20px;
}
.modal-body {
width: 100%;
background-color: #fff;
margin-left: auto;
margin-right: auto;
border-radius: 10px;
z-index:1000;
position:relative;
}
.modal-body .modal-row {
width: 100%;
}
.modal-body .close {
background: transparent;
border: 0;
float: right;
font-size: 20px;
color: #aeaeae;
cursor:pointer;
}
.modal-body .button-container {
width: 100%;
height: 30px;
padding: 5px 10px;
}
.modal .modal-title {
font-weight: 700;
text-align: center;
}
.modal .modal-subtitle {
text-align: center;
padding-top: 8px;
padding-bottom: 8px;
}
.modal-body .fields {
padding-top: 20px;
position: relative;
}
.modal-body .input-container {
display: block;
padding: 10px 30px;
font-size: 13px;
}
.modal-body .input {
display: block;
width: 100%;
height: 30px;
padding: 5px 10px;
font-size: 12px;
line-height: 1.5;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 3px;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
.modal-body .button {
padding: 8px 12px;
font-size: 12px;
line-height: 1.5;
border-radius: 3px;
display: inline-block;
margin-bottom: 0;
font-weight: 400;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
width: 100%;
}
.modal-body a.forgot {
float: right;
}
.modal-body .button.btn-primary {
color: #fff;
background-color: #337ab7;
border-color: #2e6da4;
}
.modal-body .button.facebook {
background-color: #3b5998;
color: #fff
}
.modal-body .button.google-plus {
background-color: #d9534f;
color: #fff
}
.modal-body .not-member {
text-align: center;
padding-top: 30px;
}
.modal-body .horizontal-line {
padding-top: 15px;
border-bottom: 2px solid #dedede;
}
.modal-body .bottom-message {
padding: 20px;
text-align: center;
font-size: 13px;
}
.modal-body .bottom-message {
background-color: #f8f8f8;
}
.modal-body .grey {
color: #a19997;
}
.navbar-nav .dropdown-menu > li > a {
color: #fff;
background-color: #4692e6;
text-align:left;
padding: 10px 30px;
border-bottom: 1px solid #fff;
}
.navbar-nav2 a {
text-decoration: none;
text-transform: uppercase;
font-size: 12px;
font-weight: bold;
top:220px;
}
.navbar-nav2 .custom {
text-decoration: none;
text-transform: uppercase;
font-size: 12px;
top:220px;
}
#media (min-width: 768px) {
.container, .modal-body {
width: 750px;
}
.top-buttons {
position: absolute;
top: 10px;
/* i took this out because it was screwing things up display: inline-flex; */
display: inline-flex;
}
.navbar-toggle {
display: none;
}
.navbar-nav > li:hover > a, .navbar-nav > li.active > a {
color: #aeaeae;
}
.navbar-nav > .dropdown {
position: relative;
}
.navbar-nav > .dropdown > .fa-caret-up {
position: absolute;
bottom: -4px;
left: 50%;
transform: translateX(-50%);
color:#4692e6;
display: none;
}
.navbar-nav .dropdown-menu > li > a {
width: 250px;
}
.navbar-nav > li:hover .dropdown-menu, .navbar-nav > li:hover > .fa-caret-up {
display: block;
padding:0;
}
.modal-body .vertical-line {
position: absolute;
height: 100%;
left: 50%;
transform: translateX(-50%);
}
.modal-body .vertical-line .line-color {
width: 1px;
background-color: #eee;
height: 87%;
position: absolute;
left: 50%;
}
.modal-body .vertical-line .vertical-message{
display: block;
margin-top: 75px;
background-color: #fff;
color: #696463;
position: relative;
}
}
#media (min-width: 992px) {
.container {
width: 970px;
}
}
#media (min-width: 1200px) {
.container {
width: 1170px;
}
}
#media ( max-width: 767px) {
body {
padding-top: 110px;
}
.navbar {
background-color: #124780;
position: absolute;
}
.separator {
display: none;
}
.modal-body .vertical-line {
display: block;
width: 100%;
float: left;
padding: 10px;
position: relative;
text-align: center;
}
.modal-body .vertical-line .line-color {
position: absolute;
width: 90%;
background-color: #eee;
top: 50%;
height: 1px;
left: 5%;
}
.modal-body .vertical-line .vertical-message{
background-color: #fff;
color: #696463;
position: relative;
}
.logo-separator {
display: none;
}
.navbar {
max-height: 340px;
}
.navbar-nav, .navbar-nav .dropdown-menu, .navbar-nav2 {
display: none;
}
.navbar-nav.open, .navbar-nav .dropdown-menu.open, .navbar-nav2.open {
display: block;
}
.navbar .container {
width: 100%;
padding: 0;
margin: 0;
}
.navbar .container .navbar-header{
position: relative;
width: 100%;
}
.navbar-toggle {
position: relative;
float: right;
padding: 9px 10px;
margin-top: 8px;
margin-right: 15px;
margin-bottom: 8px;
background-color: transparent;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
cursor: pointer;
}
.navbar-toggle .icon-bar {
display: block;
width: 22px;
height: 2px;
border-radius: 1px;
background-color: #fff;
}
.navbar-nav > .dropdown > .fa-caret-up {
display: none;
}
.navbar-header:before, .navbar-header:after{
content: " ";
}
.navbar-toggle .icon-bar+.icon-bar {
margin-top: 4px;
}
.navbar .navbar-nav, .navbar .navbar-nav .dropdown-menu > ul {
margin: 0;
padding: 0;
width: 100%;
}
.navbar .navbar-nav >li>a {
background-color: #78b1eb;
}
.navbar .navbar-nav >li:hover>a {
background-color: #a6c6e6;
}
.navbar .navbar-nav >li>.dropdown-menu {
margin-bottom:0;
margin-top:0;
padding-bottom: 0;
padding-top: 0;
position: relative;
padding-left:0;
}
.navbar .navbar-nav >li>.dropdown-menu>ul>li>a {
color: #fff;
background-color: #aacef2;
text-align:left;
padding: 10px 30px;
border-bottom: 1px solid #fff;
}
.navbar .navbar-nav2 {
padding-top: 0;
position: relative;
top: 0;
height: auto;
}
.navbar .navbar-nav2 a {
display: block;
padding: 10px 15px;
border-bottom: 1px solid #aaa;
}
.navbar .navbar-nav2 a:hover {
background-color: #fff1f1;
color: #5d5aff;
}
.navbar .navbar-nav2 span.separator {
display: none;
}
.navbar ul li {
float: none;
}
.top-buttons {
position: absolute;
top: 10px;
right: 60px;
}
.col-50 {
width: 100%;
}
}
<nav class="navbar">
<div class="container clfix">
<div class="navbar-header">
<button type="button" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src=./mylogo.jpg><img src=./mytextlogo.gif></a>
<div class="logo-separator"></div>
</div>
<div id="navbar">
<ul class="nav navbar-nav">
<li class="dropdown">
Menu Item 1
</li>
<li class="separator">|</li>
<li class="dropdown">
Menu Item 1
</li>
<li class="separator">|</li>
<li class="dropdown">
Menu Item 3
</li>
<li class="separator">|</li>
</ul>
<div class="navbar-nav2">
<div class="navbar-line"></div>
<div class="container" style="width:100%" align=center>
Secondary Menu 1
Secondary Menu 2
</div>
</div>
</div><!--/.nav-collapse -->
//--------------------------------------------------------------------------------------------
/* THIS IS WHERE I WANT A SEARCH BAR WITH ICON TO EXPAND/CONTRACT BASED ON BROWSER WIDTH
//--------------------------------------------------------------------------------------------
<div class=searchBar>
<input name=something type=text width=40><img src=./searchbutton.jpg>
</div>
//--------------------------------------------------------------------------------------------
/* I WANT THESE BUTTONS 'RIGHT' JUSTIFIED HERE
//--------------------------------------------------------------------------------------------
<div >
<ul class="top-buttons" style="width:100%;border-style:solid;border-width:2px;border-color:#FF0000;float:right">
<li class="navbar-nav-button"><Button id="btn-login" class="btn btn-primary btn-sm">Log in</Button></li>
<li class="navbar-nav-button"><Button id="btn-signup" class="btn btn-default btn-sm">Sign Up</Button></li>
</ul>
</div>
</div>
</nav>
any help would be greatly appreciated!
Sounds like you will need judicious use of media queries:
#media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
You've already indicated the three device sizes you need media queries for:
small desktop
[#1][#2][#3][#4]
big desktop
[#1][#2][<#3-------------------------->][#4]
mobile
[#1][#4]
[#3---->]
Now you just need to create media queries for those three sizes and set the CSS accordingly.
Mobile: Hide #2. Maybe play with floats to get #3 to display below the other two.
Big Desktop: Change #3 width (percentage based most likely)
Small Desktop: #1, #2, #3, #4 should all have the same width (percentage based most likely)
You can then use the width property to adjust the size of buttons on these different media widths:
http://www.w3schools.com/cssref/pr_dim_width.asp
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I have strange case:
I try to make an inner container to fill parent (height with 100% height), but as result I get overflowed content in bottom:
But it must be so (100% except margin top and bottom):
code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div class="main-wrapper">
<aside class="full-nav" action-bar>
</aside>
<section class="wrapper">
<header>
</header>
<div class="content">
<div class="innner-wrapper">
<div class="main-partial">
<div class="content-wrapper">Content</div>
</div>
</div>
</div>
</section>
</div>
</body>
</html>
and plunker (CSSit there):
http://plnkr.co/edit/ku7ZXK6uezfZ86cMFhds?p=preview
(when I set absolute position I get strange width...)
You can calculate the height of the .content-wrapper and adjust it.
.content-wrapper {
height: calc(100% - 70px);
}
Output:
/* Styles go here */
html,
body {
height: 100%;
min-height: 100%;
}
body {
min-width: 1024px;
font-family: 'Open Sans', sans-serif;
margin: 0;
padding: 0;
border: 0;
}
.pull-right {
float: left;
}
.pull-left {
float: left;
}
.main-wrapper {
width: 100%;
height: 100%;
}
aside {
width: 48px;
height: 100%;
float: left;
background: #dedede;
position: absolute;
}
aside.full-nav {
width: 168px;
}
section.wrapper {
width: 100%;
height: 100%;
float: left;
padding-left: 168px;
background: #eeeeee;
}
section.wrapper.full-size {
padding-left: 48px;
}
aside ul.full-width {
width: 100%;
list-style-type: none;
}
aside nav ul li {
height: 34px;
}
aside nav ul li:hover {
opacity: 0.9;
}
aside.full-nav nav ul li.company-name {
width: 100%;
height: 80px;
background: #717cba;
position: relative;
}
aside.full-nav nav ul li.company-name span {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
aside nav ul li a {
height: 34px;
line-height: 1;
max-height: 34px;
font-size: 14px;
font-weight: 400;
color: #ffffff;
margin: 5px 0 0 12px;
text-decoration: none;
display: block;
}
aside.full-nav nav ul li a.first {
margin: 20px 0 0 12px;
text-decoration: none;
}
aside nav ul li a:hover {
color: #ffffff;
}
aside nav ul li.company-name .nav-company-overflow {
display: none;
}
aside nav ul li.company-name .nav-company-logo {
display: none;
}
aside.full-nav nav ul li.company-name a {
height: 16px;
color: #ffffff;
margin: 10px 0 0 12px;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
position: absolute;
z-index: 20;
}
aside.full-nav nav ul li.company-name .nav-company-overflow {
width: 168px;
height: 80px;
position: absolute;
top: 0;
background: rgba(78, 91, 169, 0.8);
z-index: 15;
display: block;
}
aside.full-nav nav ul li.company-name .nav-company-logo {
width: 168px;
height: 80px;
position: absolute;
top: 0;
z-index: 10;
display: block;
}
aside nav ul li a em {
line-height: 100%;
display: inline-block;
vertical-align: middle;
margin: 0 18px 0 0;
}
aside nav ul li a span {
width: 110px;
display: inline-block;
line-height: 100%;
vertical-align: middle;
max-width: 110px;
}
aside nav ul li a.profile em {
width: 18px;
height: 18px;
background: url(../images/png/profile_spritesheet.png);
background-position: -10px -676px;
margin: 6px 8px 0 0;
}
aside.full-nav nav ul li a.profile em {
margin: 0 8px 0 0;
}
aside nav ul li a.contacts em {
width: 20px;
height: 20px;
background: url(../images/png/profile_spritesheet.png);
background-position: -10px -224px;
}
aside nav ul li a.events em {
width: 20px;
height: 22px;
background: url(../images/png/profile_spritesheet.png);
background-position: -10px -268px;
}
aside nav ul li a.policy em {
width: 20px;
height: 23px;
background: url(../images/png/profile_spritesheet.png);
background-position: -10px -310px;
}
aside nav ul li a.admins em {
width: 18px;
height: 18px;
background: url(../images/png/profile_spritesheet.png);
background-position: -10px -676px;
}
aside.full-nav nav ul li a span {
display: inline-block;
}
aside nav ul li a span {
display: none;
}
aside .hide-sidebar {
width: 100%;
height: 34px;
background: #455095;
position: absolute;
bottom: 0;
}
#hide-sidebar-btn {
width: 30px;
height: 34px;
line-height: 40px;
background: #394485;
float: right;
text-align: center;
}
#hide-sidebar-btn:hover {
cursor: pointer;
}
aside .collapse-btn-icon {
width: 8px;
height: 15px;
display: inline-block;
background: url(../images/png/profile_spritesheet.png);
background-position: -10px -353px;
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
aside.full-nav .collapse-btn-icon {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
.innner-wrapper {
height: 100%;
margin: 0 12px 0 12px;
}
.main-partial {
height: 100%;
}
header {
height: 40px;
background: #ffffff;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
header .buttons-header-area {
float: right;
}
header .company-header-avatar {
width: 28px;
height: 28px;
-webkit-border-radius: 28px;
-webkit-background-clip: padding-box;
-moz-border-radius: 28px;
-moz-background-clip: padding;
border-radius: 28px;
background-clip: padding-box;
margin: 7px 0 0 5px;
float: left;
}
header .info {
height: 40px;
line-height: 40px;
margin: 0 5px 0 0;
}
header .info em {
width: 28px;
height: 28px;
display: inline-block;
vertical-align: middle;
background: url(../images/png/profile_spritesheet.png);
background-position: -10px -53px;
}
header .dropdown-toggle {
width: 170px;
height: 40px;
border: none;
padding: 0;
background: transparent;
font-size: 12px;
color: #444444;
}
header .btn-group {
height: 40px;
vertical-align: top;
}
header .btn-group.open {
background: #eeeeee;
}
header .open > .dropdown-menu {
width: 170px;
font-size: 12px;
border-color: #d9d9d9;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.11);
margin: 2px 0 0 0;
}
header .dropdown-toggle:hover {
background: #eeeeee;
}
header .profile-name {
width: 100px;
height: 40px;
line-height: 40px;
display: inline-block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
header .caret {
height: 40px;
border-top: 6px solid #bfbfbf;
border-right: 6px solid transparent;
border-left: 6px solid transparent;
}
.content {
height: 100%;
margin: 12px 0;
overflow: hidden;
}
.content-wrapper {
background: #ffffff none repeat scroll 0 0;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
height: calc(100% - 70px);
width: 100%;
}
.content-row.company {
height: 300px;
}
.content-row-wrapper {
margin: 0 18px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div class="main-wrapper">
<aside class="full-nav" action-bar>
</aside>
<section class="wrapper">
<header>
</header>
<div class="content">
<div class="innner-wrapper">
<div class="main-partial">
<div class="content-wrapper">Content</div>
</div>
</div>
</div>
</section>
</div>
</body>
</html>
I think the problem is that you are assigning 100% height to the container and this one is getting the relative window height. The problem is the header at the top of the page does not let this to work. Maybe you have to calculate with javascript or something to apply the correct height to that container.