I have this responsive nav I found on codepen.io. It works nicely on codepen.io however not so much in JS Fiddle (Included Below). When the screen is dragged over the 3 lines for the drop down icon link gets all wonky, it is not aligned propertly with the rest of the navigation. Also whenever there is a dropdown in use, the options no not align on top of each other (desktop or mobile). Related Dropdown CSS is below - Any help is appreciated Thanks. I put it into a JS Fiddle here.
// Dropdown list
ul li {
min-width: 190px;
a {
padding: 15px;
line-height: 20px;
}
}
}
}
}
// Dropdown list binds to JS toggle event
.nav-dropdown {
position: absolute;
display: none;
z-index: 1;
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
}
/* Mobile navigation */
// Binds to JS Toggle
.nav-mobile {
display: none;
position: absolute;
top: 0;
right: 0;
background: $nav-background;
height: $nav-height;
width: $nav-height;
}
#media only screen and (max-width: $breakpoint) {
// Hamburger nav visible on mobile only
.nav-mobile {
display: block;
}
nav {
width: 100%;
padding: $nav-height 0 15px;
ul {
display: none;
li {
float: none;
a {
padding: 15px;
line-height: 20px;
}
ul li a {
padding-left: 30px;
}
}
}
}
.nav-dropdown {
position: static;
}
}
#media screen and (min-width: $breakpoint) {
.nav-list {
display: block !important;
}
}
#nav-toggle {
position: absolute;
left: 18px;
top: 22px;
cursor: pointer;
padding: 10px 35px 16px 0px;
span,
span:before,
span:after {
cursor: pointer;
border-radius: 1px;
height: 5px;
width: 35px;
background: $nav-font-color;
position: absolute;
display: block;
content: '';
transition: all 300ms ease-in-out;
}
span:before {
top: -10px;
}
span:after {
bottom: -10px;
}
&.active span {
background-color: transparent;
&:before,
&:after {
top: 0;
}
&:before {
transform: rotate(45deg);
}
&:after {
transform: rotate(-45deg);
}
}
}
It was an issue with the SCSS. I just copied and pasted it over from your codepen, and it's working fine now in this jsfiddle I forked from your original. I added a negative margin to your nav-container class to correct the alignment issue with the toggle button. Additionally, you can use a flexbox to get the center-positioning for your menu items.
// Container with no padding for navbar
.nav-container {
margin: auto;
margin-top: -8px;
display: flex;
justify-content: center;
}
Please see: https://jsfiddle.net/z8rxe922/5/
You just have to use position as relative instead of absolute and in the responsive screen you have to set padding to 0.
.navmobile {
position: relative;
float:right;
}
#media only screen and (max-width: 800px) {
nav {
padding:0px;
}
}
What was your second question ? It is a bit unclear.
Related
mobile menu closed (the pink links are unclickable because of the menu)
html {
overflow-x: initial !important;
}
/*nav-bar-desktop*/
.mainNav {
display: none;
}
/*nav-bar-mobile*/
.page-header {
background: #322759;
width: 100%;
height: 20%;
position: fixed;
.logo {
position: fixed;
width: 35%;
margin-top: -28px;
margin-left: -40px;
}
.nav-bar {
z-index: -1;
}
.page-header-links {
z-index: 0;
}
}
.nav-bar-mobile {
position: relative;
display: block;
}
.nav-bar-mobile button {
position: fixed;
right: 40px;
top: 40px;
z-index: 2;
cursor: pointer;
background: transparent;
border: none;
}
.menuNav {
overflow-y: none;
list-style: none;
top: 0;
right: 0;
bottom: 0;
height: 100vh;
width: 0;
overflow: hidden;
max-width: 414px;
text-align: center;
}
.menuNav.showMenu {
width: 100%;
right: 0px;
height: 100vh;
padding-top: 200px;
position: fixed;
background: #322759;
.mobile-nav-monster {
position: fixed;
left: 0;
bottom: 0;
width: 65vw;
justify-content: flex-start;
}
}
.nav-tabs {
padding: 20px;
border-bottom: none !important;
text-decoration: none;
color: #D9D8D8;
}
.menuNav:link {
color: #D9D8D8;
}
.menuNav:visited {
color: #D9D8D8;
}
.menuNav:active {
color: #E87DA6;
}
.hamburger-close {
color: #FFFFFF;
width: 40px;
height: 40px;
margin-top: 10px;
transform: scale(1.7);
}
.hamburger-open {
color: #FFFFFF;
width: 40px;
height: 40px;
margin-top: 10px;
transform: scale(1.7);
}
}
This is my css file containing the styling for the mobile hamburger menu. The links are clickable when I set the display:none for either the nav-bar class (which is the styling for the grid containing the nav bar) or the menuNav (styling for the actual hamburger menu, note it is different from mainNav which is the desktop ver). I've been playing around with z-index but they don't really affect anything (assuming this is because I have to go through all the pages and make them a higher z index than the hamburger menu) but I was wondering if there was a different solution?
Check the position style and also check if you have set the z-index properly on the elements. The greater z-index appears in the front.
I have got the following html and css. The problem is when it is run the full screen menu only appears in the nav bar. The problem only appears when using safari.
I can solve the problem my getting rid of
.nav {
position: fixed;
}
but I still want the nav bar to be fixed at the top of the page.
.nav {
font-family: Arial-BoldMT;
font-size: 16px;
list-style: none;
text-align: right;
padding: 0px 0 0px 0;
box-shadow:0px 1px 1px #d3d3d3;
background-color: white;
width: 100%;
z-index:0.1;
overflow: auto;
position: fixed;
top: 0;
}
.nav p {
float: left;
margin-left: 40px;
color: #333333;
}
.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
overflow-x: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
}
.overlay a:hover, .overlay a:focus {
color: #f1f1f1;
}
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}
.slider {
font-size:30px;
cursor:pointer;
float:right;
margin-right: 40px;
}
#media screen and (max-height: 450px) {
.overlay a {font-size: 20px}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}
<div class="nav">
<p>LIAM VINSON</p>
<div id="myNav" class="overlay">
×
<div class="overlay-content">
HOME
ABOUT
PHOTOGRAPHY
PORTFOLIO
CONTACT
</div>
</div>
<span class="slider" onclick="openNav()">☰</span>
<script>
function openNav() {
document.getElementById("myNav").style.width = "100%";
}
function closeNav() {
document.getElementById("myNav").style.width = "0%";
}
</script>
</div>
z-index:0.1;
is not valid css.
z-index must be an integer - either negative or positive. Chances are most browsers are just treating it as 0, but Safari don't know what to do with it. So, change it to an integer like
z-index:1;
and set your overlay to z-index:2 (though I would recommend spacing these numbers out in case you have to index additional elements. ie. z-index:100; and z-index:200;)
Setting it as fixed, with top at 0, should fix it to the top of page for you once you correct that z-index issue you got there.
The problem was
.nav {
overflow: auto;
}
It stopped the overlay from being shown outside of the nav div.
I am using adtile's fixed responsive nav (demo here) for a website. It's working perfectly, except for one thing: I'd like the header background color to be transparent at first and then fade in as you scroll down to the About section. If possible, the header background should have 100% opacity right when the About link color changes. I'm really lost about how to make this work, so any help would be greatly appreciated!
I made a jsfiddle here, but there is a lot of Javascript so it might be easier to look at the repo on GitHub here.
HTML:
<header>
<a href="#home" class="logo" data-scroll>Fixed Nav</a>
<nav class="nav-collapse">
<ul>
<li class="menu-item active"><a href="#home" data-scroll>Home</a></li>
<li class="menu-item"><a href="#about" data-scroll>About</a></li>
<li class="menu-item"><a href="#projects" data-scroll>Projects</a></li>
<li class="menu-item"><a href="#blog" data-scroll>Blog</a></li>
</ul>
</nav>
</header>
<section id="home">
<h1>Fixed Nav</h1>
<p>The code and examples are hosted on GitHub and can be found from here. Read more about the approach from our blog.</p>
</section>
<section id="about">
<h1>About</h1>
</section>
<section id="projects">
<h1>Projects</h1>
</section>
<section id="blog">
<h1>Blog</h1>
</section>
CSS:
body, div,
h1, h2, h3, h4, h5, h6,
p, blockquote, pre, dl, dt, dd, ol, ul, li, hr,
fieldset, form, label, legend, th, td,
article, aside, figure, footer, header, hgroup, menu, nav, section,
summary, hgroup {
margin: 0;
padding: 0;
border: 0;
}
a:active,
a:hover {
outline: 0;
}
#-webkit-viewport { width: device-width; }
#-moz-viewport { width: device-width; }
#-ms-viewport { width: device-width; }
#-o-viewport { width: device-width; }
#viewport { width: device-width; }
/* ------------------------------------------
RESPONSIVE NAV STYLES
--------------------------------------------- */
.nav-collapse ul {
margin: 0;
padding: 0;
width: 100%;
display: block;
list-style: none;
}
.nav-collapse li {
width: 100%;
display: block;
}
.js .nav-collapse {
clip: rect(0 0 0 0);
max-height: 0;
position: absolute;
display: block;
overflow: hidden;
zoom: 1;
}
.nav-collapse.opened {
max-height: 9999px;
}
.disable-pointer-events {
pointer-events: none !important;
}
.nav-toggle {
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
#media screen and (min-width: 40em) {
.js .nav-collapse {
position: relative;
}
.js .nav-collapse.closed {
max-height: none;
}
.nav-toggle {
display: none;
}
}
/* ------------------------------------------
DEMO STYLES
--------------------------------------------- */
body {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
text-size-adjust: 100%;
color: #37302a;
background: #fff;
font: normal 100%/1.4 sans-serif;
}
section {
border-bottom: 1px solid #999;
text-align: center;
padding: 100px 0 0;
height: 800px;
width: 100%;
}
h1 {
margin-bottom: .5em;
}
p {
width: 90%;
margin: 0 auto;
}
/* ------------------------------------------
FIXED HEADER
--------------------------------------------- */
header {
background: #f4421a;
position: fixed;
z-index: 3;
width: 100%;
left: 0;
top: 0;
}
.logo {
-webkit-tap-highlight-color: rgba(0,0,0,0);
text-decoration: none;
font-weight: bold;
line-height: 55px;
padding: 0 20px;
color: #fff;
float: left;
}
/* ------------------------------------------
MASK
--------------------------------------------- */
.mask {
-webkit-transition: opacity 300ms;
-moz-transition: opacity 300ms;
transition: opacity 300ms;
background: rgba(0,0,0, .5);
visibility: hidden;
position: fixed;
opacity: 0;
z-index: 2;
bottom: 0;
right: 0;
left: 0;
top: 0;
}
.android .mask {
-webkit-transition: none;
transition: none;
}
.js-nav-active .mask {
visibility: visible;
opacity: 1;
}
#media screen and (min-width: 40em) {
.mask {
display: none !important;
opacity: 0 !important;
}
}
/* ------------------------------------------
NAVIGATION STYLES
--------------------------------------------- */
.fixed {
position: fixed;
width: 100%;
left: 0;
top: 0;
}
.nav-collapse,
.nav-collapse * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.nav-collapse,
.nav-collapse ul {
list-style: none;
width: 100%;
float: left;
}
#media screen and (min-width: 40em) {
.nav-collapse {
float: right;
width: auto;
}
}
.nav-collapse li {
float: left;
width: 100%;
}
#media screen and (min-width: 40em) {
.nav-collapse li {
width: auto;
}
}
.nav-collapse a {
-webkit-tap-highlight-color: rgba(0,0,0,0);
border-top: 1px solid white;
text-decoration: none;
background: #f4421a;
padding: 0.7em 1em;
color: #fff;
width: 100%;
float: left;
}
.nav-collapse a:active,
.nav-collapse .active a {
background: #b73214;
}
#media screen and (min-width: 40em) {
.nav-collapse a {
border-left: 1px solid white;
padding: 1.02em 2em;
text-align: center;
border-top: 0;
float: left;
margin: 0;
}
}
.nav-collapse ul ul a {
background: #ca3716;
padding-left: 2em;
}
#media screen and (min-width: 40em) {
.nav-collapse ul ul a {
display: none;
}
}
/* ------------------------------------------
NAV TOGGLE STYLES
--------------------------------------------- */
#font-face {
font-family: "responsivenav";
src:url("../icons/responsivenav.eot");
src:url("../icons/responsivenav.eot?#iefix") format("embedded-opentype"),
url("../icons/responsivenav.ttf") format("truetype"),
url("../icons/responsivenav.woff") format("woff"),
url("../icons/responsivenav.svg#responsivenav") format("svg");
font-weight: normal;
font-style: normal;
}
.nav-toggle {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-decoration: none;
text-indent: -300px;
position: relative;
overflow: hidden;
width: 60px;
height: 55px;
float: right;
}
.nav-toggle:before {
color: #fff; /* Edit this to change the icon color */
font: normal 28px/55px "responsivenav"; /* Edit font-size (28px) to change the icon size */
text-transform: none;
text-align: center;
position: absolute;
content: "\2261"; /* Hamburger icon */
text-indent: 0;
speak: none;
width: 100%;
left: 0;
top: 0;
}
.nav-toggle.active:before {
font-size: 24px;
content: "\78"; /* Close icon */
}
JAVASCRIPT:
There are too many lines of code to fit on Stackoverflow. Please see the Javascript files on GitHub here.
You can definitely use Skrollr to achieve this. However, I hope someone else can find a solution that does not rely on this.
https://github.com/Prinzhorn/skrollr
You can essentially ease opacity/color changes across a set scroll height/position. So it would do what you want perfectly. The demo https://prinzhorn.github.io/skrollr/ has a great example about half-way down the page.
Try making header background initially transparent and add class over header on scroll.
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 800) {
$("header").addClass("darkHeader");
} else {
$("header").removeClass("darkHeader");
}
});
Style new class as per your requirement. Hope this is what you are looking for.
U can do this by JQuery simply first add any class to home link i.e 'home' <li class="menu-item home active"><a href="#home" data-scroll>Home</a></li> then detect on scroll if it is active add class to header
example
$(window).scroll(function(){
if ($(".menu-item.home").hasClass("active")) {
$("header").addClass("default-header")
}else {
$("header").removeClass("default-header")
}
})
than do
.default-header{
// your css code here for default/home section header
}
Code of .JS file
$(document).scroll(function (){
var menuheight= $('header').height();
var y = $(this).scrollTop();
if (y>(menuheight))
{
$('.menu_nav_features').addClass('sticky');
}
else{
$('.menu_nav_features').removeClass('sticky');
}
});
Code of .css class to be add on scroll down for specific height file
.sticky{
position: fixed;
top: 0;
}
This is my Navigation Bar code of .less file. ( for information )
.menu_nav_features{
width: 100%;
height: 46px !important;
border-bottom: 1px solid #e6e6e6;
border-top: 1px solid #e6e6e6;
.menu-features{
margin-top: 0px;
width: 1200px !important;
list-style:none;
margin-left: -35px;
li{
display: inline;
.transition;
a{
background: #f4f4f4;
margin-right:-3px;
display: inline-block;
text-decoration: none;
color:#444444;
padding:0px 30px;
line-height: 44px;
.transition;
}
a:active, a:hover{
color: #000;
background: #fdfdfd;
}
}
li:nth-child(2):hover .bf{
.displayall;
.transition;
}
.bf{
display: none;
position: absolute;
margin-left: 134px;
padding-top: 7px;
// top: 50px;
.bf_btns{
a{
display: block;
width: 238px !important;
}
a:last-child{
margin-top: 0px;
}
}
}
}
}
Problem Statement : When scroll bar height greater than my Header height then my Navigation bar fix cause of Sticky class.It show immediately and i want to show it slowly down or something like slideDown JQuery.I add tranistion to Sticky Class but nothing happened.
You can simply fix this problem with css
#keyframes scroll-down {
from {transform: translate(0,100%)}
to {transfrom: translate(0,0)}
}
.sticky {
position: fixed;
top:0;
animation-name: scroll-down;
animation-duration: 0.4s;
}
I have upgraded from Foundation 4 to Foundation 5, and I am trying to set up a custom break point in the top bar without using Sass.
In foundation 4 you were able to change the following css code in the foundation.css file:
.top-bar-js-breakpoint {
width: 48em !important;
...
}
#media only screen and (min-width: 48em) {
...
}
But this isn't possible with Foundation 5, atleast I am not able to find the piece of CSS or JS code to change it.
I have also tried redownloading a new custom foundation installation with the TOP BAR BREAKPOINT set to 9999em, which just does not work. Even after removing all previous files and code.
This simple problem is driving me nuts, so it would be great if someone would put me out my misery with a simple sollution, please!
Thanks in advance.
Find the meta.foundation-mq-topbar css selector in your code and change width attribute value to 48em or any other size you want.
Another solution:
Foundation separate components media query from each other, so you can change breakpoint for each components. Look at this code:
#media only screen and (min-width: 40.063em) {
.top-bar {
background: #333333;
*zoom: 1;
overflow: visible; }
.top-bar:before, .top-bar:after {
content: " ";
display: table; }
.top-bar:after {
clear: both; }
.top-bar .toggle-topbar {
display: none; }
.top-bar .title-area {
float: left; }
.top-bar .name h1 a {
width: auto; }
.top-bar input,
.top-bar .button {
font-size: 0.875rem;
position: relative;
top: 7px; }
.top-bar.expanded {
background: #333333; }
.contain-to-grid .top-bar {
max-width: 62.5em;
margin: 0 auto;
margin-bottom: 0; }
.top-bar-section {
-webkit-transition: none 0 0;
-moz-transition: none 0 0;
transition: none 0 0;
left: 0 !important; }
.top-bar-section ul {
width: auto;
height: auto !important;
display: inline; }
.top-bar-section ul li {
float: left; }
.top-bar-section ul li .js-generated {
display: none; }
.top-bar-section li.hover > a:not(.button) {
background: #272727;
color: white; }
.top-bar-section li a:not(.button) {
padding: 0 15px;
line-height: 45px;
background: #333333; }
.top-bar-section li a:not(.button):hover {
background: #272727; }
.top-bar-section .has-dropdown > a {
padding-right: 35px !important; }
.top-bar-section .has-dropdown > a:after {
content: "";
display: block;
width: 0;
height: 0;
border: inset 5px;
border-color: rgba(255, 255, 255, 0.4) transparent transparent transparent;
border-top-style: solid;
margin-top: -2.5px;
top: 22.5px; }
.top-bar-section .has-dropdown.moved {
position: relative; }
.top-bar-section .has-dropdown.moved > .dropdown {
display: none; }
.top-bar-section .has-dropdown.hover > .dropdown, .top-bar-section .has-dropdown.not-click:hover > .dropdown {
display: block; }
.top-bar-section .has-dropdown .dropdown li.has-dropdown > a:after {
border: none;
content: "\00bb";
top: 1rem;
margin-top: -2px;
right: 5px; }
.top-bar-section .dropdown {
left: 0;
top: auto;
background: transparent;
min-width: 100%; }
.top-bar-section .dropdown li a {
color: white;
line-height: 1;
white-space: nowrap;
padding: 12px 15px;
background: #333333; }
.top-bar-section .dropdown li label {
white-space: nowrap;
background: #333333; }
.top-bar-section .dropdown li .dropdown {
left: 100%;
top: 0; }
.top-bar-section > ul > .divider, .top-bar-section > ul > [role="separator"] {
border-bottom: none;
border-top: none;
border-right: solid 1px #4d4d4d;
clear: none;
height: 45px;
width: 0; }
.top-bar-section .has-form {
background: #333333;
padding: 0 15px;
height: 45px; }
.top-bar-section ul.right li .dropdown {
left: auto;
right: 0; }
.top-bar-section ul.right li .dropdown li .dropdown {
right: 100%; }
.no-js .top-bar-section ul li:hover > a {
background: #272727;
color: white; }
.no-js .top-bar-section ul li:active > a {
background: #2ba6cb;
color: white; }
.no-js .top-bar-section .has-dropdown:hover > .dropdown {
display: block; }
}
You have to find the above code and just change this media query for changing top bar breakpoint.
Okay, I think I have the CSS changes pinned after the SCSS compiles.
Search for .top-bar in your CSS and look for the entry similar to the below, and change "981px" as needed:
#media only screen and (min-width: 981px) {
.top-bar {
background: linear-gradient(to bottom, #7d7d7d 0%, #646464 100%);
*zoom: 1;
overflow: visible
}
Search for meta.foundation-mq-topbar in your CSS and change "981px" as needed:
meta.foundation-mq-topbar {
font-family: "/only screen and (min-width: 981px)/";
width: 981px
}
Basically what i did to make it work after reading the solution from Parhum. Search for the
meta.foundation-mq-topbar. There should be a width corresponding to it, in my case which is the 40.063em.This one has to be changed. Now, look for the corresponding media query (i.e. #media only screen and (min-width:40.063em)) Change BOTH of the width in both of the line. It should be working fine now.
meta.foundation-mq-topbar {
font-family: "/only screen and (min-width:64.00em)/";
width: 64.00em !the width of this must change; }
#media only screen and (min-width: 64.00em) {
.top-bar {
background: #333333;