I am experiencing an issue when I start scrolling down and reach the point when the sticky nav becomes visible, it seems to create a duplicate of the background from header and makes header jump, but it is supposed to move to the next section. Is it CSS or JS related issue?
Please see entire included code:
https://codepen.io/pipistrellonetopier/pen/yXLGjo
CSS code
.sticky {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: rgba(0, 0, 0, 0.65);
z-index: 9999;
}
.sticky .main-nav { margin-top: 22px; }
.sticky .main-nav li a:link,
.sticky .main-nav li a:visited {
padding: 14px 0;
color: #f0f0f0;
font-size: 100%;
}
.sticky .logo {
display: block;
height: 29px;
margin: 15px 0;
}
Thank you
Peter
Give the following hyperlink display:inline-block and it will stop jumping:
<img src="resources/css/img/app-store-btn.svg" alt="App Store Button">
Related
Im trying to create a fixed header with variable height. I'll explain myself, say you get into the site and the header is visible, and it is 40px of height. once you scroll down the header is now 30px, and it is fixed. How can I achieve this? I know I am supposed to write some code but I have no idea on where to start. I know how to make a fixed header but dont know how to implement the variable height feature. Any advice or code snippets are very welcome.
I think this code can help you.
window.onscroll = function() {
var header = document.getElementsByTagName('header')
if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
header[0].classList.add('header-scroll');
} else {
if (header[0].classList.contains("header-scroll")) {
header[0].classList.remove('header-scroll');
}
}
}
.container {
height: 200vh;
padding-top: 40px;
}
header {
position: fixed;
top: 0;
left: 0;
right: 0;
background-color: green;
box-shadow: 0 0 5px rgba(0, 0, 0, .3);
height: 40px;
transition: all .3s ease;
}
.header-scroll {
height: 30px;
}
<div class="container">
<header>
</header>
<p>Scroll me</p>
</div>
You can do it with pure CSS by nesting position: sticky; elements and give the navbar as position a top: -10px
You set the <nav> to the fixed height of 40px
Then you use nav { position: sticky; top: -10px; }. That will allow the navbar to scroll 10px off the viewport leaving it's height at 30px visible.
To have the content such as links or text not to leave the viewport, you can wrap them inside another element and apply also display: sticky; to it. Now use top: 0; to prevent those elements from leaving the viewport.
nav {
position: sticky;
top: -10px;
height: 40px;
background-color: red;
}
nav > div {
position: sticky;
top: 0;
}
/* for scrolling purpose only */
body {
min-height: 500vh;
margin: 0;
}
/* if you want the text vertically centered */
nav {
display: flex;
align-items: center;
}
nav > div {
display: flex;
align-items: center;
height: 30px;
}
<nav>
<div>Test</div>
</nav>
I've been following along on a Youtube tutorial cloning the Microsoft website. I've been doing good so far but now I'm literally 30 seconds away from the tutorial ending, but I can't figure out why my hamburger menu isn't showing. Basically, once your screen width is < 700px, the nav bar moves off the screen to the side and a button on the top right appears to toggle, but when I press the button, the menu doesn't come back over if that makes sense.
CSS code:
.main-nav ul.main-menu {
display: block;
position: absolute;
top: 0;
left: 0;
background: #f2f2f2;
width: 50%;
height: 100%;
border-right: #ccc solid 1px;
opacity: 0.9;
padding: 30px;
transform: translateX(-500px);
}
.main-nav ul.main-menu li {
padding: 10px;
border-bottom: #ccc solid 1px;
font-size: 14px;
}
.main-nav ul.main-menu li:last-child {
border-bottom: 0;
}
.main-nav ul.main-menu.show {
transform: translateX(-20px);
}
JavaScript:
<script>
document.querySelector('.menu-btn').addEventListener('click', () => document.querySelector('main-menu').classList.toggle('show'));
</script>
"main-menu is not the correct selector in this case. Use .main-menu for class name selector."
I need to make a lightbox for pictures on this portfolio website. I have everything hooked up so the image goes to the original size when being clicked on, like a simple lightbox. But the problem I'm having is that the background behind the modal only goes down to the bottom of the viewport instead of going all the way to the bottom of the page. Let me know if theres any additional information I can provide.
Lightbox Problem
#overlay {
background: rgba(0,0,0,0.8);
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
display: none;
text-align: center;
}
#overlay img {
border-radius: 4px solid white;
margin-top: 10%;
}
#overlay p {
color: white;
}
Change position to fixed like this:
#overlay {
background: rgba(0,0,0,0.8);
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
display: none;
text-align: center;
}
Here is my website http://randomawesomeness.tk/ and i want to get rid of the whitespace below the footer .and i dont want the scrolling thing to show up.
Try to add the following CSS for your footer.
position: fixed;
Position your footer relative to the viewport, which means it always stays in the same place even if the page is scrolled.
bottom: 0;
Keep the footer at bottom of viewport
width: 100%;
Make the footer large as the viewport.
footer {
position: fixed;
bottom: 0;
width: 100%;
font-size: 20px;
background: #29EE55;
color: white;
margin: -20px -23px 0px -20px;
text-align: center;
}
Try this
body {
font-family: "Lobster",cursive;
margin: 0;
padding: 0;
text-align: center;
}
You can try following :-
body{
margin:0;
}
And on you footer following;
footer{
position: fixed;
bottom: 0;
width: 100;
margin:0;
}
I need to show image slide show for news which can have one or more than one image displayed.
If it has just one image then Navigation bar should hide, This feature is built in.
But i am facing problem with moving the caption of the image exactly under the Image. I am able to change the bottom margin for css p.bjqs-caption to -30px. which moves the caption but hides under something and is not visible i tried all options like z-index and other stuff but nothing seem to work.
I would appreciate help in this regard.
Slider : http://www.basic-slider.com/
I tried to setup fiddle but demo on fiddle is not working link http://jsfiddle.net/rUXAt/1/
UPDATE : Working fiddle http://jsfiddle.net/rUXAt/2/
Check working fiddle
p.bjqs-caption {
bottom: 0;
color: #000000;
display: block;
margin: 0;
padding: 2%;
position: absolute;
width: 96%;
}
http://jsfiddle.net/rUXAt/2/
try this one,
put height for ul and li height: 355px !important; and color to p.bjqs-caption
p.bjqs-caption {
background: none repeat scroll 0 0 #CCCCCC;
}
p.bjqs-caption {
bottom: 0;
color: #000000;
display: block;
margin: 0;
padding: 2%;
position: absolute;
width: 96%;
}
ul.bjqs {
display: none;
height: 355px !important;
list-style: none outside none;
margin: 0;
overflow: hidden;
padding: 0;
position: relative;
}
li.bjqs-slide {
display: none;
height: 355px !important;
position: absolute;
}