Navbar elements appear different in Firefox and Chrome. I use span tag to animate hamburger menu but it looks totally different in Firefox. It looks fine in Chrome and other browsers including Android. I tried browser reset CSS also. I don't know what I'm missing.
see this jsfiddle example in firefox
html, body, div, span, h1, p, a, address, img, i, ul, li, footer, header, nav, section {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
footer, header, nav, section {
display: block;
}
body {
line-height: 1;
}
ul {
list-style: none;
}
a, a:hover {
text-decoration: none;
}
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
/*----- reset end-----------*/
.header {
background-color: #333;
width: 100%;
transition: .8s;
}
.header nav {
width: 100%;
margin: 0 auto;
position: sticky;
height: 100vh;
top: 16px;
}
.header nav .btn {
outline: none;
border: none;
display: block;
cursor: pointer;
background-color: #fff;
width: 2.5rem;
height: 2.5rem;
margin: 16px;
}
.header nav .btn span {
background-color: #FD5B4E;
width: 95%;
height: 0.1875rem;
position: relative;
display: block;
margin: auto;
top: 50%;
transition: background-color .5s .3s;
}
.header nav .btn span:before {
content: '';
background-color: #FD5B4E;
width: 100%;
height: 0.1875rem;
display: block;
top: -0.625rem;
position: absolute;
transition: top .3s .4s,transform .3s;
}
.header nav .btn span:after {
content: '';
background-color: #FD5B4E;
width: 100%;
height: 0.1875rem;
display: block;
position: absolute;
transition: top .3s .4s,transform .3s;
top: 0.625rem;
}
<body>
<header id="header" class="header sidbar">
<nav>
<button class="btn"><span></span></button>
</nav>
</header>
<!-- /header -->
</body>
The problem is with the top:50% in your CSS for the span. Its not doing anything on Chrome, but in FF its making the span move down 50% further than its default position (which is actually the middle already because you are using a button).
You just need to change this class:
.header nav .btn span {
background-color: #FD5B4E;
width: 95%;
height: 0.1875rem;
position: relative;
display: block;
margin: auto;
/* top: 50%; <- remove this and it works! */
transition: background-color .5s .3s;
}
If you used a div instead of a button you'd need to account for placing the span in the center, but the button element it is automatically centering the content vertically. By specifying that you want the top at 50%, FF is adding the 50% on to the current centred position.
Working example when you remove top:
Fiddle: https://jsfiddle.net/dt17u5uz/2/ or Snippet:
html, body, div, span, h1, p, a, address, img, i, ul, li, footer, header, nav, section {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
footer, header, nav, section {
display: block;
}
body {
line-height: 1;
}
ul {
list-style: none;
}
a, a:hover {
text-decoration: none;
}
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
/*----- reset end-----------*/
/* autoprefixer: off */
/* autoprefixer: off */
.header {
background-color: #333;
width: 100%;
transition: .8s;
}
.header nav {
width: 100%;
margin: 0 auto;
position: sticky;
height: 100vh;
top: 16px;
}
.header nav .btn {
outline: none;
border: none;
display: block;
cursor: pointer;
background-color: #fff;
width: 2.5rem;
height: 2.5rem;
margin: 0 16px 16px;
}
.header nav .btn span {
background-color: #FD5B4E;
width: 95%;
height: 0.1875rem;
position: relative;
display: block;
margin: auto;
top: 0;
transition: background-color .5s .3s;
}
.header nav .btn span:before {
content: '';
background-color: #FD5B4E;
width: 100%;
height: 0.1875rem;
display: block;
top: -0.625rem;
position: absolute;
transition: top .3s .4s,transform .3s;
}
.header nav .btn span:after {
content: '';
background-color: #FD5B4E;
width: 100%;
height: 0.1875rem;
display: block;
position: absolute;
transition: top .3s .4s,transform .3s;
top: 0.625rem;
}
<body>
<header id="header" class="header sidbar">
<nav>
<button class="btn"><span></span></button>
</nav>
</header>
<!-- /header -->
</body>
FYI, you also have collapsing margin problems on your button, this might just be because you are only showing us part of your code. One way to overcome this is to add overflow:auto to your .header nav {} CSS rule. More about collapsing margins from sitepoint
Related
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.
I have the following link hover animation:
*,
*::before,
*::after {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
width: 100vw;
height: 100vh;
}
body {
font-family: Arial;
background-color: red;
}
ul {
list-style-type: none;
width: 33vw;
margin: 0;
padding: 0;
}
li {
margin: 0 10px;
padding: 2px;
}
a {
text-decoration: none;
color: white;
font-size: 25px;
}
a::after {
content: "";
width: 0;
height: 2px;
background-color: white;
display: block;
transition: width 0.5s;
}
a:hover::after {
width: 100%;
}
<!DOCTYPE html>
<html>
<body>
<ul>
<li>Home</li>
<li>About Us</li>
<li>Events</li>
<li>Contact</li>
</ul>
</body>
</html>
In the above snippet, when I hover over each of the links, the underline properly animates. However, the underline ends at the width of the ul, not at the width of each link itself (e.g if I hover on the "Home" link, the animated underline goes way past the word "Home" itself, all the way to the end of the ul). How should I change my CSS for the a::after or a:hover::after pseudo-elements so that I get the behavior I'm looking for?
Make the link inline-block
*,
*::before,
*::after {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
width: 100vw;
height: 100vh;
}
body {
font-family: Arial;
background-color: red;
}
ul {
list-style-type: none;
width: 33vw;
margin: 0;
padding: 0;
}
li {
margin: 0 10px;
padding: 2px;
}
a {
text-decoration: none;
color: white;
font-size: 25px;
display: inline-block;
}
a::after {
content: "";
width: 0;
height: 2px;
background-color: white;
display: block;
transition: width 0.5s;
}
a:hover::after {
width: 100%;
}
<ul>
<li>Home</li>
<li>About Us</li>
<li>Events</li>
<li>Contact</li>
</ul>
just use inline block to your style
a {
display: inline-block;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
width: 100vw;
height: 100vh;
}
body {
font-family: Arial;
background-color: red;
}
ul {
list-style-type: none;
width: 33vw;
margin: 0;
padding: 0;
}
li {
margin: 0 10px;
padding: 2px;
}
a {
text-decoration: none;
color: white;
font-size: 25px;
display: inline-block;
}
a::after {
content: "";
width: 0;
height: 2px;
background-color: white;
display: block;
transition: width 0.5s;
}
a:hover::after {
width: 100%;
}
<!DOCTYPE html>
<html>
<body>
<ul>
<li>Home</li>
<li>About Us</li>
<li>Events</li>
<li>Contact</li>
</ul>
</body>
</html>
I just actually finished setting this up, but did not even want to have any extra underline for any of my links. So I fixed it with pure css (scss actually) as well, but got specific. This is the css (scss) I used to make the underline only span the width of the text:
.main-nav {
background: rgba(103, 128, 159, 1);
display: block;
height: 100vh;
left: 0;
right: 0;
margin-top: 0;
margin-left: 0;
margin-right: 0;
padding-top: 5rem;
overflow-y: hidden;
position: fixed;
top: 0;
/* hide the menu above the screen by default */
transform: translateX(-100%);
/* transition adds a little animation when sliding in and out the menu */
transition: transform 0.2s ease;
width: 100vw;
/* needed for me because of my intro box in index.html.
Otherwise navigation backgrop would be behind the intro box when opened */
z-index: 10;
/* so that the nav link underlining from framer motion does not span across the width of the main-nav backdrop */
& li > a {
display: block;
width: 6rem;
}
& li:nth-of-type(1) > a {
width: 3.5rem;
}
& li:nth-of-type(2) > a {
width: 3.5rem;
}
& li:nth-of-type(3) > a {
width: 2.75rem;
}
& li:nth-of-type(4) > a {
width: 4.75rem;
}
& li:nth-of-type(5) > a {
width: 6.5rem;
}
& li:nth-of-type(6) > a {
width: 2.75rem;
}
}
.main-nav is the class for the ul. I just set an arbitrary initial width, and then the specific ones for the specific anchor elements.
So I have a header and some menu links on the right and a logo on the left side of the header.
So currently, the logo is small in size but as soon as I change the logo's height to suit my needs, it also increases the height of the actual header.
However, I just want the logo's height to increase not the actual header's height.
I have also searched other questions on stack overflow and on google and the question is similar to mine but still I have some problems. Please help me.
This is my code for the header:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Home - Diamond Collections</title>
<style>
#import url('https://fonts.googleapis.com/css?family=Work+Sans:300,600');
:root {
--background: rgba(0, 214, 170, .85);
}
*, *::before, *::after {
box-sizing: border-box;
}
body {
margin: 0;
background:
font-family: 'Work Sans', sans-serif;
font-weight: 400;
}
.content {
}
/* navigation styles start here */
header {
background: var(--background);
text-align: center;
position: fixed;
z-index: 999;
width: 100%;
}
/* changed this from the tutorial video to
allow it to gain focus, making it tabbable */
.nav-toggle {
position: absolute !important;
top: -9999px !important;
left: -9999px !important;
}
.nav-toggle:focus ~ .nav-toggle-label {
outline: 3px solid rgba(lightblue, .75);
}
.nav-toggle-label {
position: absolute;
top: 0;
left: 0;
margin-left: 1em;
height: 100%;
display: flex;
align-items: center;
}
.nav-toggle-label span,
.nav-toggle-label span::before,
.nav-toggle-label span::after {
display: block;
background: white;
height: 2px;
width: 2em;
border-radius: 2px;
position: relative;
}
.nav-toggle-label span::before,
.nav-toggle-label span::after {
content: '';
position: absolute;
}
.nav-toggle-label span::before {
bottom: 7px;
}
.nav-toggle-label span::after {
top: 7px;
}
nav {
position: absolute;
text-align: left;
top: 100%;
left: 0;
background: var(--background);
width: 100%;
transform: scale(1, 0);
transform-origin: top;
transition: transform 400ms ease-in-out;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
margin-bottom: 1em;
margin-left: 1em;
}
nav a {
color: white;
text-decoration: none;
font-size: 1.2rem;
text-transform: uppercase;
opacity: 0;
transition: opacity 150ms ease-in-out;
}
nav a:hover {
color: #000;
}
.nav-toggle:checked ~ nav {
transform: scale(1,1);
}
.nav-toggle:checked ~ nav a {
opacity: 1;
transition: opacity 250ms ease-in-out 250ms;
}
#media screen and (min-width: 800px) {
.nav-toggle-label {
display: none;
}
header {
display: grid;
grid-template-columns: 1fr auto minmax(600px, 3fr) 1fr;
}
.logo {
grid-column: 2 / 3;
}
nav {
// all: unset; /* this causes issues with Edge, since it's unsupported */
position: relative;
text-align: left;
transition: none;
transform: scale(1,1);
background: none;
top: initial;
left: initial;
/* end Edge support stuff */
grid-column: 3 / 4;
display: flex;
justify-content: flex-end;
align-items: center;
}
nav ul {
display: flex;
}
nav li {
margin-left: 3em;
margin-bottom: 0;
}
nav a {
opacity: 1;
position: relative;
}
nav a::before {
content: '';
display: block;
height: 5px;
background: black;
position: absolute;
top: 1.75em;
left: 0;
right: 0;
transform: scale(0, 1);
transition: transform ease-in-out 250ms;
}
nav a:hover::before {
transform: scale(1,1);
}
}
</style>
</head>
<body>
<header>
<h1 class="logo"><img src="Images/Logo5.JPG"></h1>
<input type="checkbox" id="nav-toggle" class="nav-toggle">
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
<label for="nav-toggle" class="nav-toggle-label">
<span></span>
</label>
</header>
here a jsfifed for your answer jsfiddle
i've addded dummy image.. becuse your relative path image not open as here... below code added to your code
h1 {
margin:0
}
.logo a {
display: flex;
justify-content: center;
}
.logo img {
height: 45px;
}
.logo {
grid-column: 2 / 3;
transform: scale(2);
}
Update your logo class.
read up on devtools - This will help you easily troubleshoot problems like this.
As the child elements grows, so must the parent in order to accommodate the child.
Your previous logo text had a top and bottom margin as well on the h1 tag that it was enclosed in. Removing some top and bottom margins on the h1 will help you increase the logo
I've been playing around with some navigation effects for a project and I've hit a few problems I'm afraid.
Firstly, the transition timing seems a bit off. My general desire was to have the "tooltip", or link name/label, to slide out when you hover over, and then slide back in when you hover off. The idea was to have the highlight color of the icon (numbers in this case) to appear as though it's simply extending and revealing the word, and then shrinking until it's all gone. I've tried a number of variations of timing and delays, but no luck.
I'm also having issues with getting the span to fill the available space/same height of the link area. I altered the spans color to highlight this discrepancy in area.
Lastly, I've put a longer name for link 5 to demonstrate the limitation/problem with using a fixed/specific width for the span. I don't think there's anyway to achieve all that I'm hoping to as well as having a variable width that depends on the length of the text.
Here is the code I have (CodePen link below):
HTML:
<body>
<div class="navigation navbar-fixed-top">
<div class="navigation container">
<ul class="navigation nav-left">
<li>1<span class="tooltiptext">Welcome</span></li>
<li>2<span class="tooltiptext">Second</span></li>
<li>3<span class="tooltiptext">Third</span></li>
<li>4<span class="tooltiptext">Fourth</span></li>
<li>5<span class="tooltiptext">ExtraLongOneToExposeProblem</span></li>
<li>6<span class="tooltiptext">Sixth</span></li>
</ul>
</div>
</div>
</body>
CSS:
.navigation::after {
clear: both;
}
.navigation::before, .navigation::after {
display: table;
content: " ";
}
.container::after {
clear: both;
}
.container::before, .container::after {
display: table;
content: " ";
}
.navigation {
min-height: 50px;
padding-left: 0;
padding-right: 0;
list-style: none;
z-index: 1;
}
.navigation > li {
display: block;
position: relative;
}
.nav-right, .nav-right > li {
float: right;
margin: 0;
}
.nav-left, .nav-left > li {
float: left;
margin: 0;
}
.navbar-fixed-top {
position: sticky;
margin-bottom: 20px;
top: 0;
border-bottom: 1px solid black;
}
.navbar-fixed-top::before {
display: block;
content: "";
position: absolute;
z-index: -1;
left: 0;
right: 0;
bottom: 0;
top: -142px;
background-color: #008ed0;
background-image: linear-gradient(to bottom right, rgb(0, 87, 128), rgb(0, 157, 230));
}
.container {
margin-right: auto;
margin-left: auto;
padding-right: 15px;
padding-left: 15px;
}
.tooltiptext {
display: block;
background-color: #008ed0;
opacity: 0;
width: 0;
color: white;
margin-left: 10px;
text-align: center;
z-index: 1001;
transition: width 1s ease-in-out, opacity 0.5s ease-in-out 0.5s;
}
.navigation li:hover .tooltiptext {
width: 150px;
opacity: 1;
}
body {
padding-top: 0px;
padding-bottom: 20px;
margin: 0;
}
ul, ol {
margin: 0;
padding: 0;
}
li > a {
display: inline-flex;
width: 100%;
padding: 15px 20px;
color: #fff;
text-decoration: none;
fill: white;
}
li > a:hover, li > a:focus {
background-color: #d50f67;
color: white;
fill: white;
}
*,
*::before,
*::after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Any and all help is greatly appreciated. Linking to this CodePen in the hopes someone can help.
Kind regards,
Don
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?