Problem in creating a sticky/fixed nav bar using css - html

I'm making a website where the top bar needs to be sticky where it is currently.
Please check the code on my git hub repository because its too big to accommodate
my github repository
basically I know that we can do it in 2 ways by making the div tag position: fixed; or position: sticky, but neither of them is working.

To solve this you can simply use:
.sticky{
position: fixed;
top: 0;
width: 100%;
}
position and top is already explained by other user but width is also required to keep the navbar's original form or else the navbar's components becomes disfigured as it loses its position.
In Your first picture we can see that the components have become disfigured

Just make sure your div has the following styles:
position: fixed;
top: 0px;
The top can have whatever value you want. If you want it to be at the very top of the page with no margin, make it 0, or else make it 10px for instance is you want it 10 pixels below the top of the window.
This will make sure your div or header is always at that particular position no matter where you scroll.

Related

I cannot make my html body scroll using overflow

Here is the html and css that i am using: https://gist.github.com/zacatac26/d5733e9289be157982a448a03bda6711
this is only a single page but just making this page work is fine.
I want to make it so the header and body is always in the same place on the webpage but also have the text in the body scroll. I have tried position: fixed and overflow: scroll/auto, but when i do so the page appears how i want but the text does not scroll.
Any help would be appreciated.
Typically the best way to achieve this is just to apply the position: fixed CSS rule to the container of the header element. position: fixed removes the element from the flow, like position: absolute, so you need to also tell the browser where to position the container, e.g. top: 0. To manage the width of the header, you can use left: 0; right: 0; or width: 100%.
I think this page gives the best example of how to achieve what you are going for: https://www.w3schools.com/howto/howto_css_fixed_menu.asp. I'd suggest starting with the HTML/CSS templates given in the tutorial and then add the content and styles from your Gist piece by piece, reviewing the results after each change to make sure that it still looks/behaves as you expect.
I had to make the background image part of the fixed header so that the page content would go underneath the header image and navmenu with no overlapping. I used the same percentages that enclosed the header for the background image with top:, bottom:, left: and right:

How can I make a fixed responsive top navigation?

I would like to make a top navigation "fixed" bar.
I'm currently experimenting with the code over on W3C.
Unfortunately the navigation bar is not fixed, how can I make it fixed?
NOTE: I have tried position: fixed; but it is not working as expected.
Try this CSS:
.fixed-navbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
See https://developer.mozilla.org/en-US/docs/Web/CSS/position
If you use a navbar like that you'll generally want to give it a height (eg 50px) and then offset the rest of your content by that much (eg margin-top: 50px; on your content container.
If you copy their code exactly on W3Schools and add the following onto the ul:
width: 100%;
top: 0;
left: 0;
position: fixed;
You'll get a fixed position on the ul, it will be pushed all the way to the left (no spacing), and all the way up the top (no spacing). Width (100%) just stretches the block across the web-browser (in respect to its size).
You could additionally add a class or an id onto the already existing ul (incase you have multiple existent ul elements) by using div#fixed-navigation for id or div.fixed-navigation for class (in CSS).
So in total you either have: <ul id="fixed-navigation"> or <ul class="fixed-navigation"> (if you choose to use an id or class attribute).
I created a working example for you on JSFiddle: https://jsfiddle.net/799rm54n/

how is the sidebar sticking to the bottom of the page in this bootstrap template?

I don't really understand how they are making this sidebar stick to the bottom of the page in this bootstrap template.
http://getbootstrap.com/examples/dashboard/#
If you look at the .sidebar class CSS properties, there is this weird
position: fixed; top: 51px; bottom: 0px;
But really no rule about the height of the column, and since it should automatically adjust to the height of the content, I'm a bit lost here.
I made an attempt with this CodePen :
http://codepen.io/anon/pen/ojQvjj
but really, the only way I found to make the sidebar stick to the bottom was to add a height property.
Thanks a lot for the answers, it will really help me make progress with CSS.
If you make a container or element (.sidebar) with position: fixed; + top: 0; bottom: 0; That container will 'stick' to the top and bottom of the parent element (body).
When you use a 'fixed navbar' in bootstrap, you need to add a margin-top > 50px or, in this case,top: 51px; so the sidebar starts after the navbar and it's not hiding behind it.
At some point it will overflow, that's why they add, overflow-y: hidden or scroll;
To be clearer. If you remove those .col-sm-3 .col-md-2 from that element, and give the .sidebar a left: 0; right: 0; it will take the whole viewport area.
Here if you see the code col-md-2 in first div and col-md-10 in second div and making first div as position: fixed; and when we make a div as position fixed it don't acquire any space in view port. and second div with col-md-10 will acquire that place but it will be hidden behind top position of first div so we use .col-md-offset-2 to move second div to 16.66 % right direction and top:0 and bottom:0 for giving position to a fixed div.
and whatever you want is there: please check you this codepen:
http://codepen.io/Gkakar/pen/KdrzBJ

wkhtmltopdf - Aligning logo to bottom without using a footer

I want to add a logo at the bottom of the very first page. Ideally I'd position:absolute it bottom:0 - but anything positioned to the bottom in wkhtmltopdf doesn't seem to work.
This is a problem because the logo is dynamic and could have different heights depending on the aspect-ratio of the uploaded image.
I see that I can add a footer, but this adds it to all pages, and I only want this on one page.
What are my options? Do I have to position-absolute it from the top? If so, what if the page size changes? This needs to work in A4 and US Letter.
I was having the same issue and solved by actually adding a width to the element. So, for the element I want to stick to the bottom I have this css:
.footer {
position: absolute;
bottom: 0;
width: 100%;
}
This didn't work for me. (using python's pdfkit)
I had a one page document and I wanted a footer.
I had to set the height of the page to be the height of a sheet of paper (<body style="height: 297mm">) and then absolute position worked correctly.
Had the same issue, used the answer of Carlo but changed it to use the top margin since it is using the document margins. This way the element was always on the bottom of the first page.
.footer {
position: absolute;
top: 700px;
width: 100%;
}

Always display footer at the bottom of the page

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.