I want to use a sticky header, and on a normal screen (PC/Laptop, etc) it works fine. But on the phone it doesn't work when I zoom in.
I think it happens, because the phone just shows a part of the website, while the page still has the same height as when not zoomed in.
I just have this CSS:
.sticky {
position: sticky;
top: 0;
width: 100%;
}
Is there any way to make my header stick to the screen-top, instead of the page-top?
Use position: fixed
It will take screen height
Change sticky to fixed, that way your header should be always on the top of the screen and I suggest you to read this for more information https://www.w3schools.com/cssref/tryit.asp?filename=trycss_position2
Related
This is how the footer is looking only on the Contact Page of the client's website.
If you notice the footer is not sticking to the bottom of the page and hiding the submit button.
I have tried below CSS but then it sticks and is always visible with scroll, like sticky nav. If I remove the fixed position it again leaves the bottom and hides the submit button.
.footerclass {
background-color: #eeeeee;
position: fixed;
top: auto;
bottom: 0;
width: 100%;
display: inline-block;
}
It is only happening on one page i.e. Contact Us page. I am using "Contact 7 form" using elementor.
How can I fix this? So that it always remains on the bottom of the page for all pages no matter how big the form becomes.
Add position: relative to your main container (from what I can see that's your .site class), as well as min-height: 100vh. This will allow you to set the footers position to absolute, relative to the main container.
It will always be at the bottom of the content, but not stick when scrolling. Using the min-height will also ensure that even if there isn't enough content to scroll, the footer will still be at the bottom of the page.
The problem is with style
#media (min-width: 768px){
.elementor-section.elementor-section-height-full {
height: 100vh;
}
}
Easiest hack would be to add this to your custom css, but with height "auto".
Screenshot from inspector, where it is:
The issue is not with footer, but with content overflowing behind this because of fixed height.
I'm creating a website and have problem with the navbar who doesn't stay in de header when I zoom out.
So in html i have a and inside that I have a with id main-menu. And my css look like this:
.main-menu {
position: absolute;
top: 16px;
right: 10px;
height: auto;
display: block;
}
The max-width on my website is 1920px and everything looks fine until I zoom out. My navbar is then appearing outside (10px from the right of the side) the header. I want it to always be 10px from the right of the header not the whole site.
Can someone help me? I'm new to this.
if added position: relative to parent div, I think the problem can be solved. But if the problem is not solved, can you send code all header? (HTML and CSS)
Try to use position: fixed rather than position: absolute. The latter makes it absolute relative to the page, but will scroll with the page. The former will stay fixed relative to the viewport, which is what you want.
I want to display my footer at the bottom of the page, relative to the content area. So it should adapt if my browser is smaller or larger, up until where the content area stops.
I tried to follow this link but I can't seem to get it to work on my website.
I added the PUSH div at the bottom of my content area
I set the correct heights and adjustments in the css
My footer is still displayed half way on my screen and also messes up the titles. The guys that sold me the Wordpress theme are reluctant to help me ...
If anyone could guide me in the right direction that would be a great help!
I think this could do what you want:
body {
padding-bottom: 50px;
/* Set a padding-botton equivalent
to the height of your footer
this is for preventing the
footer to be covered because
of its z-index
*/
}
footer{
position: fixed;
bottom: 0;
width: 100%;
z-index: -999;
}
Hope it works ;)
Add the following code to your css:
footer{
position: fixed;
bottom: 0;
width: 100%;
z-index: 999;
}
The footer will be always on the bottom.
Ok so the issue here is this, you can stick the item to the bottom as #Dzhambazov suggested either with position:absolute or position: fixed it is going to stay in place at the bottom even if that is halfway up your content.
So you can go with other alternates like: How do you get the footer to stay at the bottom of a Web page?
Mentioned in the comments, but this is not going to be as easy with a prebuilt theme as you will be fighting with the theme dev's structure.
What you could do as a fix to make it more bearable is to increase the minimum height of the content so that it "fakes" the footer further down, this has its draw backs and could mean that your footer is off the bottom of the view port, but if it is irritating you to that level. you could try.
#content {
min-height: 200px;
/* forces the content block to take up space */
}
hope that helps other wise stick the footer to the bottom as mentiones and have it always display, but note that may trash mobile so you will want to remove the positioning via a media query for phones etc.
I am pretty much stuck in this html problem.
I have a page. i want its footer to stay at the bottom and have certian distance to element above it. here the Twitter + G+ div.
please see the css inside #media (min-width:481).
i tried this:
html, body{
height: 100%;
}
.fuss{
position: absolute;
bottom: 0;
}
this works for big screens, but if i resize the window to small 15' screen laptop, footer is going over my Twitter and G+ elements. why is this?
this is the page: http://www.bibago.de/test.html footer works fine in big screens, but in small screens the footer goes over other elements and doesnot stay at bottom.
please help.
thanks.
You don't need to do anything special for the footer to appear at the bottom. Simply put it at the end of your page, and as HTML is rendered line by line, it will appear as the last thing (always at the bottom).
.fuss{
margin-top: 50px;
}
I usually do like this:
.fuss {
position: fixed;
bottom: 0;}
Here's the situation. I'm building a webpage where i position an image on the right side of the page. When I make the browser window smaller, i want horizontal scroll bars to appear, so i include overflow: visible property. I also want the image to be positioned fixed so that when the page is scrolled down the content in the middle along with the background scrolls but the image stays as it is. But I am not able to bring both features to my page.The two properties seem to conflict each other. Is there a way around it?
Your code is too little.The problem of the front with the example of code.
try img fixed:
img.fixed{
position: fixed;
right: 10px;
top: 10px;
width: 100px;
z-index: 55;
}
I think you need to use css concept called media types....
you can not achieve this using only position:fixed
add this css to your page
#media all and (max-width: 699px), (max-height: 500px){
.overflowDiv{
position:fixed;top:100px;height:100px;width:100px;
overflow:scroll;
}
change max-width and max-height according to your need
here is jsfiddle demo
Hope it'll help you.
Thank you