CODEWITHSUNDEEP
htmlcss
Olivia
Olivia

Reputation: 41

Creating A Fixed/Sticky Logo in CSS/HTML

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><a href="{{site.url}}">{{site.title}}</a></h1>
                {{/customize.images.logo.url}}
                {{#customize.images.logo.url}}
                <!--Logo Uploaded-->
                <h1><a href="{{site.url}}" title="Home"><img src="{{customize.images.logo.url}}" alt="{{site.title}}"></a></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!

Upvotes: 4

Views: 17732

Answers (5)

bwitkowicz
bwitkowicz

Reputation: 754

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.

Upvotes: 0

cari
cari

Reputation: 2300

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>

Upvotes: 0

Hareesh
Hareesh

Reputation: 6900

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.

Upvotes: 0

j6m8
j6m8

Reputation: 2409

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%;
}

Upvotes: 1

d4nyll
d4nyll

Reputation: 12647

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.

Upvotes: 0

Related Questions