Why does my header not stick to the top of my page - javascript

.navigation {
color: var(--var-color-two);
font-family: "Kanit-medium", sans-serif;
font-style: normal;
font-size: 26px;
height: 1500px;
padding-top: 42px;
padding-left: 250px;
position: sticky;
top: 0;
}
.logo {
display: inline-block;
font-size: 30px;
}
.nav-links {
position: relative;
display: inline-block;
left: 12rem;
}
.nav-item {
display: inline-block;
margin: 0 18px;
}
<div id="header">
<div class="navigation">
<ul class="logo">
<li>
<a class="home" href="index.html">HOME</a>
</li>
</ul>
<ul class="nav-links">
<li class="nav-item">
<a class="ebay" href="Pages/Page1.html">Page1</a>
</li>
<li class="nav-item">
<a class="stock" href="Pages/Page2.html">Page2</a>
</li>
<li class="nav-item">
<a class="drop" href="Pages/Page3.html">Page3</a>
</li>
<li class="nav-item">
<a class="pricing" href="Pages/Page4.html">Page4</a>
</li>
</ul>
</div>
</div>
I have tried making the .navigation sticky, fixed, etc. The header doesn't seem to stick on the top of the page when I scroll down. Any ideas why it isn't sticking to the top of the page even though i did everything right? I don't mind adding Java Script if it is necessary.
EDIT:
I have tried adding sticky and top: 0; to the #header too, it doesn't work.

The reason why it does not work is very simple, you need to apply the sticky to the #header on the structure you have, why? the sticky property depends on the overflow and the ability to scroll on the parent element, the sticky property becomes sticky when the height of the element is passed. here is a page with a more in detail explanation https://www.designcise.com/web/tutorial/how-to-fix-issues-with-css-position-sticky-not-working
also a little test. I can not go in to much detail on the property on this comment, please read the page above.
body{
height: 800px;
}
#header {
color: var(--var-color-two);
font-family: "Kanit-medium", sans-serif;
font-style: normal;
font-size: 26px;
width: 100%;
height: auto;
padding-top: 42px;
padding-left: 250px;
position: sticky;
top: 0;
background-color:red;
display: flex;
}
.logo {
display: inline-block;
font-size: 30px;
}
.nav-links {
position: relative;
display: inline-block;
left: 12rem;
}
.nav-item {
display: inline-block;
margin: 0 18px;
}
<div id="header">
<nav class="navigation">
<ul class="logo">
<li>
<a class="home" href="index.html">HOME</a>
</li>
</ul>
<ul class="nav-links">
<li class="nav-item">
<a class="ebay" href="Pages/Page1.html">Page1</a>
</li>
<li class="nav-item">
<a class="stock" href="Pages/Page2.html">Page2</a>
</li>
<li class="nav-item">
<a class="drop" href="Pages/Page3.html">Page3</a>
</li>
<li class="nav-item">
<a class="pricing" href="Pages/Page4.html">Page4</a>
</li>
</ul>
</nav>
</div>

Related

Dropdown stays in the same place

