Div Wider than Viewport - html

I am currently coding a responsive menu using the checkbox hack and noticed that when my menu appears after clicking the hamburger icon, it is wider than the viewport. The menu has a fixed position and a flex display. I have added red borders around elements to give show this issue. Here is the relevant code:
/* General styles */
html, body { height: 100%; }
body {
font-family: 'Miriam Libre', sans-serif;
}
a {
color: white;
text-decoration: none;
transition: 0.2s;
}
a:hover {
color: #ea3c53;
}
/* Navigation styles */
nav {
position: absolute;
top: 0;
left: 0;
width: 100%;
background: #222222;
}
.donate {
position: absolute;
margin: 21px;
}
nav .brand {
display: block;
height: 70px;
margin: 10px auto;
}
input[type=checkbox] {
position: absolute;
top: -9999px;
left: -9999px;
}
nav label {
position: absolute;
top: 0;
right: 0;
padding: 21px;
background: #63E2C6;
cursor: pointer;
z-index: 2;
}
nav > label > span {
display: block;
margin: 4px auto;
height: 4px;
width: 25px;
border-radius: 1px;
background: #ffffff;
transition: 0.5s;
}
.menu {
display: flex;
position: fixed;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 0;
top: -100vh;
left: 0;
height: 100vh;
width: 100%;
background: #222;
list-style-type: none;
border: 1px solid red;
transition: top 0.5s cubic-bezier(0.3, 0.1, 0.3, 0.85);
}
.menu li {
font-size: 30px;
border: 1px solid red;
}
input[type=checkbox]:checked ~ .menu {
top: 0;
}
<nav>
<!-- Top bar -->
Donate
<img src="media/logo2.png" alt="Logo" class="brand">
<input type="checkbox" id="nav">
<label for="nav">
<span></span>
<span></span>
<span></span>
</label>
<ul class="menu">
<li>Home.</li>
<li>Mission.</li>
<li>Contact.</li>
</ul>
</nav>
So, my question is, why is this happening? After all, I do have the width set to 100%, not 110%.

You have margin on your body element. Add:
body {
margin: 0;
}
There is also default margin and padding on your ul element that is also being set to width: 100%;
I recommend checking all of your primary containers, looking at them in your browser's inspector will highlight when you have additional spacing on an element that you may not be accounting for.

Related

How do I move my hamburger in css and still have it functional?

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.

My CSS content keeps moving vertically on my website?

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>

navbar hover effect above horizontal rule

I am designing a new website, and I always spend a lot of time on the navigation bars when I do so. The following code has this intended effect:
HTML:
<div class="navbar">
Home
About
</div>
<hr></hr>
CSS:
hr {
width: 80%;
border: 0;
height: 1px;
margin-top: 0px;
background-color: #000;
}
.navbar {
text-align: center;
}
.navbar a {
display: inline-block;
position: relative;
text-align: center;
color: #000;
text-decoration: none;
font-size: 20px;
overflow: hidden;
top: 5px;
padding-bottom: 10px;
padding-top: 10px;
padding-left: 30px;
padding-right: 30px;
}
.navbar a:after {
content: "";
position: absolute;
background-color: #c00;
height: 2px;
width: 0%;
transform: translateX(-50%);
left: 50%;
bottom: 0;
transition: .35s ease;
}
.navbar a:hover:after {
width: 100%;
}
This works in Chrome, Opera, and even some versions of Internet Explorer, but the other browsers can't agree on anything:
Firefox (and some IE versions):
Safari:
here is a code snippet:
hr {
width: 80%;
border: 0;
height: 1px;
margin-top: 0px;
background-color: #000;
}
.navbar {
text-align: center;
}
.navbar a {
display: inline-block;
position: relative;
text-align: center;
color: #000;
text-decoration: none;
font-size: 20px;
overflow: hidden;
top: 5px;
padding-bottom: 10px;
padding-top: 10px;
padding-left: 30px;
padding-right: 30px;
}
.navbar a:after {
content: "";
position: absolute;
background-color: #c00;
height: 2px;
width: 0%;
transform: translateX(-50%);
left: 50%;
bottom: 0;
transition: .35s ease;
}
.navbar a:hover:after {
width: 100%;
}
<div class="navbar">
Home
About
</div>
<hr>
Is there any way to achieve the intended effect without browser sniffing?
The problem can be solved by doing following steps:
Add reset CSS (could be normalize or Meyer reset CSS)
Set a specific height to navbar and the element as Safari doesn't do well without the height
Applying box-sizing: border-box; for easy
styling without much of calculation between padding, border, margin
within one element.
Beside, I usually use the border of navbar instead of another hr tag for the line under the menu

