The site I'm working is suposed to change the logo location and size, from top to the far left, and incidentally shrink the navbar to fit the new size, when the user is scrolling down. I've managed to get it to work with javascript but now a different problem ocurred: when the logo is repositioned to the left it pushes the menu items below.
To better illustrate it here's a fiddle: https://jsfiddle.net/resch/d6vfertf/3/
What I want is when the user scrolls down, the logo goes to the far left of the menu but the menu items stay in the middle (vertically speaking) of the navbar.
NOTE: This blog illustrates perfectly what I am trying to do: http://www.depoisdosquinze.com/
Couldn't find my answer here, please feel free to mark as duplicate and vote to close if this is already answered.
Thank you!
var $header = $("nav.navbar");
var $logo = $("a.logo");
var $li = $("ul.navbar-nav > li");
var $img = $("img#logo");
$(window).scroll(function() {
var e = $(this).scrollTop();
if (e > 90) {
$header.css("height", "60px");
$img.css("max-width", "180px");
$logo.removeClass('logo');
$logo.addClass('logo.scroll');
$li.addClass('scroll');
} else {
$header.css("height", "120px");
$img.css("max-width", "300px");
$logo.removeClass('logo.scroll');
$logo.addClass('logo');
$li.removeClass('scroll');
}
});
img#logo {
max-width: 300px;
border: none;
}
.navbar {
position: relative;
margin-bottom: 0;
background-color: white;
border: 0;
font-size: 12px !important;
letter-spacing: 4px;
height: 120px;
opacity: 0.9;
}
.navbar-nav {
float: none;
margin: 0 auto;
display: block;
text-align: center;
}
.navbar-nav>li.scroll {
display: inline-block;
float: none;
padding-top: 0px;
}
.navbar-nav>li {
display: inline-block;
float: none;
padding-top: 70px;
}
.navbar-fixed-top {
position: fixed !important;
}
.logo.scroll {
position: absolute;
display: block;
}
.logo {
position: absolute;
left: 50%;
margin-left: -160px !important;
display: block;
}
.navbar-toggle {
z-index: 3;
}
.navbar li a,
.navbar .navbar-brand {
color: #beb5ac !important;
}
.navbar-nav li a:hover {
color: #ded8d2 !important;
transition: color 1s ease;
}
.navbar-nav li.active a {
color: #fff !important;
background-color: #29292c !important;
}
.navbar-default .navbar-toggle {
border-color: transparent;
}
#media screen and (max-width: 780px) {
.logo {
margin-top: -50px;
padding-top: 10px !important;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<a id="brand" class="logo" href="teste3.html">
<img id="logo" src="https://s4.postimg.org/3tdea6k19/logo2.png" alt=""></a>
<div class="navbar-header navbar-header-center">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="index">INÍCIO</li>
<li class="sobre">SOBRE</li>
<li class="ilustracao">ILUSTRAÇÃO</li>
<li class="design">DESIGN GRÁFICO</li>
</ul>
</div>
</div>
</nav>
</header>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
The problem is that when you scroll down your <div class="collapse navbar-collapse" id="myNavbar">, it stays full width. The quickest way to solve the problem you need to display in inline i.e. add display: inline-block to it. If the style is not persistent add !important to it.
However, it is a good idea to avoid using !important in your code. I will suggest reading about flexbox (https://css-tricks.com/snippets/css/a-guide-to-flexbox/) as it will make it easier to implement changes without using !importtant in your code.
Froggy http://flexboxfroggy.com is also helpful to learn flexbox. I hope this helps.
Related
Edit: I added the windo scroll function I make it but the contents under tabs goes over from it. How can I fix that?
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 500) {
console.log(true);
$(".tabs").addClass("tabs-position");
} else {
console.log(false);
$(".tabs").removeClass("tabs-position");
}
});
.tabs-position {
margin-bottom: 50px;
position:sticky;
top: 0;
background-color: red;
}
I have a page with a navbar and tabs. When I click them I direct the user to the section in the same page using the id attribute, however my tabs are in the middle of my page which is fine. What I am trying to achieve is to move them under my navbar section when I click them.
I tried after attribute but I don't get it. I have included my code below, How can I replace their position?
<section class="tabs">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="tab-outer">
<div class="tab-list">
<ul>
<li>
Rooms
</li>
<li>
info tab
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
.tabs {
margin-bottom: 50px;
.tab-outer {
border-bottom: 4px solid #f5f5f5;
position: sticky;
top: 70px;
padding: 20px 0 0 0;
}
.tab-list {
a {
color: #4a4947;
}
ul {
padding: 0 30px;
display: flex;
justify-content: space-between;
list-style-type: none;
}
}
}
You cannot nest CSS like that. Instead, use to select siblings at any level. And also, you have to put position:sticky on the direct sibling of an element that is being scrolled.
.tabs {
margin-bottom: 50px;
position: sticky;
top: 0;
background-color: #ffffff;
}
.tabs .tab-outer {
border-bottom: 4px solid #f5f5f5;
top: 70px;
padding: 20px 0 0 0;
}
.tabs .tab-list a {
color: #4a4947;
}
.tabs .tab-list ul {
padding: 0 30px;
display: flex;
justify-content: space-between;
list-style-type: none;
}
<section class="tabs">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="tab-outer">
<div class="tab-list">
<ul>
<li>
Rooms
</li>
<li>
info tab
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
<div style="height:3600px;width:100%;background-color:blue;color:white;">foo</div>
By using z-index I fixed the problem
.tabs-position {
margin-bottom: 50px;
position:sticky;
top: 0;
background-color: red;
z-index: 1;
}
Here is the snippet:
const exitBtn = document.querySelector('#exitBtn');
menuBtn.addEventListener('click', () => {
const menu = document.querySelectorAll('.menu');
for (let el of menu) {
el.style.display = 'block'
}
})
#media (max-width: 934px) {
.max-width {
padding: 0 50px;
}
.fa.fa-bars.menuBtn {
display: block;
}
.menu {
position: fixed;
height: 100vh;
width: 100%;
left: 0;
top: 0;
background-color: #111;
text-align: center;
padding-top: 110px;
}
.exit {
z-index: 999;
display: none;
margin: 1.8rem;
}
.menu ul li {
display: block;
}
.menu li a {
display: inline-block;
margin: 20px 0;
font-size: 35px;
}
}
<header>
<nav class="navbar" id="nav">
<div class="max-width">
<div class="logo"><a id="headSpan" href="index.html">Port<span>folio.</span></a></div>
<div class="menu">
<ul>
<li>Home</li>
<li>About</li>
<li>Skills</li>
<li>Projects</li>
<li>CV</li>
<li>Contact</li>
</ul>
</div>
<div>
<i class="fa fa-bars menuBtn" id="menuBtn" aria-hidden="true"></i>
</div>
<div class="exit">
<i class="fa fa-times-circle exit" id="exitBtn" aria-hidden="true"></i>
</div>
</div>
</nav>
I tried making it block but it did not work, I also tried making flex-direction to be column but still did not work. Am I doing something wrong somewhere? What is causing the issue of the menu not being displayed from up to down? Is there an alternative way to go about this?
Maybe try to set the position of the navbar class to fixed if it is a sidebar you are trying to do, or as how I perceive, you are trying to make a menu bar on the side supposedly and not a rowline. Then the class of menu should be the one flexed and not fixed. You are supposed to make a container for the menu that is the fixed one so that all of its content will be fixed on the side. Show me more of the css and I might help. But try doing
.navbar{
width: width;
height: 100vh;
position: fixed;}
Then the "max-width" class will have the flex attribute
.max-width{
display: flex;
flex-direction: column;}
I have a sticky navbar. When the page loads, the first home div displays properly. But, after scrolling down, and then back up, some of the content from the home div is hidden by the sticky nav bar at the top. How can I fix this behavior? Any suggestions are appreciated!
window.onscroll = () => {
myFunction()
};
const navbar = document.getElementById("navbar");
const sticky = navbar.offsetTop;
myFunction = () => {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
body {
padding: 0px;
margin: 0px;
}
#navbar {
overflow: hidden;
background-color: #000;
}
#navbar a {
float: right;
display: block;
text-align: center;
padding: 1vw;
text-decoration: none;
font-family: 'Muli', sans-serif;
font-size: 2.5vw;
font-weight: 400;
font-style: italic;
}
.color-nav a {
color: white;
}
.active {
background-color: #fff;
color: black !important;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.main-section {
height: 45vw;
}
<body>
<header>
<nav>
<div class='color-nav' id="navbar">
<a id='contact-link' href="#contact">Contact</a>
<a id="about-link" href="#about">About</a>
<a id='portfolio-link' href="#portfolio">Portfolio</a>
<a id='home-link' class="active" href="#home">Home</a>
</div>
</nav>
</header>
<section>
<div id='home-1' class="home main-section">
</div>
</section>
<section>
<div id="portfolio-1" class="portfolio main-section">
</div>
</section>
<section>
<div id="about-1" class='about main-section'>
</div>
</section>
<section>
<div id='contact-1' class='contact main-section'>
</div>
</section>
</body>
The problem is that when you scroll you are adding the position of fixed to the #navbar so you are taking it out of the flow of the page and fixing it to the screen. In doing this you are taking it out of the <nav> and the <header> and these elements are now going to have a height of 0. If you inspect your #navbar with chrome dev tools you can see that it is 31px tall ,in my window at least, it may be different in your window since you coded it to have a padding in vw wich if you ask me is not a very good practice so you may want to rethink that and give it a padding in px, em, or rem so an easy fix would be to just give the parent div, either <header> or <nav> a height of 31px or whatever your navbars height is so when you take the navbar out of the page flow you won't lose the navs height when its gone so something like the following:
header{
height:31px;
}
Here it is in a snippet:
window.onscroll = () => {
myFunction()
};
const navbar = document.getElementById("navbar");
const sticky = navbar.offsetTop;
myFunction = () => {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
body {
padding: 0px;
margin: 0px;
}
header{
height:31px;
}
#navbar {
overflow: hidden;
background-color: #000;
}
#navbar a {
float: right;
display: block;
text-align: center;
padding: 1vw;
text-decoration: none;
font-family: 'Muli', sans-serif;
font-size: 2.5vw;
font-weight: 400;
font-style: italic;
}
.color-nav a {
color: white;
}
.active {
background-color: #fff;
color: black !important;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
section{
height:100vh;
border:5px solid green;
}
<header>
<nav>
<div class='color-nav' id="navbar">
<a id='contact-link' href="#contact">Contact</a>
<a id="about-link" href="#about">About</a>
<a id='portfolio-link' href="#portfolio">Portfolio</a>
<a id='home-link' class="active" href="#home">Home</a>
</div>
</nav>
</header>
<section>
<div id='home-1' class="home main-section">
</div>
</section>
<section>
<div id="portfolio-1" class="portfolio main-section">
</div>
</section>
<section>
<div id="about-1" class='about main-section'>
</div>
</section>
<section>
<div id='contact-1' class='contact main-section'>
</div>
</section>
But if if you are just going to have your navbar at the top of the page anyway there is no reason to have any of this javascript you can just add padding to the top of the body and give the navbar a position of fixed. There is no reason to have any of these scroll events at all. Adding the javascript scroll events like these are for if you have something above your navbar and you want it to fix after scrolling down the page a ways. Here is a snippet of that:
body {
padding: 0px;
padding-top:31px;
margin: 0px;
}
nav{
position:fixed;
top:0;
width:100%;
}
#navbar {
overflow: hidden;
background-color: #000;
}
#navbar a {
float: right;
display: block;
text-align: center;
padding: 1vw;
text-decoration: none;
font-family: 'Muli', sans-serif;
font-size: 2.5vw;
font-weight: 400;
font-style: italic;
}
.color-nav a {
color: white;
}
.active {
background-color: #fff;
color: black !important;
}
section{
height:100vh;
border:5px solid green;
}
<nav>
<div class='color-nav' id="navbar">
<a id='contact-link' href="#contact">Contact</a>
<a id="about-link" href="#about">About</a>
<a id='portfolio-link' href="#portfolio">Portfolio</a>
<a id='home-link' class="active" href="#home">Home</a>
</div>
</nav>
<section>
<div id='home-1' class="home main-section">
</div>
</section>
<section>
<div id="portfolio-1" class="portfolio main-section">
</div>
</section>
<section>
<div id="about-1" class='about main-section'>
</div>
</section>
<section>
<div id='contact-1' class='contact main-section'>
</div>
</section>
position: fixed;
doesn't leaves gap so the space it has cover will be taken by the other elements because of relative behaviour. You need to push the content with margin or padding with same size of the navigation height.
I needed to change window.pageYOffset >= sticky to window.pageYOffset > sticky since the class was not being removed upon scrolling to the top.
After thoroughly trying to fix this issue - I need a little help.
I am trying to make a website that has a navbar (made with bootstrap) for websites and I am making a small drop-down menu for smaller screens (I haven't added this functionality yet, I just want it to work first). I haven't styled it much yet either.
The problem is that I know my button and code is working (because I have a codepen showing that it works), but in my website, I cannot see the drop-down menu. Not sure if it is hidden or what but I just can't figure this out.
Here is the HTML (because I have to put something...):
<div class = "dropdown">
<button onclick = "menuBtn ()" class = "dropBtn">Menu</button>
<div id = "dropCollapse" class = "dropdownContent">
<a class = "contentLinks" href = "#about">About</a>
<a class = "contentLinks" href = "#team">Team</a>
<a class = "contentLinks" href = "#photos">Photos</a>
<a class = "contentLinks" href = "#shirts">T-Shirts</a>
<a class = "contentLinks" href = "#contact">Contact</a>
</div>
</div>
I have played around with z-index (in a number of places but if you have a suggestion, feel free to make it and I will try it). I have taken the menu out of the navbar (thinking it had something to do with that). But mostly I am just confused - nothing else really answered my question about this menu issue. I feel like there is something small that I am overlooking and I just can't figure it out.
Here is a fiddle showing the basic outline of my website with the menu not working: https://jsfiddle.net/nekochan/eh69segg/1/
A few things I noticed:
you were using jQuery but did not define jQuery to load. If you do an "inspect element" you'll see that $ is not defined
also you had a few missing divs, and an anchor wasn't closed
I'd recommend just using purely jQuery if you're going to go that approach - it's a very simple example. Here is your updated fiddle - notice the toggle animates nicely :)
https://jsfiddle.net/qdL9mch2/1/
/* global $ */
$(document).ready(function() {
//makes the masethead fit the whole screen
$("#masthead").css("min-height", $(window).height());
//mobile menu button collapse
$(".dropBtn").on("click", function(){
$("#dropCollapse").toggle("show");
});
// Close the dropdown menu if the user clicks outside of it
//update to jquery
window.onclick = function(event) {
if (!event.target.matches('.dropBtn')) {
var dropdowns = document.getElementsByClassName("dropdownContent");
for (var i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
};
});
there are multiple errors there in your HTML for example <a class="navBrand" href="#masthead"> is not closing and your menuBtn is not being called, I would recommend you to use jquery completely if you have it included inside your project see here your code working
//mobile menu button collapse
function menuBtn() {
document.getElementById("dropCollapse").classList.toggle("show");
}
/* global $ */
$(document).ready(function() {
$("#my-button").click(function() {
document.getElementById("dropCollapse").classList.toggle("show");
})
//makes the masethead fit the whole screen
$("#masthead").css("min-height", $(window).height());
// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropBtn')) {
var dropdowns = document.getElementsByClassName("dropdownContent");
for (var i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
};
});
.main {
font-family: 'Roboto', sans-serif;
width: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
overflow-y: hidden;
}
.body {
position: relative;
}
#navBar {
margin-bottom: 0;
background-color: black;
font-family: 'Permanent Marker', cursive;
}
.brandImage {
height: 60px;
width: auto;
}
#navHeader {}
#navItem {}
#navLink {
text-decoration: none;
}
.dropBtn {
background-color: #4caf50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropBtn:hover,
.dropBtn:focus {
background-color: #3e8e41;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdownContent {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 9999;
}
.contentLinks {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.contentLinks:hover {
background-color: #f1f1f1;
}
.show {
display: block;
}
#media (max-width: 960px) {
#large-menu {
display: none;
}
.brandImage {
float: left;
}
}
#masthead {
background-color: #65737e;
background-image: url(https://static.pexels.com/photos/285286/pexels-photo-285286.jpeg);
width: 100%;
height: auto;
background-size: cover;
background-position: bottom center;
display: flex;
align-items: center;
min-height: 100%;
min-height: 100vh;
}
.headerText {
font-size: 90px;
font-family: 'Permanent Marker', cursive;
color: #fff;
}
.headerTagline {
font-size: 60px;
font-family: 'Permanent Marker', cursive;
color: #fff;
}
.anchor {
display: block;
height: 50px;
margin-top: -50px;
visibility: hidden;
}
.sectionHeader {
font-family: 'Permanent Marker', cursive;
padding: 20px 20px 20px 20px;
}
.sectionText {
padding: 20px 20px 20px 20px;
}
#aboutBox {
background-color: #c0c5ce;
padding: 20px 0 20px;
}
#teamBox {
background-color: #a7adba;
padding: 20px 0 20px;
}
#workBox {
background-color: #65737e;
padding: 20px 0 20px;
}
#shirtBox {
background-color: #4f5b66;
padding: 20px 0 20px;
}
#socialBox {
background-color: #343d46;
padding: 20px 0 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
<nav class="navbar navbar-inverse navbar-fixed-top" id="navBar">
<div class="container-fluid">
<div class="navHeader navbar-left">
<a class="navBrand" href="#masthead"></a>
<ul class="nav navbar-nav navbar-right" id="large-menu">
<li class="navItem">
<a class="navLink" href="#about">About</a>
</li>
<li class="navItem">
<a class="navLink" href="#team">Team</a>
</li>
<li class="navItem">
<a class="navLink" href="#photos">Photos</a>
</li>
<li class="navItem">
<a class="navItem" href="#shirts">T-Shirts</a>
</li>
<li class="navItem">
<a class="navLink" href="#contact">Contact</a>
</li>
</ul>
</div>
<div class="dropdown">
<button class="dropBtn" id="my-button">Menu</button>
<div id="dropCollapse" class="dropdownContent">
<a class="contentLinks" href="#about">About</a>
<a class="contentLinks" href="#team">Team</a>
<a class="contentLinks" href="#photos">Photos</a>
<a class="contentLinks" href="#shirts">T-Shirts</a>
<a class="contentLinks" href="#contact">Contact</a>
</div>
</div>
</nav>
<div class="container text-center" id="masthead">
<div class="col-sm-12">
<h1 class="headerText"></h1>
<p class="headerTagline"></p>
</div>
</div>
<span class="anchor" id="about"></span>
<div class="container-fluid" id="aboutBox">
<div class="row">
<div class="col-sm-12">
<h2 class="sectionHeader">About Us</h2>
<p class="sectionText">We're all about that chedda</p>
</div>
</div>
</div>
<span class="anchor" id="team"></span>
<div class="container-fluid" id="teamBox">
<div class="row">
<div class="col-sm-12">
<h2 class="sectionHeader">Meet the team</h2>
<p class="sectionText">pictures of team go here</p>
</div>
</div>
</div>
<span class="anchor" id="photos"></span>
<div class="container-fluid" id="workBox">
<div class="row">
<div class="col-sm-12">
<h2 class="sectionHeader">Our Work</h2>
<p class="sectionText">pictures go here</p>
</div>
</div>
</div>
<span class="anchor" id="shirts"></span>
<div class="container-fluid" id="shirtBox">
<div class="row">
<div class="col-sm-12">
<h2 class="sectionHeader">T-shirts Preview</h2>
<p class="sectionText">pictures of tshirts go here</p>
</div>
</div>
</div>
<span class="anchor" id="contact"></span>
<div class="container-fluid" id="socialBox">
<div class="row">
<div class="col-sm-12">
<h2 class="sectionHeader">Contact Us</h2>
<p class="sectionText">links to social media and contact us form</p>
</div>
</div>
</div>
I am trying to create a slide out menu from a span in my nav and am having difficulty. Hope someone can help as I have searched Google and not finding what I am after. Basically, I have this code:
<div style="background-color: #002F33; min-height:50px;">
<span class="navIcon" style="width: 50px; border-right-style: solid 1px #939393;"><img src="assets/images/icon_hamburger.png"></span>
<div>
Link1
Link2
Link3
</div>
<span style="color: #ffffff; font-size: 22px; padding-left:20px; padding-top: 21px;">Moneyball Tool</span>>
</div>
I simply want to get the menu when the span image is clicked to flyout over the content below. Not sure why I am having trouble with this, but appreciate any help you can give.
I added ids to some of your divs and use javascript to toggle a css class created below
.menu_items_toggle {
opacity: 1 !important;
top: 100% !important;
}
Snippet below
//make a refernce to the container that holds all your links
var menu_item_container = document.getElementById("menu_items")
//This function will show/hide menu options if image is clicked on
function clicker() {
menu_item_container.classList.toggle('menu_items_toggle');
console.log(menu_item_container.classList.contains('menu_items_toggle'))
}
console.log(document.getElementById("span_img_container"));
document.getElementById("menu_img").addEventListener('click', clicker)
#menu {
position: relative;
}
#menu_items {
position: absolute;
top: 0%;
opacity: 0;
transition: all 0.5s;
}
.menu_items_toggle {
opacity: 1 !important;
top: 100% !important;
}
img {
width: 100px;
height: 100px;
}
<div id="menu" style="background-color: #002F33; min-height:50px;">
<span id="span_img_container" class="navIcon" style="width: 50px; border-right-style: solid 1px #939393;"><img id="menu_img" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcToFURgZ4pNY28Zsq8ytnVFL7hzYMpGpBSpQWwGqSP6N77YRUXn"></span>
<div id="menu_items" class="">
Link1
<br>
Link2
<br>
Link3
<br>
</div>
<span style="color: #ffffff; font-size: 22px; padding-left:20px; padding-top: 21px;">Moneyball Tool</span>>
</div>