The problem
Hello!
I have a problem with my hoverable dropdown menu. It always stays under the first navigation item even though it's not triggered, but it should be under the triggered navigation item (the navigation item on which the mouse pointer is located). How can i how can I fix that?
Thanks in advance!
#nav-list {
padding: 0;
margin: 0;
list-style-type: none;
}
.nav-item {
display: inline;
padding: 0;
}
.nav-item-text {
padding: 16px;
margin: 0;
font-size: 14px;
font-family: var(--primary-font-stack);
font-weight: 500;
line-height: 1;
text-decoration: none;
cursor: context-menu;
display: inline;
color: var(--on-background);
opacity: var(--high-emphasis);
}
.nav-item-link {
padding: 20px;
margin: 0;
font-size: 14px;
font-family: var(--primary-font-stack);
font-weight: 500;
line-height: 1;
text-decoration: none;
cursor: pointer;
display: inline;
color: var(--on-background);
opacity: var(--high-emphasis);
}
.nav-item-link:hover {
opacity: 100%;
cursor: pointer;
transition: .2s ease all;
color: var(--primary);
}
.nav-dropdown {
display: none;
opacity: 0;
position: absolute;
z-index: 99;
margin: 3px 0 0 0;
padding: 15px;
height: auto;
min-width: 280px;
background: var(--background);
border-radius: 4px;
border: 2px solid var(--elevation-16dp);
}
.nav-item:hover .nav-dropdown {
display: block;
transition: .2s ease all;
opacity: 100%;
}
<ul id="nav-list">
<li class="nav-item">
<p class="nav-item-text">Dropdown Trigger</p>
<ul class="nav-dropdown">
<li class="nav-drpdwn-item">
<p class="nav-drpdwn-item-title">Title A 1</p>
</li>
<a class="nav-drpdwn-item-link" href="#">
<li class="nav-drpdwn-item">Link</li>
</a>
<a class="nav-drpdwn-item-link" href="#">
<li class="nav-drpdwn-item">Link</li>
</a>
<hr class="nav-drpdwn-hl">
<li class="nav-drpdwn-item">
<p class="nav-drpdwn-item-title">Title</p>
</li>
<a class="nav-drpdwn-item-link" href="#">
<li class="nav-drpdwn-item">Link</li>
</a>
</ul>
</li>
<li class="nav-item">
<p class="nav-item-text">Dropdown Trigger</p>
<ul class="nav-dropdown">
<li class="nav-drpdwn-item">
<p class="nav-drpdwn-item-title">Title B 2</p>
</li>
<a class="nav-drpdwn-item-link" href="#">
<li class="nav-drpdwn-item">Link</li>
</a>
<a class="nav-drpdwn-item-link" href="#">
<li class="nav-drpdwn-item">Link</li>
</a>
<hr class="nav-drpdwn-hl">
<li class="nav-drpdwn-item">
<p class="nav-drpdwn-item-title">Title</p>
</li>
<a class="nav-drpdwn-item-link" href="#">
<li class="nav-drpdwn-item">Link</li>
</a>
</ul>
</li>
</ul>
You have to add this css to your code:
<style>
#nav-list > li {
position:relative;
}
#nav-list .nav-dropdown {
left: 0;
}
</style>

Change navigation position on hover

How to make this navigation effect.
Demo link: https://hookandbarrelrestaurant.com/
My code Link: https://codepen.io/Dhaval182/pen/rQPMoW
I was able to achieve this by using CSS variables, and one event listener in Javascript.
It's not super complicated, however, it did take some tinkering to get it to work correctly.
Example:
In order to detect the mouse position and make the content move like that, you need to listener for the mousemove event in Javascript. However, you can transfer that value over into CSS (sharing CSS var() statements with Javascript), and do the rest with pure CSS.
For the CSS we use the display:inline-block property along with the white-space:nowrap property to make our columns.
We set the overflow to be hidden, and make the width and height 100%
The only thing I changed with the HTML was the info element. I changed it to a div, just to make it look prettier (that was not essential and can be changed to whatever).
const navbar = document.getElementById('navbar-list');
document.addEventListener('mousemove', evt => {
let x = evt.clientX;
navbar.style.setProperty('--pos-x', (-x / 1.35));
});
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
.flex-container,
.menu,
ul,
li,
a {
height: 100%;
}
.flex-container,
.menu {
width: 100%;
height: 100%;
}
.menu {
overflow: hidden;
position: relative;
}
.menu ul {
position: absolute;
/* Use calc() method to add "px" to the number transferred from Javascript */
left: calc(var(--pos-x) * 1px);
list-style: none;
margin: 0px;
padding: 0px;
white-space: nowrap;
width: 100%;
}
.menu ul>li {
padding: 0px;
margin: 0px;
margin-left: -4px;
text-align: center;
display: inline-block;
width: 25%;
}
.menu ul>li>a {
display: inline-block;
margin: 0px;
width: 100%;
text-decoration: none;
color: #000;
font-size: 18pt;
background: rgba(0, 0, 0, 0.0);
-webkit-transition: background-color 0.3s;
/* Safari */
transition: background-color 0.3s;
}
.menu ul>li>a>.info {
position: absolute;
bottom: -30px;
display: block;
width: 25%;
-webkit-transition: bottom 0.3s;
/* Safari */
transition: bottom 0.3s;
}
.menu ul>li>a:hover .info {
bottom: 20px;
}
.menu ul>li>a:hover {
background: rgba(0, 0, 0, 0.6);
color: #FFF;
}
<!-- Menu -->
<div class="menu" id="menu">
<ul class="flex-container" id="navbar-list">
<li>
<a href="#">
<span class="menu-title">About us</span>
<div class="info">Est. 1995</div>
</a>
</li>
<li>
<a href="#">
<span class="menu-title">About us</span>
<div class="info">Est. 1995</div>
</a>
</li>
<li>
<a href="#">
<span class="menu-title">About us</span>
<div class="info">Est. 1995</div>
</a>
</li>
<li>
<a href="#">
<span class="menu-title">About us</span>
<div class="info">Est. 1995</div>
</a>
</li>
<li>
<a href="#">
<span class="menu-title">About us</span>
<div class="info">Est. 1995</div>
</a>
</li>
<li>
<a href="#">
<span class="menu-title">About us</span>
<div class="info">Est. 1995</div>
</a>
</li>
<li>
<a href="#">
<span class="menu-title">About us</span>
<div class="info">Est. 1995</div>
</a>
</li>
</ul>
</div>

