I have an issue with my Navbar, when I try to scroll, the body goes all the way up behind the logo. See below picture for reference:
Is there anyway I could make the body disappear when I scroll? Preferably it would disappear before the red line.
Sorry for my bad english and if the question might be a bit dumb. New to development, still learning :)
Here's my CSS code for the navbar:
#header {
height: 100px;
transition: all 0.5s;
z-index: 997;
transition: all 0.5s;
background: rgba(42, 44, 57, 0.9);
}
#header.header-transparent {
background: transparent;
}
#header.header-scrolled {
background: #fff;
}
#header .logo h1 {
font-size: 28px;
margin: 0;
padding: 0;
line-height: 1;
font-weight: 700;
letter-spacing: 1px;
}
Have you tried changing the background color of the navbar:
#header {
height: 100px;
transition: all 0.5s;
z-index: 997;
transition: all 0.5s;
background: white;
}
#header.header-transparent {
background: transparent;
}
#header.header-scrolled {
background: #fff;
}
#header .logo h1 {
font-size: 28px;
margin: 0;
padding: 0;
line-height: 1;
font-weight: 700;
letter-spacing: 1px;
}
Related
Hi I'm trying to make a simple text pop-up button using just html and CSS. I looked at a bunch of examples but most of them use JavaScript in some way so I cant use them. found some that is pure CSS but when I tried them, they all do this weird thing where closing the pop-up brings me to top of page. Any help is appreciated. Thanks
jsfiddle: http://jsfiddle.net/hjrudc5n/
This is my HTML
```
<div class="box"><a class="button" href="#popup1">Show Overlay</a></div>
<div id="popup1" class="overlay">
<div class="popup">
<h2>Title</h2>
<a class="close" href="#">×</a>
<div class="content">Content</div>
</div>
</div>
</div>
and this is my CSS
/*pop up overlay */
.box {
width: 20%;
margin: 0 auto;
background: rgba(255, 255, 255, 0.2);
padding: 35px;
border: 2px solid #fff;
border-radius: 20px/50px;
background-clip: padding-box;
text-align: center;
}
.button {
font-size: 1em;
padding: 10px;
color: #fff;
border: 2px solid blue;
border-radius: 20px/50px;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease-out;
}
.button:hover {
background: blue;
}
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 30%;
position: relative;
transition: all 5s ease-in-out;
}
.popup h2 {
margin-top: 0;
color: #333;
font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.popup .close:hover {
color: orange;
}
.popup .content {
max-height: 30%;
overflow: auto;
}
Check this out:
http://jsfiddle.net/aj43psdw/13/
The problem with your code was that using "#" as an href will always take you to the top of the page, no matter what. Also, makes thing hard to control.
What you can do. is work with labels and checkboxes, and control the "state" of things via that.
Like this:
[name="popup"]{
width:0;
height:0;
overflow:hidden;
position:relative;
z-index:-1;
pointer-events:none;
}
[name="popup"]:checked ~ .overlay{
visibility: visible;
opacity: 1;
}
In the fiddle I linked you, clicking the button will check the checkbox, that we'll show via css. the X button will do the same, unchecking it.
It was because of href="#" of the anchor tag you were using, which led to going to top of page on closing the popup.
A workaround is to use <input type="checkbox" /> (so that you can use :checked selector) along with <label>(so that you can still interact with checkbox after hiding it), to hide, and unhide the popup.
/*pop up overlay */
.box {
width: 20%;
margin: 0 auto;
background: rgba(255, 255, 255, 0.2);
padding: 35px;
border: 2px solid #fff;
border-radius: 20px/50px;
background-clip: padding-box;
text-align: center;
}
.button {
font-size: 1em;
padding: 10px;
color: #fff;
border: 2px solid blue;
border-radius: 20px/50px;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease-out;
}
.button:hover {
background: blue;
}
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
#pop:checked + .overlay {
visibility: visible;
opacity: 1;
}
.popup {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 30%;
position: relative;
transition: all 5s ease-in-out;
}
.popup h2 {
margin-top: 0;
color: #333;
font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.popup .close:hover {
color: orange;
}
.popup .content {
max-height: 30%;
overflow: auto;
}
#pop{
display: none; /*Hide the checkbox*/
}
<div class="box"><label class="button" for="pop">Show Overlay</label></div>
<input type="checkbox" id="pop" />
<div id="popup1" class="overlay">
<div class="popup">
<h2>Title</h2>
<label class="close" for="pop">×</label>
<div class="content">Content</div>
</div>
</div>
This question already has answers here:
Keep the pseudo element in between the background and main content
(1 answer)
Avoid z-index working relative to the parent element
(1 answer)
Closed 4 years ago.
I am trying create a hover effect using CSS. Here is the link: http://creativeartbd.com/demo/test.html
Here is the code:
/* GENERAL BUTTON STYLING */
button,
button::after {
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
button {
background: none;
border: 3px solid red;
border-radius: 5px;
color: red;
display: block;
font-size: 1.6em;
font-weight: bold;
margin: 1em auto;
padding: 2em 6em;
position: relative;
text-transform: uppercase;
}
button::before,
button::after {
background:red;
content: '';
position: absolute;
z-index: -1;
}
button:hover {
color: black;
}
/* BUTTON 5 */
.btn-5 {
overflow: hidden;
}
.btn-5::after {
/*background-color: #f00;*/
height: 100%;
left: -35%;
top: 0;
transform: skew(50deg);
transition-duration: 0.6s;
transform-origin: top left;
width: 0;
}
.btn-5:hover:after {
height: 100%;
width: 135%;
}
<button class="btn-5">Button 5</button>
now if you run it you can see that there is style when you hover over the button. Now I want to set initial background for this button. So that IF I set the background here:
button {
background: orange;
}
If I do so then the effect is not showing.
Can you tell me why and how can I solve it?
JSFiddle
add z-index:0 to the element to create a stacking context and keep the pseudo element inside. You can then add background
/* GENERAL BUTTON STYLING */
button,
button::after {
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
button {
background: none;
border: 3px solid red;
border-radius: 5px;
color: red;
display: block;
font-size: 1.6em;
font-weight: bold;
margin: 1em auto;
padding: 2em 6em;
position: relative;
z-index:0;
background:orange;
text-transform: uppercase;
}
button::before,
button::after {
background:red;
content: '';
position: absolute;
z-index: -1;
}
button:hover {
color: black;
}
/* BUTTON 5 */
.btn-5 {
overflow: hidden;
}
.btn-5::after {
/*background-color: #f00;*/
height: 100%;
left: -35%;
top: 0;
transform: skew(50deg);
transition-duration: 0.6s;
transform-origin: top left;
width: 0;
}
.btn-5:hover:after {
height: 100%;
width: 135%;
}
<button class="btn-5">Button 5</button>
You can also simplify your code like follow:
button {
background: none;
border: 3px solid red;
border-radius: 5px;
color: red;
display: block;
font-size: 1.6em;
font-weight: bold;
margin: 1em auto;
padding: 2em 6em;
background:
linear-gradient(50deg,red 50%,transparent 50.5%),
orange;
background-size:250% 100%;
background-position: right;
text-transform: uppercase;
transition: all 0.5s;
}
button:hover {
color: black;
background-position: left;
}
<button class="btn-5">Button 5</button>
Just hover on 'a headline' in the snippet below and you will see how elements are moving. Why?
There's no margin .. And they're only moving when I add border to the inline-block element. Try to add more border width in section.twelve a like:
section.twelve a {
border-bottom: 10px solid #FFFAFF;
}
But if you remove the border everything's fine.. Why is this behavior ? and is it only for border?
I just want to add any styles to the element without effecting the others.
section{
position: relative;
height: 300px;
padding: 15px 80px;
z-index: 1;
}
section h1{
font-size:3em;
font-weight: 100;
line-height: 1.3;
}
section a {
position: relative;
display: inline-block;
text-decoration: none;
transition: all 0.3s ease-in-out;
vertical-align: bottom;
}
section.twelve {
background: #121A5A;
color: #FFFAFF;
}
section.twelve a {
color:#D8315B;
font-weight: 700;
overflow: hidden;
padding: 0px 5px;
transition all 0.2s ease;
border-bottom: 5px solid #FFFAFF;
}
.twelve a:before{
content: "";
top:0; left: 0;
position: absolute;
width:100%; height: 100%;
background: #FFFAFF;
z-index: -1;
transition: all 0.2s ease;
transform: translateX(100%);
}
.twelve a:hover::before {
transform: translateX(-95%);
background: #D8315B;
}
.twelve a:hover{
color: #FFFAFF;
transform: translateX(5px);
border-bottom: 1px solid #FFFAFF;
}
<section class="twelve">
<h1>Write a headline that makes people do kind of a double take whenthey read it.</h1>
</section>
When you add, or change the width, of a border, that changes the size of the element. Hence, by adding the border on hover, the box grows to occupy more space, which naturally shifts the position of surrounding text / elements.
One method to resolve this issue is to always have the border present, so the size of the box is fixed. When the border shouldn't be visible, it's transparent.
Here's an example:
section {
position: relative;
height: 300px;
padding: 15px 80px;
z-index: 1;
}
section h1 {
font-size: 3em;
font-weight: 100;
line-height: 1.3;
}
section a {
position: relative;
display: inline-block;
text-decoration: none;
transition: all 0.3s ease-in-out;
vertical-align: bottom;
}
section.twelve {
background: #121A5A;
color: #FFFAFF;
}
section.twelve a {
color: #D8315B;
font-weight: 700;
overflow: hidden;
padding: 0px 5px;
transition all 0.2s ease;
border-bottom: 5px solid transparent; /* ADJUSTMENT */
}
.twelve a:before {
content: "";
top: 0;
left: 0;
position: absolute;
width: 100%;
height: 100%;
background: #FFFAFF;
z-index: -1;
transition: all 0.2s ease;
transform: translateX(100%);
}
.twelve a:hover::before {
transform: translateX(-95%);
background: #D8315B;
}
.twelve a:hover {
color: #FFFAFF;
transform: translateX(5px);
border-bottom: 5px solid white; /* ADJUSED */
}
<section class="twelve">
<h1>Write a headline that makes people do kind of a double take whenthey read it.</h1>
</section>
Yes, on hover you are changing element's border, so, element's total height also changes
I'm working on some project and I've been trying to display a button after my whole element gets hovered. I think I'm using the right syntax, but things are not really working, I need help.
Code:
<div class="upgrade">
PURCHASE UPGRADE
<a href="#">
<div class="upgradeFooter">
<span>example</span>
</div>
</a>
</div>
.upgrade {
width: 24%;
height: 48%;
background: url('../background.jpg');
margin-right: 1%;
float: left;
margin-bottom: 2%;
transition: background 0.5s;
}
.upgrade:hover {
background: #d20a30;
}
.upgrade:hover ~ a.purchaseButton {
opacity: 1;
filter: alpha(opacity=100);
}
a.purchaseButton {
text-transform: uppercase;
background: #EEEEEE;
color: #000;
font-weight: 400;
padding: 15px;
margin-top: 100px;
margin-left: 18%;
float: left;
border-radius: 5px;
transition: background 0.5s;
opacity: 0;
filter: alpha(opacity=0);
}
a.purchaseButton:hover {
background: #ccc;
}
.upgradeFooter {
background: rgba(0, 0, 0, 0.3);
height: 20%;
margin-top: 25%;
box-sizing: border-box;
transition: background 0.5s;
float: left;
width: 100%;
}
.upgradeFooter span {
padding: 19px 0;
width: 100%;
float: left;
text-align: center;
font-weight: 400;
text-transform: uppercase;
color: #fff;
}
.upgradeFooter:hover {
background: #d20a30;
}
Code in JSFiddle
I hope that you guys help me out, thanks in advance.
The problem is in
.upgrade:hover ~ a.purchaseButton
if you remove the ~ all will be working just fine.
http://jsfiddle.net/93bphr4f/
html:
<button type="button" onClick="location.href='#'" class="buttonpink2">Claim 10 Free Student Accounts for Your School</button>
css:
/* PINK BUTTON 2 */
.buttonpink2 {
font-weight: bold;
font-size: 30px;
color: white;
cursor: pointer;
cursor: hand;
border-radius: 5px !important;
box-shadow: 4px 4px 4px #b5bcc2;
border: 0;
background-repeat: no-repeat;
background: #e57780;
height: 75px;
width: 100%;
position: relative;
}
.buttonpink2:after {
border-radius: 5px !important;
content: "Claim 10 Free Student Accounts for Your School";
display: block;
height: 100%;
width: 100%;
opacity: 0;
background: #c24e57;
-moz-transition: all 1s;
-webkit-transition: all 1s;
transition: all 1s;
top: 0;
left: 0;
position: absolute;
}
.buttonpink2:hover:after {
opacity: 1;
}
.buttonpink2 p {
color: #fff;
z-index: 1;
position: relative;
}
look at it,
I dont know why when I hover mouse on button, text move to top..
I want to text be still on center of button.
What i doing wrong?
Anyone can help?
Don't know why you complicated it too much but you simple use line-height equal of element height:
/* PINK BUTTON 2 */
.buttonpink2 {
font-weight: bold;
font-size: 30px;
color: white;
cursor: pointer;
cursor: hand;
border-radius: 5px !important;
box-shadow: 4px 4px 4px #b5bcc2;
border: 0;
background-repeat: no-repeat;
background: #e57780;
height: 75px;
width: 100%;
position: relative;
}
.buttonpink2:after {
border-radius: 5px !important;
content: "Claim 10 Free Student Accounts for Your School";
display: block;
height: 100%;
width: 100%;
opacity: 0;
background: #c24e57;
-moz-transition: all 1s;
-webkit-transition: all 1s;
transition: all 1s;
top: 0;
left: 0;
position: absolute;
line-height: 75px;/*add line height equal of element height*/
}
.buttonpink2:hover:after {
opacity: 1;
}
.buttonpink2 p {
color: #fff;
z-index: 1;
position: relative;
}
<button type="button" onClick="location.href='./freeaccess'" class="buttonpink2">Claim 10 Free Student Accounts for Your School</button>
You shouldn't use the :after tag at all in this situation.
// All the positioning made the button go crazy.
You should do it this way:
Use .buttonClass { } to set the basic button styling, and use .buttonClass:hover { } to only change the background of the button. You don't have to duplicate every item in the :hover part.
/* PINK BUTTON 2 */
.buttonpink2 {
font-weight: bold;
font-size: 30px;
color: white;
cursor: pointer;
border-radius: 5px;
box-shadow: 4px 4px 4px #b5bcc2;
border: 0;
height: 75px;
width: 100%;
background: #e57780;
-moz-transition: all 1s;
-webkit-transition: all 1s;
transition: all 1s;
}
.buttonpink2:hover {
background: #c24e57;
}
.buttonpink2 p {
color: #fff;
z-index: 1;
}
Strange way to do, why are you using pseudo-elements just in order to change background-color ?
.buttonpink2:after {
height: 75px;
line-height:75px;
...
}
will solve your problem, but I suggest you to remove the .buttonpink2:after element and just change the background-color of the button
If you would rather using padding instead of line-height, you can do this:
.buttonpink2:after {
height: 50%;
padding: 20px 0;
}
You can add some letter-spacing on :after to solve it, I just added 0.3px, you can try other values to make it better.
/* PINK BUTTON 2 */
.buttonpink2 {
font-weight: bold;
font-size: 30px;
color: white;
cursor: pointer;
cursor: hand;
border-radius: 5px !important;
box-shadow: 4px 4px 4px #b5bcc2;
border: 0;
background-repeat: no-repeat;
background: #e57780;
height: 75px;
width: 100%;
position: relative;
}
.buttonpink2:after {
border-radius: 5px !important;
content: "Claim 10 Free Student Accounts for Your School";
display: block;
height: 100%;
width: 100%;
opacity: 0;
background: #c24e57;
-moz-transition: all 1s;
-webkit-transition: all 1s;
transition: all 1s;
top: 0;
left: 0;
position: absolute;
letter-spacing: 0.3px
}
.buttonpink2:hover:after {
opacity: 1;
}
.buttonpink2 p {
color: #fff;
z-index: 1;
position: relative;
}
<button type="button" onClick="location.href='#'" class="buttonpink2">Claim 10 Free Student Accounts for Your School</button>