I want to increase the transparency of the image and top menu after I scroll and the logo in the header changes to small. Can anyone help?
Here is the site url: https://theportwebdesign.com/
The et-fixed-header class is appended to #top-header when your scroll. I assume a JS script is taking care of this.
To change the opacity add this line to your CSS or modifying existing. You should probably be able to change this is your theme settings somewhere, if not you are most likely going to have to use !important as it looks like most of your CSS is written directly to the screen.
.et-fixed-header#main-header{
background-color: rgba(0,0,0,0.8) !important;
}
The first three numbers are used for color and the last is used for opacity.
You need to change the color value of header (div) from RGB to RGBA onscroll event
<div id="logo" style='width:1024px;height:50px;'></div>
<script>
document.getElementById("logo").addEventListener("scroll", modifyHeader);
function modifyHeader()
{
document.getElementById('logo').style.backgroundColor="rgba(255, 255, 255, 0.3)"; // This is RGBA color value which makes your div transparent
}
</script>
Related
My portfolio has a black background color at the top and a white one at the bottom. When you overscroll at the top the white background of the body shows for a brief moment, creating an unwanted contrast like this:
So I want black overscroll for the top and white for the bottom. A simple fix for the top is to set the background-color of the body to black, but then I get the reverse problem for the bottom. I tried using linear-gradient on the body and html-page or putting colored containers with negative margins at top or bottom, but that did not work. Is there a way to have different colors for top and bottom overscroll?
Example Code Sandbox:
https://codesandbox.io/s/overscroll-color-ns9yd
Example Code Sandbox Live (you can't test the overscroll in the sandbox):
https://ns9yd.csb.app/
Addition:
Today when I used chrome on android and on windows with a mouse I realized that the described overscroll effect does not appear there. Therefore the effect is likely specific to touchpad scrolling. I have been using a MacBook when I asked the question. So it might only occur on MacBooks when scrolling with the touchpad
Youtube Demonstration of overscrolling:
https://youtu.be/Ec1D6KNlhIM
Overscrolling with body background black (the simple fix):
https://youtu.be/zYITinXs6OY
Since this overscroll effect did not appear on an android phone and windows pc, I assume it is (macos?) touchpad scrolling specific and browsers with the dom and CSS just do not provide an api for this rare behaviour.
But if you want to prevent the overscroll effect use:
html,
body {
height: 100%;
overscroll-behavior-y: none;
}
I understand this question is outdated, but I had a similar issue and came up with a fix.
By putting a listener on the window's wheel event, we can check the delta of the scroll. With that information we can change the documentElement background color to match the page's (black)"ceiling" or (white)"floor":
let isCeiling = false;
window.addEventListener('wheel', (e) => {
const delta = e.deltaY;
if (delta < 0 && !isCeiling) {
document.documentElement.style.background = 'black';
isCeiling = true;
} else if (delta > 0 && isCeiling) {
document.documentElement.style.background = 'white';
isCeiling = false;
}
});
You can wrap whole website in wrapper and linear gradient to this wrapper
And make background: #000 for body
You can check solution here (Example Code Sandbox)
https://codesandbox.io/s/youthful-dewdney-9l5p6?file=/index.html:95-149
Or Here (Live sandbox)
https://9l5p6.csb.app/
Similar to Bryant's solution, this CodePen exposes the window's scrollY property to the page by setting it as an attribute on the page's HTML tag, allowing any CSS styles to easily reference the value:
// ... assuming some debounce function ...
// Store scroll position in page's data attribute
const storeScroll = () => {
document.documentElement.dataset.scroll = window.scrollY;
}
// Listen for new scroll event
document.addEventListener('scroll', debounce(storeScroll), { passive: true });
Now, the CSS can be intelligent about its styling:
/* Applies to top of page */
html[data-scroll="0"] body {
background-color: black;
}
/* Applies to bottom of page */
html:not([data-scroll="0"]) body {
background-color: white;
}
Reflected in the HTML as:
<html data-scroll="{ scrollY }">
...
</html>
Unfortunately, if someone is using a newer version of Safari with theme-color support, then the color of the browser bar will change with the body's background-color. Moreover, setting <meta name="theme-color" content="#ffffff"> will override the overscroll color completely.
Of course, this all assumes that the user of your website has JS enabled. A simpler, non-JS solution could potentially be like this answer, where the body's background-color is set to one value and its full-size background-image is set to a single colored pixel. Other solutions involve adding fixed off-screen pseudo-elements with the desired color above and below the page.
I have button which is <a> element with href, which doesnt have any background set on :active/:focus/:visited, but on force/3dTouch tap it gets this weird #b8b8bc background under the text only (while <a> doesnt have any children e.g. <span> etc so I suppose this is the text node highlight).
here's the gif to illustrate the behavior.
I've tried adding -webkit-tap-highlight-color: transparent but it changes only regular tap color, not the forced/3d one
also I thought maybe that's selection color (as I can reproduce this on various websites) so tried to use selection selectors which didn't help as well
::selection {
background: transparent;
}
::-webkit-selection {
background: transparent;
}
::-moz-selection {
background: transparent;
}
Any ideas about possible origin of this?
Good job digging up.
I had the same issue plus another one and here are my solutions.
Post is old but someone could find it useful like me today.
First of all, the forced background was covering my link text totally because I was using user-select: none; on my header links.
So that's something to check, just in case.
Regarding the background color, Force Touch doesn't use the link parent element background but the one that's under it.
If you want to "feel it", we could say that Forced Touch digs into the direct parent background and let the under layer appears.
So, to counter that without having to touch to background color, I use some z-index in the parent element to elevate it, preventing Forced Touch to "dig" :)
So if your links parent element is named card, you can add to your CSS:
.card {
isolation: isolate;
z-index:1;
}
Now, Force Touch will use the parent background color as we want to.
Okay so I found sort of "solution" based on parent's color.
Try to set *{background: red}.
If worked try set same on few parents .parent1 { background: pink}, .parent2 { background: lightblue}, .parent1 { background: salmon} etc.
In my case I found the color applied to force touched text was menu wrapper's background that takes most of the screen when menu is opened.
Side effect of this change - all forcetouched elements will have same color, no option to specify :hover or :active colors (you can see the color is slightly different on the 1st click) and ALL links will have same background:
I imagine you can try setting wrapper's background via JS based on what is clicked. Not sure if that will work. see docs here:
WebKit DOM Programming Topics
So far this seems to me too fragile to touch and I would not recommend doing this. Though you can change this color I've decided to let OS do what it wants here.
Can anyone please explain to me what is going on over here, I am trying to override the background color to dodgerblue but for some reason the white background color is also being rendered underneath it.
I have the following snippet inside my css file.
.modal-content {
color: $dropdown-text;
background-color: dodgerblue ;
opacity: 0.9;
}
I have an angular 2 project and for some reason I cannot override the background color.
Here are the outputs with and without the white background color.
Here is the other one.
Any help with is will be much appreciated.
It's simple. You use opacity. Set opacity: 1 to modal-content
It looks like your opacity needs to be set to 1 not 0.9.
Also check that your css rule is the last one to be run by the browser. If you're trying to overwrite a rule, you need to load your libraries' css files in the header first, then your style.css last so you're changes overwrite the base library styles.
Why second time opacity show 0.5 it should be as in first 0.9. and also modal content should not be with opacity, it should be hard without opacity.
Set below property to modal instead of modalContent.
Also try with important property for back-color;
.modal, modal {
color: #7d7d7d;
background-color: dodgerblue !important ;
opacity: 1;
}
In default, Magellan (Sticky navigation's plugin in Foundation) adds to element "top" property. I want prevent it, because I've also fixed topbar, so navigation is underneath. My navigation show is animated and all properties are added by CSS, so I just need prevent add top: 0px directly inline div.
My code looks that:
<div class="sticky bar" data-magellan-expedition="fixed">...</div>
And my CSS:
.sticky.bar.fixed {
bottom: auto;
padding-bottom: 6px;
z-index: 98;
top:45px;
animation:subnav_sticky .2s;
-webkit-animation:subnav_sticky .2s;
}
#keyframes subnav_sticky
{
from {top:-33px;}
to {top:45px;}
}
#-webkit-keyframes subnav_sticky /* Safari and Chrome */
{
from {top:-33px;}
to {top:45px;}
}
It's possible without edit JavaScript plugin?
I found something.
joseluisq's answer with Javascript is great. I can't add !important into CSS, because it broke animation in Firefox. But I found a solution on Foundation GitHub repository. Nobody adds it into documentation...
The solution is just add data-magellan-top-offset into element. So in my problem it will be:
<div class="sticky bar" data-magellan-expedition="fixed" data-magellan-top-offset="45">...</div>
I hope it will be helpful ;)
Ok, I see you want to rewrite top property for Magellan, Magellan adds the top property value via javascript, so you can try to rewrite this property using !important in your css for your other top navigator.
The other solution is using javascript for replace the top value as you need:
$(window).scroll(function(){
$('div[data-magellan-expedition=fixed]').css('top', 'your top value');
});
Good luck!
Here's how I did it, hope it helps someone.
You can configure magellan in javascript using something like this as explained in Foundation's website
$(document).foundation({
"magellan-expedition": {
active_class: 'active', // specify the class used for active sections
threshold: 0, // how many pixels until the magellan bar sticks, 0 = auto
destination_threshold: 20, // pixels from the top of destination for it to be considered active
throttle_delay: 50, // calculation throttling to increase framerate
fixed_top: 0, // top distance in pixels assigend to the fixed element on scroll
offset_by_height: true // whether to offset the destination by the expedition height. Usually you want this to be true, unless your expedition is on the side.
}
});
the field named 'fixed_top' in there is the one that defines the top distance of the nav element. Make sure that's set to 0 and it should work.
Note that this should be loaded last to make sure it doesn't get overwritten.
I have a button that, when hovered over, I would like the background image to display also. (It is an arrow an explanation of the button). There are quite a few questions similar, but I couldn't quite tweak the answers to work for me.
The HTML looks like
<div id="header_feedback">
<a href="#contactForm">
<img title="Add an Event" src="./img/header_feedback.png" alt="Give us your Feedback"/>
</a>
</div>
the CSS then is
#header_feedback
{margin-left:730px;
margin-top:-135px;
position:absolute;}
#header_feedback:hover
{
background: url ('./img/addevent_tip.png');
}
Any ideas hugely welcome!
The main problem here is not with your CSS. Itagi's answer correctly identified the minor issue that you can't have a space between url and the parens/address.
But there are two other bigger issues:
Invalid image url: when applied, background: url('./img/addevent_tip.png'); fails to find a valid image. To fix this, you either need two periods or zero. So either background: url('/img/addevent_tip.png'); or background: url('../img/addevent_tip.png');
Backgrounds applied to opaque images aren't visible: Since the entire content of the div is an image and that image has no transparency, you will not be able to see the on-hover change even when it happens correctly. You can adjust for this by making part of the image transparent (and, perhaps, setting a background for the non-hover state that leads it to look the way it normally does), or by abandoning the image in favor of CSS spriting.
you just need to change it the following way:
#header_feedback:hover
{
background: url('./img/addevent_tip.png');
}
no whitespace between 'url' and the actual url
#header_feedback a img{ display:none;}
#header_feedback a:hover img{display:block}