I'm fairly new to css and website design in general. I have created a site with a navbar, that scrolls down with the page, so it always stays on top:
<div class="topnav" id="navbar">
Startseite
Übersicht
...
This does work, I have a Sticky-Class in my css, as well as some design options:
.topnav {
overflow: hidden;
background-color: #333;
}
/* Style the topnav links */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change color on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
and this js which assigns it to my navbar, when it's scrolling so far up, that it would disappear.
window.onscroll = function() {myFunction()};
var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
As you can see on the picture, from the moment on that the navbar is in a "scrolled" state, it expands a little bit to the right, so that it hits the side of the page.
This is a behaviour which I find very confusing, can anyone explain to me why this happenes, and how I can get it to just keep its size with the space to the side of the page? I figured it could have to do something with the expand 100%, but why is it then not bumping into the left side of the page as well?
This happens when you scroll because the div is not properly bound to the viewport.
// When the user scrolls the page, execute myFunction
window.onscroll = function() {
myFunction()
};
var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
* {
box-sizing: border-box;
margin: 0;
}
body {
font-family: Arial;
max-width: 92vw;
position: relative;
background: #f1f1f1;
margin-right: auto;
margin-left: auto;
}
.topnav {
overflow: hidden;
background-color: #333;
}
/* Style the topnav links */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change color on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* The sticky class is added to the navbar with JS when it reaches its scroll position*/
.sticky {
position: fixed;
top: 0;
right: 0;
left: 0;
margin-right: auto;
margin-left: auto;
max-width: 92vw;
}
<div class="topnav" id="navbar">
Startseite
Übersicht
Über uns
<a style="float:right">
<form action="/search">
<label for="player_seach">Suche:
<input id="player_seach" name="player_search">
</label>
</form>
</a>
<a href="/profile" style="float:right">
</a>
</div>
<div style="min-height: 500px; width: 100%">
</div>
You can add media queries to help declutter the navbar upon resizing.
Happy learning!
Related
i have a website in html, where I created a mobile menu , as the container was showing some blank space, I gave it a height, after then the mobile menu is not opening. the code is like below:
function myFunction() {
var x = document.getElementById("myLinks");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
.mobile-container {
max-width: 480px;
margin: auto;
background-color: #555;
height: 50px;
color: white;
border-radius: 10px;
}
.topnav {
overflow: hidden;
background-color: #333;
position: relative;
}
.topnav #myLinks {
display: none;
}
.topnav a {
color: white;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
display: block;
}
.topnav a.icon {
background: black;
display: block;
position: absolute;
right: 0;
top: 0;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
<div class="mobile-container">
<!-- Top Navigation Menu -->
<div class="topnav">
MENU
<div id="myLinks">
News
Contact
About
</div>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
</div>
however this menu is not opening while I click the icon, can anyone please tell me what could be wrong here, thanks in advance
add css to the .mobile-container
z-index: 1000;
you can also try with position style like
position: relative;
Or
position: absolute;
Have you tried adding overflow: visible to your container?
.mobile-container {
overflow: visible;
I am stuck with a conflict for a "Sticky" and "Responsive" top menu.
When it is not scrolled and I click the BARS button to open the menu (in responsive state) it works ok. If I am scrolled down and the menu is "STICKY" it lost it "position:fixed" and goes all on top (back to position:relative).
Here is my codepen :
codepen for top navigation script conflict
// Function that expand the top menu when collapsed (responsive)
function opennav() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav")
{x.className += " responsive";}
else
{x.className = "topnav";}}
// This is the function that stick the menu when scrolling
window.onscroll = function() {myFunction()};
var navbar = document.getElementById("myTopnav");
var sticky = navbar.offsetTop;
function myFunction() {
if
(window.pageYOffset >= sticky)
{navbar.classList.add("sticky");}
else
{navbar.classList.remove("sticky");}
}
body { margin: 0; font-family: Arial, Helvetica, sans-serif;}
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #4CAF50;
color: white;
}
.topnav .icon {
display: none;
}
/* Responsive CSS for the top navigation menu */
#media screen and (max-width: 600px) {
.topnav a:not(:first-child) {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
/* Sticky CLASS that will be added when scrolling */
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.sticky + .content {
padding-top: 60px;
}
<body>
<div class="topnav" id="myTopnav">
Home
News
Contact
About
<a href="javascript:void(0);" class="icon" onclick="opennav()">
<i class="fa fa-bars"></i>
</a>
</div>
<div style="padding-left:16px">
<!-- Put large text in this <p> to scroll -->
<p>LOREM IPSUM</p>
</div>
</body>
First, don't use float. We are not leaving in 1995. Go with flexbox or grid.
Second, your code is all over the place. Multiple script tags in HTML section, the multiple usages of the same media query... It's difficult to read your code.
Third, what you want to do can be done just by using CSS. You only need JS to open submenu. To do that just add a class.
I suggest you watch a Youtube video about the responsive menu.
I have a pretty standard navigation bar, with a list containing the links to my sub-sites. I have added a hamburger-menu icon to the website, which should appear on small and mobile screens. Also, I hide the links, by setting their font-size to zero via the css media query. If the menu icon is clicked I fire a javascript function, that will increase/decrease the fontsize of the links accordingly.
All of this works pretty nicely, there is only one issue. As soon as I resize my browser after the font-size of the links has been changed by the script, those values are kept and not updated by the media query for some reason. So, depending on whether the mobile menu was open or closed, the fontsize is either extremely big, or zero. Why aren't these values updated when resizing the browser back to full-screen?
code-snippet containing the necessary code to reproduce:
var open = false;
function openmobilemenu() {
var nav = document.getElementsByTagName("nav");
var links = nav[0].getElementsByTagName("li");
if (!open) {
for (var i = 0; i < links.length; i++) {
links[i].style.transition = "0.5s";
links[i].style.fontSize = "10vw";
}
open = true;
}
else {
for (var i = 0; i < links.length; i++) {
links[i].style.fontSize = "0";
}
open = false;
}
}
header {
position: relative;
width: 100%;
height: 200px;
background-image: url("../img/header.png");
background-repeat: no-repeat;
background-position: right;
background-size: auto 100%;
background-color: #CDCCCA;
}
header img {
position: absolute;
width: 500px;
padding: 0 15%;
bottom: 10px;
}
.mobilemenu {
display: none;
}
nav {
position: relative;
background-color: #61625B;
width: 100%;
height: 100px;
}
nav ul {
position: absolute;
bottom: 0;
width: 70%;
list-style: none;
padding: 0 15%;
display: flex;
margin: 0;
}
nav li {
width: 125px;
text-align: center;
transition: none;
}
.navunderline {
width: 125px;
height: 0;
margin: 5px 0 0 0;
background-color: #DAD9D7;
transition: 500ms;
}
nav a {
color: #DAD9D7;
}
nav a:hover {
text-decoration: none;
}
nav li:hover .navunderline {
height: 5px;
margin: 0;
}
#media screen and (max-width: 800px), (hover:none) {
.mobilemenu {
display: flex;
color: #61625B;
font-size: 100px;
margin: auto 5%;
}
.mobilemenu a, a:hover, a:active {
text-decoration: none;
}
nav {
position: relative;
background-color: #61625B;
width: 100%;
min-height: 10px;
height: auto;
overflow: visible;
padding: 0;
margin: 0;
}
nav ul {
position: relative;
height: auto;
bottom: 0;
width: 100%;
list-style: none;
flex-direction: column;
padding: 0;
}
nav li {
width: 100%;
text-align: center;
margin: 0;
padding: 0;
font-size: 0;
height: auto;
}
nav li:hover {
background-color: #8b131f;
}
.navunderline {
display: none;
}
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<header>
<img src="img/logo.png" alt="some alt" />
<a href="javascript:void(0);" class="mobilemenu" onclick="openmobilemenu()">
<i class="fa fa-bars"></i>
</a>
</header>
<nav>
<ul>
<li>Unternehmen<div class="navunderline"></div></li>
<li>Leistungen<div class="navunderline"></div></li>
<li>Referenzen<div class="navunderline"></div></li>
<li>News<div class="navunderline"></div></li>
<li>Kontakt<div class="navunderline"></div></li>
</ul>
</nav>
This is because your JS is setting inline styles on your elements and inline styles are always more specific than anything in your stylesheet.
There are three ways around this:
Use JS on window resize to remove those styles.
Don't inline styles, but add/remove classes on those elements on resize. Use your stylesheet to control the styles for those elements.
Set the font styles to !important in your stylesheet (the only way around specificity - not recommended)
I got have confusing problem with jquery / css. I'm trying to get my navbar link color to change from white to black, and back again when 'entering' into a new nth-child.
So when going over nth-child(3n+1) and (3n+2), the links need to be white, but (3n+3), the links need to go black, and change back at the next cycle.
I've tried to reuse a script for adding classes, but it just keeps adding .white and .black until I go back to the top.
How would I solve this?
$(window).scroll(function() {
var scroll = $(window).scrollTop();
var objectSelect = $(".col-4:nth-child(3n+1)");
var objectPosition = objectSelect.offset().top;
if (scroll > objectPosition) {
$(".navbar a").addClass("white");
} else {
$(".navbar a").removeClass("white");
}
});
$(window).scroll(function() {
var scroll = $(window).scrollTop();
var objectSelect = $(".col-4:nth-child(3n+2)");
var objectPosition = objectSelect.offset().top;
if (scroll > objectPosition) {
$(".navbar a").addClass("white");
} else {
$(".navbar a").removeClass("white");
}
});
$(window).scroll(function() {
var scroll = $(window).scrollTop();
var objectSelect = $(".col-4:nth-child(3n+3)");
var objectPosition = objectSelect.offset().top;
if (scroll > objectPosition) {
$(".navbar a").addClass("black");
} else {
$(".navbar a").removeClass("black");
}
});
html {
height: 100%;
font-size: 21px;
}
body {
margin: 0px;
font-family: 'Karla', sans-serif;
width: 100%;
height: 100%;
color: white;
}
* {
box-sizing: border-box;
}
/* DESIGN */
.row::after {
content: "";
clear: both;
display: table;
}
.col-1 {
width: 25%;
}
.col-2 {
width: 50%;
}
.col-3 {
width: 75%;
}
.col-4 {
width: 100%;
padding-right: 20vw;
padding-left: 20vw;
}
[class*="col-"] {
float: left;
height: 90vh;
padding-right: 20vw;
padding-left: 20vw;
padding-top: 25vh;
padding-bottom: 15vh;
background-attachment: scroll;
}
[class*="col-"]:nth-child(3n+1) {
/* The image used */
background-image: url("img/bg2.jpg");
/* Full height */
height: 100%;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
[class*="col-"]:nth-child(3n+2) {
background-color: rgb(238, 114, 3);
}
[class*="col-"]:nth-child(3n+3) {
background-color: white;
color: black;
}
.black {
color: black !important;
}
.white {
color: white !important;
}
/* NAVIGATION */
.navbar {
overflow: hidden;
background-color: transparent;
position: fixed;
/* Set the navbar to fixed position */
top: 5;
/* Position the navbar at the top of the page */
width: 100%;
/* Full width */
font-size: 25px;
font-weight: bold;
line-height: 1.5em;
}
.navbar a {
float: right;
display: block;
color: #f2f2f2;
background-color: transparent;
text-align: center;
margin: 20px;
padding-left: 25px;
padding-right: 25px;
text-decoration: none;
}
.navbar a:hover {
border-bottom: 1px solid;
}
#media screen and (max-width: 1180px) {
.navbar a {
font-size: 16px;
padding-left: 0px;
padding-right: 0px;
}
}
#media screen and (max-width: 700px) {
.navbar a {
display: none !important;
}
}
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="thumbnail">
<img class="thumbnail" src="img/RF thumbnail.png">
</div>
<div class="navbar" id="myTopnav">
Contact
Adverts
About us
What is this
<a class="signup" href="#welcome">Sign up</a>
</div>
<button onclick="topFunction()" id="myBtn" title="Go to top"><i class="fas fa-chevron-up"></i></button>
<!-- CONTENT -->
<div class="row">
<div class="col-4" id="welcome">
</div>
<div class="col-4" id="whatisthis">
<h1>What is this?</h1>
</div>
<div class="col-4" id="adverts">
<h1>Adverts</h1>
</div>
<div class="col-4" id="about">
<h1>About</h1>
</div>
<div class="col-4" id="contact">
<h1>Contact</h1>
</div>
</div>
</body>
</html>
When u scroll down u dont remove a class. You are only adding it.
And the last class is what have the control of the color.
So. You are adding black, then white. After that adding black again will do nothing. There is still
class="black white"
Remove the last class after each section should fix your problem.
And jQuery has also hasClass(className)
Right, so I have a basic Jquery script that adds a "fixed" class to the nav bar when the user scrolls past the nav bar (154 pixels down). The issue is, the content below the nav bar then jumps up by 35 pixels (the height of the nav bar). I've tried adding a div class with a padding of 35px that shows when the user scrolls past the nav bar, which, although fixed other display problems, still allowed the content to lift up by 35 pixels. Here's what I have so far:
The jQuery that adds the fixed class, and the jQuery that shows the padding:
<script>
var num = 154; //number of pixels before modifying styles
$(window).bind('scroll', function () {
if ($(window).scrollTop() > num) {
$('ul.nav').addClass('fixed');
} else {
$('ul.nav').removeClass('fixed');
}
});
</script>
<script>
var num = 154; //number of pixels before modifying styles
$(window).bind('scroll', function () {
if ($(window).scrollTop() > num) {
$('.padd').show();
} else {
$('.padd').hide();
}
});
</script>
The HTML:
<body ONMOUSEWHEEL="OnMouseWheel()">
<p><img src="images/BannerPicture.png" alt="Leisure in mk logo" width="1024" height="150"></p>
<ul class="nav">
<li class="nav">
Home
</li>
<li class="nav">
Centre MK
</li>
<li class="nav">
Music
</li>
<li class="nav">
More Stuff</li>
</ul>
<div class="pad">
</div>
<div class="padd">
</div>
<div class="Informationbox">
text and shizz
</div>
And finally, the CSS:
ul.nav {
border: 1px solid #ccc;
border-width: 1px 0;
list-style: none;
margin: 0;
padding: 0;
text-align: center;
width: 1024px;
display: table;
table-layout: fixed;
vertical-align: middle;
height: 35px;
vertical-align: middle;
margin-right: auto;
margin-left: auto;
background-color: #C60;
font-size: 25px;
}
/* this styles each link when the mouse is NOT hovered over */
li.nav {
display: table-cell;
vertical-align: middle;
height:100%;
align-items: center;
vertical-align:middle;
line-height:35px;
margin-right: auto;
margin-left: auto;
transition:.4s;
}
li.nav a {
display: block;
height: 100%;
width: 80%;
text-decoration: none;
vertical-align: middle;
align-items: center;
vertical-align: middle;
margin-right: auto;
margin-left: auto;
transition:.4s;
}
li.nav a:hover {
line-height: 25px;
transition:.4s;
}
ul.nav.fixed {
position: fixed;
top: 0;
left: 50%;
margin-left: -512px;
margin-right: 0;
}
.padd {
padding-bottom: 40px;
display:none;
}
.Informationbox {
background-color: #FF9900;
border: 1px solid #FFF;
width: 1024px;
margin-right: auto;
margin-left: auto;
}
add top 35px to the "nav" after block when u scrolles down using jquery.. and need to remove it when scrolls top..
$(window).bind('scroll', function () {
if ($(window).scrollTop() > num) {
$('ul.nav').addClass('fixed');
$('.your_div').css({"top" : "35px"});
} else {
$('ul.nav').removeClass('fixed');
$('.your_div').css({"top" : "0px"});
}
});