Dropdown Menu doesn't work inside navigation bar but works outside

I am trying to add a dropdown-menu to my navigation bar. But when i click the dropdown it doesn't show me the menu.It the menu doesn't drop down. I have looked for solutions there are other related questions. But those were code-specific problems are not relevant to my code.
If i test the dropdown code taking it outside of the navgar it works. But inside the navbar it doesn't. Can anyone please help me? If you need help regarding reading this whole or need any kind of explanation, please ask.It is i who needs help.Thanks in advance.
So here is my HTML:
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<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="active"><span class="glyphicon glyphicon-home"></span> Home</li>
//This is the part of dropdown//
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
Home
About
Contact
</div>
</div>
</div>
</div>
</ul>
</div>
</div>
</nav>
And here is the CSS i am applying to it:
<style>
.dropbtn {
background-color: #3498DB;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #2980B9;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: #ddd}
.show {display:block;}
body{
background-color:#f1f1f1;
}
/* Remove the navbar's default margin-bottom and rounded borders */
.navbar {
overflow: hidden;
margin-bottom: 0;
border-radius: 0;
width: 100% ;
height: 30px;
}
.navbarw3 {
overflow: hidden;
background-color: #333;
font-family: Arial, Helvetica, sans-serif;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.main {
margin-top: 40px; Add a top margin to avoid content overlay
}
/* Set height of the grid so .sidenav can be 100% (adjust as needed) */
.row.content {height: 565px}
/* Set gray background color and 100% height */
.sidenav {
padding-top: 20px;
background-color: #f1f1f1;
height: 100%;
}
/* Set black background color, white text and some padding */
footer {
background-color: #555;
color: white;
padding: 15px;
}
/* On small screens, set height to 'auto' for sidenav and grid */
#media screen and (max-width: 767px) {
.sidenav {
height: auto;
padding: 15px;
}
.row.content {height:auto;}
}
</style>
And here is the javascript:
<script>
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>
Based on your css classes that you used in your HTML, I assue you are using bootstrap. In that case, you really don't need to add any javascript for working with dropdown menu. make sure you linked the bootstrap css and js file in your page and then, just change the html to something like this :
<nav class="navbar justify-content-center navbar-expand-lg blackBg">
<ul class="nav">
<li class="nav-item">
<a class="nav-link" href="home.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="blog.html">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
<li class="dropdown nav-item">
<a class="dropdown-toggle nav-link" data-toggle="dropdown" href="#">Gallery
<span class="caret"></span>
</a>
<ul class="dropdown-menu blackBg">
<li>
Smiles
</li>
<li>
Cry's
</li>
<li>
Videos
</li>
<li>
Choreography
</li>
<li>
</li>
</ul>
</li>
</ul>
here is an example : https://jsfiddle.net/dmkh8xj1/

Bootstrap 3 can't use dropdown menu

I use bootstrap 3 and i have menu. But I have problem with dropdown menu.
I can't use dropdown menu because it disappears so fast. Also it shows on hover very fast without animations
my html
<ul class="nav navbar-nav">
<li class="menu-item dropdown"><a title="Sample Page" href="#">Sample Page <span class="caret"></span></a>
<ul role="menu" class="dropdown-menu">
<li class="menu-item"><a title="Front Page" href="#">Front Page</a></li>
<li class="menu-item"><a title="Front Page" href="#">Front Page</a></li>
</ul>
</li>
</ul>
css:
.nav>li {
float: left;
}
.nav>li>a {
position: relative;
font-size: 17px;
}
.nav li a {
display: block;
}
.nav li.dropdown ul {
margin-top: 20px;
position: absolute;
top: 100%;
display: none;
z-index: 2000;
padding: 5px 0;
border-left: none;
border-right: none;
border-bottom: none;
}
how to solve this problem?
Add class="dropdown-toggle" data-toggle="dropdown" to your Sample Page <a>
.nav>li {
float: left;
}
.nav>li>a {
position: relative;
font-size: 17px;
}
.nav li a {
display: block;
}
.nav li.dropdown ul {
margin-top: 20px;
position: absolute;
top: 100%;
//display: none;
z-index: 2000;
padding: 5px 0;
border-left: none;
border-right: none;
border-bottom: none;
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="nav navbar-nav">
<li class="menu-item dropdown ">
<a class="dropdown-toggle" data-toggle="dropdown" title="Sample Page" href="#">Sample Page <span class="caret"></span></a>
<ul role="menu" class="dropdown-menu">
<li class="menu-item"><a title="Front Page" href="#">Front Page</a></li>
<li class="menu-item"><a title="Front Page" href="#">Front Page</a></li>
</ul>
</li>
</ul>

Enable links of the menu when the default action was prevented

I have the following situation:
jQuery(document).ready(function($) {
"use strict";
function active_menu(e) {
e.preventDefault();
e.stopPropagation();
var $this = $(this);
if (!$this.is(':animated')) { // to prevent double click issue
$this.toggleClass('active');
}
}
$(document).on('click', '.menu-item-has-children', active_menu);
});
nav {
position: relative;
display: inline-block;
top: auto;
overflow: visible;
background-color: transparent;
}
nav > ul {
list-style: none;
margin: 14px 0 0 0;
float: right;
position: relative;
}
nav > ul > li {
float: left;
min-width: 0;
position: relative;
}
nav > ul > li.menu-item-has-children:before {
content: "";
border-bottom: 2px solid #000;
border-right: 2px solid #000;
width: 7px;
height: 7px;
position: absolute;
right: -4px;
bottom: 7px;
background-color: transparent;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
nav > ul > li a {
color: #1c1c1c;
font-weight: 400;
font-size: 13px;
text-transform: uppercase;
text-align: center;
display: inline-block;
padding-bottom: 4px;
margin: 0;
padding: 0 20px;
}
nav > ul > li span {
display: inline-block;
}
nav > ul ul {
display: none;
list-style: none;
position: absolute;
background: #fff;
border: 1px solid #e1e1e1;
margin: 0;
min-width: 200px;
margin-top: 33px;
z-index: 2001;
}
nav > ul > li > ul:before {
content: "";
display: block;
position: absolute;
width: 200px;
min-width: 200px;
height: 36px;
top: -36px;
left: 0;
z-index: 2004;
}
nav > ul li.active > ul {
display: block;
z-index: 2003;
}
nav > ul ul li {
position: relative;
}
nav > ul ul li a {
width: 100%;
text-align: left;
padding: 6px 13px 7px 13px;
}
nav > ul ul ul {
position: absolute;
left: 100%;
top: 0;
margin-left: 10px;
margin-top: 0;
z-index: 2002;
border: 1px solid #e1e1e1;
}
nav > ul ul ul:before {
position: absolute;
content: "";
top: 0;
left: -11px;
width: 11px;
height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<nav>
<ul id="main_menu">
<li id="nav-menu-item-1636" class="main-menu-item menu-first menu-item-type-custom menu-item-object-custom">
<a href="http://wpthemetestdata.wordpress.com/" class="menu-link main-menu-link">
<span>Home</span>
</a>
</li>
<li id="nav-menu-item-1637" class="main-menu-item">
<a href="#/?page_id=703" class="menu-link main-menu-link">
<span>Blog</span>
</a>
</li>
<li id="nav-menu-item-1638" class="main-menu-item">
<a href="#/?page_id=701" class="menu-link main-menu-link">
<span>Front Page</span>
</a>
</li>
<li id="nav-menu-item-1639" class="main-menu-item menu-item-has-children has_children">
<a href="#/?page_id=2" class="menu-link main-menu-link">
<span>About The Tests</span>
</a>
<ul class="navi first menu-depth-1">
<li id="nav-menu-item-1697">
<a href="#/?page_id=1133" class="menu-link sub-menu-link">
<span>Page Image Alignment</span>
</a>
</li>
<li id="nav-menu-item-1698">
<a href="#/?page_id=1134" class="menu-link sub-menu-link">
<span>Page Markup And Formatting</span>
</a>
</li>
<li id="nav-menu-item-1640">
<a href="#/?page_id=501" class="menu-link sub-menu-link">
<span>Clearing Floats</span>
</a>
</li>
<li id="nav-menu-item-1641">
<a href="#/?page_id=155" class="menu-link sub-menu-link">
<span>Page with comments</span>
</a>
</li>
<li id="nav-menu-item-1642">
<a href="#/?page_id=156" class="menu-link sub-menu-link">
<span>Page with comments disabled</span>
</a>
</li>
</ul>
</li>
<li id="nav-menu-item-1643" class="main-menu-item menu-item-has-children has_children">
<a href="#/?page_id=174" class="menu-link main-menu-link">
<span>Level 1</span>
</a>
<ul class="navi first menu-depth-1">
<li id="nav-menu-item-1644" class=" menu-item-has-children has_children">
<a href="#/?page_id=173" class="menu-link sub-menu-link">
<span>Level 2</span>
</a>
<ul class="navi navi menu-depth-2">
<li id="nav-menu-item-1645" class=" navi ">
<a href="#/?page_id=172" class="menu-link sub-menu-link">
<span>Level 3</span>
</a>
</li>
<li id="nav-menu-item-1699" class=" navi ">
<a href="#/?page_id=746" class="menu-link sub-menu-link">
<span>Level 3a</span>
</a>
</li>
<li id="nav-menu-item-1700" class=" navi ">
<a href="#/?page_id=748" class="menu-link sub-menu-link">
<span>Level 3b</span>
</a>
</li>
</ul>
</li>
<li id="nav-menu-item-1701">
<a href="#/?page_id=742" class="menu-link sub-menu-link">
<span>Level 2a</span>
</a>
</li>
<li id="nav-menu-item-1702">
<a href="#/?page_id=744" class="menu-link sub-menu-link">
<span>Level 2b</span>
</a>
</li>
</ul>
</li>
<li id="nav-menu-item-1646" class="main-menu-item">
<a href="#/?page_id=146" class="menu-link main-menu-link">
<span>Lorem Ipsum</span>
</a>
</li>
<li id="nav-menu-item-1703" class="main-menu-item">
<a href="#/?page_id=733" class="menu-link main-menu-link">
<span>Page A</span>
</a>
</li>
<li id="nav-menu-item-1704" class="main-menu-item">
<a href="#/?page_id=735" class="menu-link main-menu-link">
<span>Page B</span>
</a>
</li>
</ul>
</nav>
The functionality is sort of ok - I click on the menu that has children, toggle the class active and the unsorted children list shows. But the problem is that when I click on the anchor in the child, the list closes and the links don't do anything because of e.preventDefault();.
Can this be sorted out? I tried unbinding the click, but that didn't work.
just use javascript to emulate anchor click with window.location.href = $(this).attr("href")

Categories