I have been toying with the different templates at Weebly and trying to find one fixed nav bar that I can add social links at the top to, but I can't seem to work with any. The social links tend to be out of place.
I have decided to use a current template, but need to fix the current header portion. I have tried adding position: fixed to a few areas of the CSS, but it turned out horrendous. The background can be seen along with the scrolling.
apply this to #header-wrap
position: fixed;
top: 0;
z-index: 1;
background: #FFF; //if you want a background on the fixed header.
You now have the border on the #page-wrap so if you want to keep that give this div a margin-top.
If you want the border on the fixed header, put it there.
Styling for you nav:
#nav-wrap {
position: fixed;
top: 47px;
z-index: 2;
}
#nav-wrap .container {
clear: both;
overflow: hidden;
position: relative;
padding-bottom: 10px;
margin-bottom: 10px;
background: url(theme/saperator.png?1418308200) no-repeat bottom left;
z-index: 2;
background: #FFF;
}
http://jsfiddle.net/ft44wLym/
Related
I'm not currently a great front-end guy, and right now I have a problem with my footer in my application. I wrongfully gave it max-width in the css. Basically I want it to always be on the bottom of the page no matter what size the screen is or how much content is on the page. Here is a screen shot of what I'm currently working with.
Screenshot:
Notice how the footer is kinda floating there in the middle of nowhere. I'd like it to be at the very bottom of the page right there. And if the user were to adjust the screen the footer would remain at the bottom. Here is my current HTML and CSS
HTML:
<div class="footer">
Copyright # 2016 Lockdown Inc
</div>
CSS:
.footer {
border-top: 1px solid #d3d5d5;
text-align: center;
margin-top: 40px;
padding: 20px;
background-color: #d2d2d2;
}
Any help with this would be great.
This is the general idea. Without your markup, I can't give you a more specific answer, but this should do it. position: fixed; will keep it at the bottom of the window.
.footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
}
If you'd rather have it at the bottom of the page, not necessarily the window...
body,html {
min-height: 100vh;
position: relative;
}
.footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
For reference, this is a good article on the differences between position: fixed; and position: absolute;, and why position: relative; is important when you use position: absolute; https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
I'm wondering if someone could help me e to create a fixed/sticky header... Not quite sure how to make this happen with CSS or HTML (sorry, I'm a neophyte).
My site is http://www.oliviafialkow.com/ and I would like my logo to stay fixed as visitors scroll down the page, like this example: http://lockebride.tumblr.com/
Any help would be wonderful--thanks!
My header HTML is as follows:
<div class="logo">
{{^customize.images.logo.url}}
<!--No Logo-->
<h1>{{site.title}}</h1>
{{/customize.images.logo.url}}
{{#customize.images.logo.url}}
<!--Logo Uploaded-->
<h1><img src="{{customize.images.logo.url}}" alt="{{site.title}}"></h1>
{{/customize.images.logo.url}}
</div>
My header CSS is:
/***** site_name color *****/
.logo h1 a {
color: {{{customize.colors.site_name}}};
}
/***** subtitle color *****/
.logo h2 {
color: {{{customize.colors.subtitle}}};
position: fixed
}
Thank you!
I regularly use this solution:
position: fixed;
width: [your-width-here]
margin: auto;
This will auto-center it; no weird calculations or ~48%'s in your CSS.
However, if you want to exactly mirror what is seen on the page you mentioned:
.parent-div {
float: right;
right: 50%;
position: fixed;
z-index: 19999;
}
.child-div {
position: relative;
float: right;
right: -50%;
}
Alongside position: fixed, you also need to provide a top: 0 and left: calc(50% - [width of your logo]
Add this into your .logo div:
position: fixed;
top: 0;
left: calc(50% - 80px);
z-index: 10;
The logo will then be taken out of the flow of the document, and so you should add a spacer of some sort to fill in the space originally occupied by the logo image.
Edit your css like this
#site-header {
padding-top: 110px;
margin-bottom: 50px;
}
#site-header .logo h1 img {
width: 100%;
}
.logo {
font-size: 100%;
position: fixed;
left: 45%;
top: -21px;
width: 10%;
z-index: 1000;
}
Important, you must use a png logo.
Try with
.logo {
left: 50%;
position: fixed;
top: -20px;
}
For the logo really to be centered, you need a 2nd div inside with margin-left: 50%
In your case you can just add the margin to the #site-header .logo h1 class in line 91 of your CSS:
#site-header .logo h1 {
margin-left: -50%;
font-size: 1.8em;
line-height: 1.2;
text-align: center;
}
Usually you'd go with
<div class="logo" style="left: 50%; position: fixed;">
<div style="margin-left: -50%;">
// Your logo goes here
</div>
</div>
Position fixed is the easiest solution here, I've made a jsFiddle for you to... well... fiddle :) and see how to achieve what you want: jsFiddle. Please note that you need a transparent png logo to make this look as it should (your current is a jpeg with white background).
.logo-placeholder {
height: 180px; /* height of your logo */
}
.logo {
position:fixed;
top:0;
right:0;
left:0;
height:180px;
text-align:center;
z-index: 100;
}
.logo-placeholder just keeps the space that would normally be taken by your logo that is now "floating" above the rest of the content of the page. So you need to add it to your HTML:
<div class="logo-placeholder"></div>
<div class="logo">
<!-- your not modified html -->
</div>
This should work for both variants: image (if you have it uploaded) or text (if you don't).
However, I can see your webpage is responsive and just changing your logo to position:fixed would probably ruin user xperience and the visuals on mobile. iOS devices (which are most important for now in terms of mobile browsing) doesn't like fixed positioning and have some weird behaviour in terms of scrolling: they only update the position of an element once you end scrolling, and not while you do it (like normal desktop browser). That would result in your logo jumping all over the place while scrolling.
Also, using such big logo on small mobile screen would occupy most of the viewport which is not good either (not to mention problems with navigation caused by your logo overlapping buttons etc.).
So, if I were you I would add this CSS to make your change not affect mobile at all:
#media only screen and (max-width: 600px) {
.logo {
position: static; /* that is just default positioning */
}
.logo-placeholder {
display:none; /* we don't need tht anymore since logo is back on its place :) */
}
}
And here's the fiddle for the version with media-query: jsFiddle - you can scale the viewport to see it working.
I can't add a footer to the bottom of the page. It always displays in the middle of the page or something like that. It would be cool if there was some way to modify the footer div element to always show on the bottom of the page, even after adding more stuff to the center/top of the page (so not a fixed position).
Here's what I'm up to in CSS: (the id of the div is ofc "footer")
#footer {
text-align: center;
margin: 0px auto;
position: bottom;
bottom: 0px;
font-size: 10px;
padding: 10px;
}
I used something similar for my header (logo), and based on that I tried working the same with the footer with no success. Here's my header CSS, just for reference:
#logo {
position: center;
margin:0px auto;
top:0px;
text-align: center;
}
I used an image for the logo without any text and only text for the footer.
You need to add the following styles to your footer div in order to make it stick to the bottom of your website:
#footer {
position: absolute;
bottom: 0;
}
I'm using bootstrap's navbar-fixed-bottom to have a sticky navbar at the bottom. This works great. The problem I have is when I use Backbone.Marionette to dynamically add content the navbar no longer sticks to the bottom - rather it just stays in the same spot, hiding some content and eventually the content just goes below it as I add more.
Is there a way to force the navbar to stay stuck to the bottom regardless of how much content is added?
Or simply...
.navbar{
position: fixed;
bottom: 0;
left: 0;
right: 0;
/* the rest of the styling */
}
A lot neater and easier I find. And doesn't matter how tall your navbar is. You can add heights and colours and whatever styling you want after it.
This is an old trick without Bootstrap. Supposed you know the height of the navbar. You can try this: http://jsfiddle.net/e85xw/
.navbar{
height: 2em;
width: 100%;
background: blue;
color: white;
position: fixed;
top: 100%;
margin-top: -2em;
}
If you don't know the height of the navbar, you can use JS for a little help
http://jsfiddle.net/2T282/
<style>
.navbar{
height: 2em;//in case this number is dynamic
width: 100%;
background: blue;
color: white;
position: fixed;
top: 100%;
}
</style>
<script>
$(document).ready(function(){
$('.navbar').css('margin-top',$('.navbar').height() * -1);
});
</script>
How do I push a footer to the bottom of my page? Here is an example of what I currently have: hansmoolman.com
As you can see the footer is pushed underneath my 2 left and right containers. How can I fix this. I have used relative positioning for some elements as the red banner had to be pushed over the header bar and given a + z-index. I found some solutions online to stick the footer to the bottom but this does not solve my problem as the footer still appears aver my 2 columns if the content in them is not big enough to fill the whole page.
So what I want is for the footer to always follow BELOW all the rest of the content (the sticking to the bottom I can solve later).
There is a bit of CSS code so havent added it here, but can add it if needed
Your CSS Looks Like:
#footer {
background-color: #FFFEF0;
border: 1px solid #000000;
clear: both;
height: auto;
margin-top: -100px; /* >> Remove This*/
overflow: hidden;
position: relative;
top: -200px; /* >> Remove This*/
width: 100%;
z-index: -1;
}
Remove following css rules from #footer
top: -200px;
margin-top: -100px;
Try clear:both for your footer container tag, considering it has display:block; set
To align the contents right. You have to make some changes in your css.
First of all remove :
top: -200px;
width: 100%;
z-index: -1;
From your #footer .
And change your #mainContentContainer to :
#mainContentContainer
{
min-height: 400px;
overflow: auto;
position: relative;
width: 100%;
}