CSS problems with animation? Can't align text in li?

This is incredibly frustrating but I am having problems aligning link text within an li after adding an animation. I took the animation from a menu that was aligned horizontally instead of vertically and have been able to integrate the animation in however my link text skewed as a result.
Each link is within an li. Below is a demo with circle animation:
.menubar {
position: absolute;
height: calc(100% - 32px);
width: 137px;
left: -140px;
top: 38px;
background-color: #52DBA5;
}
.menubutton {
width: 100%;
height: 80px;
padding-top: 0px;
padding-bottom: 40px;
text-transform: uppercase;
text-align: center;
cursor: pointer;
font-family: "Source Sans", Helvetica, Arial;
font-weight: bold;
background-color: rgba(0, 0, 0, 0);
display: block;
text-decoration: none;
}
/*HERE for menu animations*/
nav {
width: 100%;
}
nav ul {
list-style: none;
text-align: left;
}
nav ul li {} nav ul li a {
display: block;
padding: 50px;
top: 10px;
text-decoration: none;
color: #52DBA5;
text-transform: uppercase;
}
nav ul li a,
nav ul li a:after,
nav ul li a:before {
transition: all .3s;
}
nav ul li a:hover {
color: #52DBA5;
}
nav.circle ul li a {
position: relative;
overflow: hidden;
z-index: 1;
}
nav.circle ul li a:after {
display: block;
position: absolute;
margin: 0;
top: 0;
bottom: 0;
left: 0;
right: 0;
content: '.';
color: transparent;
width: 1px;
height: 1px;
border-radius: 50%;
background: transparent;
}
nav.circle ul li a:hover:after {
-webkit-animation: circle 1.2s ease-in forwards;
padding-right: 50px;
}
/* Keyframes */
#-webkit-keyframes fill {
0% {
width: 0%;
height: 1px;
}
50% {
width: 100%;
height: 1px;
}
100% {
width: 100%;
height: 100%;
background: #333;
}
}
/* Keyframes */
#-webkit-keyframes circle {
0% {
width: 1px;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
height: 1px;
z-index: -1;
background: white;
border-radius: 100%;
}
100% {
background: white;
height: 5000%;
width: 5000%;
z-index: -1;
top: 0;
bottom: 0;
left: 0;
right: 0px;
margin: auto;
border-radius: 0;
}
}
.menutext {
width: 100%;
height: 20px;
top: -12px;
color: #39946f;
font-family: "source sans pro", , Helvetica, Arial;
font-weight: bold;
text-align: center;
text-decoration: none;
}
<div class="menubar">
<nav class="circle">
<ul>
<li class="menubutton"><a class="menutext" href="#">'.$account['username'].'</a>
</li>
<li class="menubutton"><a class="menutext" href="#">chat</a>
</li>
<li class="menubutton"><a class="menutext" href="#">settings</a>
</li>
<li class="menubutton"><a class="menutext" href="#">users</a>
</li>
</ul>
</nav>
<form class="logoutframe" method="post" id="logout">
<input class="logout" type="submit" name="logout" value="logout" /></input>
</form>
</div>
I have tried placing padding and using left and right on menu button, menu text, nav ul li a, everything. Even tried putting text in individual ps within the li.
But my text is still not centered in the box that forms on hover:
I need the text ("username", "chat," etc) to be left aligned within the menubar and centered (the text is slightly to the bottom and very much to the right) within the "circle" box that is formed on hover.
How can I do this?
Initially I had misunderstood your question and written a different answer. Below is the correct one.
There are a lot of extra/unnecessary settings in your code but the key reason why you are not able to achieve the left align is because the ul elements always have a default padding associated with it. It pushes the contents of the list to the right by a large value and hence it will look as though alignment is not proper.
If you make the changes that I've indicated in the below snippet, you'd be able to get what you need.
.menubar {
position: absolute;
/*height: calc(100% - 32px);
width: 137px; ideally these should be large enough to accomodate the element */
/*left: -140px; commented for demo */
top: 38px;
background-color: #52DBA5;
}
.menubutton {
width: 100%;
height: 80px;
/*padding-top: 0px;
padding-bottom: 40px; not required*/
text-transform: uppercase;
/*text-align: center; remove this */
cursor: pointer;
font-family: "Source Sans", Helvetica, Arial;
font-weight: bold;
background-color: rgba(0, 0, 0, 0);
display: block;
text-decoration: none;
line-height: 80px; /* add this to vertically center align the text */
}
/*HERE for menu animations*/
nav {
width: 100%;
}
nav ul {
list-style: none;
/*text-align: left; not required as this is default */
padding: 0px; /* add this */
}
nav ul li {} nav ul li a {
display: block;
text-indent: 8px; /* add this to indent just the text without affecting white box */
padding: 0px; /* change this */
top: 10px;
text-decoration: none;
color: #52DBA5;
text-transform: uppercase;
}
nav ul li a,
nav ul li a:after,
nav ul li a:before {
transition: all .3s;
}
nav ul li a:hover {
color: #52DBA5;
}
nav.circle ul li a {
position: relative;
overflow: hidden;
z-index: 1;
}
nav.circle ul li a:after {
display: block;
position: absolute;
margin: 0;
top: 0;
bottom: 0;
left: 0;
right: 0;
content: '.';
color: transparent;
width: 1px;
height: 1px;
border-radius: 50%;
background: transparent;
}
nav.circle ul li a:hover:after {
animation: circle 1.2s ease-in forwards; /* changed so others can see animation */
padding-right: 50px;
}
/* Keyframes */
#-webkit-keyframes fill {
0% {
width: 0%;
height: 1px;
}
50% {
width: 100%;
height: 1px;
}
100% {
width: 100%;
height: 100%;
background: #333;
}
}
/* Keyframes */
#-webkit-keyframes circle {
0% {
width: 1px;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
height: 1px;
z-index: -1;
background: white;
border-radius: 100%;
}
100% {
background: white;
height: 5000%;
width: 5000%;
z-index: -1;
top: 0;
bottom: 0;
left: 0;
right: 0px;
margin: auto;
border-radius: 0;
}
}
.menutext {
width: 100%; /* change this */
/*height: 20px;
top: -12px; not required */
color: #39946f;
font-family: "source sans pro", , Helvetica, Arial;
font-weight: bold;
/*text-align: center; remove this */
text-decoration: none;
}
<div class="menubar">
<nav class="circle">
<ul>
<li class="menubutton"><a class="menutext" href="#">'.$account['username'].'</a>
</li>
<li class="menubutton"><a class="menutext" href="#">chat</a>
</li>
<li class="menubutton"><a class="menutext" href="#">settings</a>
</li>
<li class="menubutton"><a class="menutext" href="#">users</a>
</li>
</ul>
</nav>
<form class="logoutframe" method="post" id="logout">
<input class="logout" type="submit" name="logout" value="logout" /></input>
</form>
</div>

