I currently have my header sticky but of some reason it has an opacity. I want it to be relative and sticky but I can't assign both to the header.
This is what I have:
.header {
height: 80px;
padding: 0px;
background-color: #007eb6;
position: sticky;
top: 0;
}
Use the z-index property to stack your div on top of everything with the position: sticky,
if you mean that you want your header to scroll down with you when you're scrolling, then you're looking for position: fixed.
And for the opacity part, it's most likely your header is inside a div which has the opacity property, so check that as well or get your header div out of it.
Hope this helps.
.header {
height: 80px;
padding: 0px;
background-color: #007eb6;
z-index: 99;
position: sticky;
top: 0;
}
<div class="header"> header here</div>
<div>here's another content</div>
It's hard to understand what you want to achieve, so I apologize if this isn't quite what you hope to find.
I tried this:
https://playcode.io/1038441
Here, you see 'Moo' has your styling, and it isn't transparent or translucent. So, I suspect you have another style that's introducing that. You might check to see what your element has inherited, or you might explicitly set your .header to have an opacity of 1 (.header{ opacity: 1;})
As you scroll the blathering text, it scrolls under the 'Moo' header, which is what sticky does.
It can be 'relative' in the sense that you could give a 'top' of 10px, and it will be offset from the top by 10px, but still 'sticking' to the location.
Related
I'm using iViewUI for my Tag component, but I wanted to customize its size and where the "X" close button is.
I was able to change the width by simply adding a class to the Tag, but for some reason, even i'm trying to override also its children icon, is not responding to the change at all, is not applying it. Checked on browser, not adding it there either.
This is what I've done so far:
<Tag class="Badge-tag" color="warning" closable #on-close="removeTag">{{ badge }}</Tag>
Then on the less file I added the following:
.Badge-tag {
width: 60px;
position: relative;
.ivu-icon.ivu-icon-ios-close {
position: absolute;
right: 2px;
top: 4px;
}
}
I had no luck at all. I don't know why is not setting it.
If you put above css as global css, I think it should work.
I create a demo on jsfiddle here, please check
If you use scoped css, you can try using deep selector
.Badge-tag {
width: 60px;
position: relative;
/deep/ .ivu-icon.ivu-icon-ios-close {
position: absolute;
right: 2px;
top: 4px;
}
}
I have a client that wants a header like on this site http://www.solewood.com/
I have found a few questions here but they are geared only for a certain element of the header. Here is the site I am working on http://treestyle.com/ The password is vewghu
They are both shopify sites. Any help would be greatly appreciated.
If you inspect the solewoood website you can get an idea of how they've implemented the header.
When the page is at the top, there is this CSS for the header div:
<div class="header">
.header {
position: fixed;
transition: all 500ms ease 0s;
width: 100%;
z-index: 1000;
}
And when you scroll down, the .header_bar CSS class is added to the div as well:
<div class="header header_bar">
.header_bar {
background-color: #FFFFFF;
border-bottom: 1px solid #E5E5E5;
}
.header {
position: fixed;
transition: all 500ms ease 0s;
width: 100%;
z-index: 1000;
}
There are a few other things that are also changed when the user scrolls down from the top (logo, text colour, etc.), but you get the idea.
If you are unsure how to detect if the user is at the top of the page, see here.
EDIT:
In response to your comment, try using jQuery's .toggleClass() with 2 parameters.
For example:
$(window).scroll(function(e){
$el = $('.header');
$el.toggleClass('header_bar', $(this).scrollTop() > 0);
});
This shows it quite nicely: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_shrink_header_scroll
I used this technique to turn the background-color to white on scroll, then back to transparent when back at top.
And if you wanted to completely swap out headers. You could duplicate the headers, then use this to turn display on and off for those.
Simple question, how do I set up a page overlay (just a semi-transparent black cover) so that it's 100% of the viewport's height and width, including scrollbars?
I've already tried:
body{
background-image:url(../pictures/background2.png);
background-position:top;
background-size:100% 100%;
background-repeat:no-repeat;
margin:0;
border:0;
height:100%;
}
/*Loading*/
#loadingoverlay {
position: absolute;
height: 100%;
width: 100%;
background-color: rgba(0,0,0,0.7);
filter:alpha(opacity = 80);
top:0;
bottom:0;
z-index:99;
}
It only covers the viewport without scrollbars. In other words the moment I scroll down, the content below one screen height doesn't get covered by the overlay.
Obviously this won't work either:
/*Loading*/
#loadingoverlay {
position: absolute;
height:9999px;
width:9999px;
background-color: rgba(0,0,0,0.7);
filter:alpha(opacity = 80);
top:0;
bottom:0;
z-index:99;
}
As that just stretches the viewport into 9999x9999.
The scrollbar is not a part of the "viewport". You're styles and javascript have domain over the viewport but not the scroll bar. You can turn off scroll bars but you can not have an overlay go over it. It's possible to do windowless Flash but that's not an implementation you want.
I currently have this code
#navlogo {
background: url(img/logo.png);
background-size: 100px;
display: block;
height: 98px;
width: 98px;
border-radius: 49px;
}
and I want to add this code
#navlogo:hover {
background:url(img/logoblog.png);
display: block;
height: 98px; /* this doesn't work */
width: 98px; /* this doesn't work */
}
Th original images are 150x150 scaled down and for some reason look better than using 98x98 especially on the iPhone. However, I can't seem to set the background size for the :hover element ....it stays it's original size. I know it can be done with background-size: 98px 98px; but this also isn't compatible with IE8 and lower, and CSS3PIE doesn't cover background-size either. is there anyway to do this or do I have to resize the hover picture?
Try changing the background size from a defined 100px to contain. If you're changing the div size on hover, then the background size will change with it in that scenario.
E.G.:
#navlogo {
background: url(img/logo.png);
background-size: **contain**;
display: block;
height: 100px;
width: 100px;
border-radius: 49px;
}
#navlogo:hover {
background:url(img/logoblog.png);
display: block;
height: 98px; /*this doesn't work*/
width: 98px; /*this doesn't work*/
}
I'm assuming that's what you're going for in this example, as the properties that you're specifying "don't work" in the hover styling are resetting the same values that are present in the normal state styling. Nothing would change given that they are defined exactly the same.
EDIT
If the logoblog image is indeed bigger, setting the background-size property to 'contain' should solve this problem as well.
I want to create a sticky header bar for a website just like the sticky header on this website (http://www.fizzysoftware.com/) if any on can can help me out with coding or any resource that helps me to create the same. Your reply would be of great help to me.
In your CSS, add
position: fixed;
to your header element. It's just that simple, really.
And next time, try to use right click on something you see on website and choose "Inspect element". I think that every modern browser has it now. Very useful function.
If you want to make it sticky when it's scroll down to a certain point then you can use this function:
$window = $(window);
$window.scroll(function() {
$scroll_position = $window.scrollTop();
if ($scroll_position > 300) { // if body is scrolled down by 300 pixels
$('.your-header').addClass('sticky');
// to get rid of jerk
header_height = $('.your-header').innerHeight();
$('body').css('padding-top' , header_height);
} else {
$('body').css('padding-top' , '0');
$('.your-header').removeClass('sticky');
}
});
And sticky class:
.sticky {
position: fixed;
z-index: 9999;
width: 100%;
}
You can use this plugin and it has some useful options
jQuery Sticky Header
CSS already gives you the answer. Try this out
.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
}
now add the class sticky to any menu sidebar or anything you want to stick to the top and it will automatically calculate the margin and stick to the top. Cheers.
If you want simplicity in a HTML and CSS option to create a Stiky NavBar you can use the following:
Just create a navbar like this one:
<nav class="zone blue sticky">
<ul class="main-nav">
<li>About</li>
<li>Products</li>
<li>Our Team</li>
<li class="push">Contact</li>
</ul>
</nav>
Remember to add the classes in this case I created a Zone (to separate my HTML in specific areas I want my CSS to be applied) blue (just a color for the nav) and sticky which is the one that gonna carry our sticky function. You can work on other attributes you want to add is up to you.
On the CSS add the following to create the sticky; first I am gonna start with the zone tag
.zone {
/*padding:30px 50px;*/
cursor:pointer;
color:#FFF;
font-size:2em;
border-radius:4px;
border:1px solid #bbb;
transition: all 0.3s linear;
}
now with the sticky tag
.sticky {
position: fixed;
top: 0;
width: 100%;
}
Position fixed meaning it will always be in the same position; and with top 0 I will always be at the top and a 100% width so it covers the whole screen.
And now the color to make our navbar blue
.blue {
background: #7abcff;
You can use this example to create a sticky navbar of yours and play around with the CSS properties to customize it to your liking.
Try This
Add this style to the corresponding
style="position: fixed; width: -webkit-fill-available"
OR
<style>
.className{
position: fixed;
width: -webkit-fill-available;
}
</style>