How to fix nav bar to bottom of the screen for mobile view>

I currently have a sidebar as a navigation bar when I am viewing on desktop. In the desktop the view, the icons and text are side-by-side with the icons on the left, and the text on the right.
I was trying get it so that when it collapses down to mobile view, the sidebar to collapse to a nav bar that's fixed to the bottom of the screen. With the icons on top and centered underneath the text.
This is currently what I have: http://codepen.io/anon/pen/bpRgEJ
This is my code for trying to get to to position at the bottom:
#media (max-width:35em) {
.main-nav {
background: #ECC264;
border-right: 1px solid #e5e5e5;
position: fixed;
margin: 0;
left: 0;
bottom: 0;
height: 5em;
width: 100%;
}
}
It currently collapses into a top nav bar, and the icons and text are side-by-side as opposed to being top-and-bottom.
Any help would be appreciated, thanks!
First of all, i suggest you to organize your CSS as the following:
1.- General selectors and clases with rules that will affect everything
2.- Media Queries that affect only the behavior for certain width.
So if you need a navbar that is always fixed, but for desktop is positioned on the left side of the screen and for mobile is on the bottom of the page you should write something like this:
.sidebar{ /* Every rule that will be always visible, something like colors, fonts, etc. */
background-color: yellow;
position: fixed;
}
#media(min-width:35.1em){ /* Larger than mobile devices */
.sidebar{
left: 0;
top: 0;
bottom: 0;
width: 40px;
}
}
#media(max-width:35em){ /* Breakpoint only for mobile */
.sidebar{
bottom: 0;
width: 100%;
}
}
In that way you will avoid dealing with rules that doesn't match together.
Your complete CSS should look like this:
.fa-2x {
font-size: 2rem;
}
.fa {
position: relative;
text-align: center;
vertical-align: middle;
font-size: 2rem;
}
.main-nav {
background: #ECC264;
border-right: 1px solid #e5e5e5;
position: fixed;
z-index: 1000;
}
.main-nav>ul {
margin: 0rem 0rem;
}
nav ul,
nav li {
outline: 0;
margin: 0;
padding: 0;
}
.main-nav li:hover>a,
nav.main-nav li.active>a{
color: #fff;
background-color: #919191;
}
.main-nav .nav-text, .main-nav li>a{
font-family: 'Roboto', sans-serif;
}
.main-nav li>a {
border-collapse: collapse;
border-spacing: 0;
color: white;
font-size: 1.03rem;
text-decoration: none;
}
#media (min-width:35.1em) {
.fa{
display: table-cell;
width: 5rem;
height: 5rem;
}
.main-nav:hover,
nav.main-nav.expanded {
width: 15em;
overflow: visible;
}
.main-nav{
top: 0;
bottom: 0;
height: 100%;
left: 0;
width: 5rem;
overflow: hidden;
-webkit-transition: width .05s linear;
transition: width .05s linear;
-webkit-transform: translateZ(0) scale(1, 1);
}
.main-nav li {
position: relative;
display: block;
width: 18rem;
}
.main-nav li>a {
position: relative;
display: table;
-webkit-transform: translateZ(0) scale(1, 1);
-webkit-transition: all .1s linear;
transition: all .1s linear;
}
.main-nav .nav-text {
position: relative;
display: table-cell;
vertical-align: middle;
width: 10rem;
}
}
#media (max-width:35em) {
.main-nav {
background: #ECC264;
border-right: 1px solid #e5e5e5;
position: fixed;
margin: 0;
left: 0;
bottom: 0;
/*height: 5em;*/
width: 100%;
}
.main-nav ul{
display: table;
width: 100%;
}
.main-nav li{
float: left;
width: 25%;
list-style-type: none;
text-align: center;
}
.main-nav a{
display: block;
padding: 5px;
height: 74px;
}
.main-nav i, .main-nav span{
display: block;
}
.main-nav span{
font-size: 14px;
}
}
Your example forked in Codepen: http://codepen.io/xWaZzo/pen/BKZpQE
This should do the trick.
#myNavbar {
position: relative;
}
#myNavbar .nav {
position: absolute;
bottom: 0;
right: 0;
margin-bottom: -10px;
}
http://jsfiddle.net/DTcHh/1819/
You should remove top:0 from
.main-nav {
background: #ECC264;
border-right: 1px solid #e5e5e5;
position: fixed;
/ *top: 0;*/
bottom: 0;
height: 100%;
left: 0;
width: 5rem;
overflow: hidden;
-webkit-transition: width .05s linear;
transition: width .05s linear;
-webkit-transform: translateZ(0) scale(1, 1);
}
Also increase height in media query class
#media (max-width:35em) {
.main-nav {
background: #ECC264;
border-right: 1px solid #e5e5e5;
position: relative;
margin: 0;
left: 0;
bottom: 0;
height: 20em;
width: 100%;
}
}
Hope this is you want?