Make logo, social media and search position "sticky"

Hi,

Look here, test.madonna.nl.
When you scroll down only the menu stays on top and visible.
The logo, social media and search position "disappear".

I want those positions to be in view, just like the menu, when you scroll down.

is that possible?

Kind regards, GertJan

Hi,
start from this

Code: Select all

#gkTop {
    background:  white;
    height: 80px;
    position: fixed;
    width: 100%;
    z-index: 999;
}
#gkPageContentWrap {
    margin-top: 80px;
}




Thanks, it works. I changed 80px to 100px.. and now it looks good!

Yes, sure. I used 80px because I wanted to reduce height of this element as much a possible

About mobile view, probably you have to override it when screen size would be smaller than....

Yes, sure. I used 80px because I wanted to reduce height of this element as much a possible

About mobile view, probably you have to override it when screen size would be smaller than....

Yes on mobile I want it to scroll and not be sticky at the top... but don't know how to do that. Can you help me?

No problem. For example mix new with old code:

Code: Select all

@media only screen  and (min-width : 1224px) {
HERE
}

More info: http://css-tricks.com/snippets/css/medi ... d-devices/

No problem. For example mix new with old code:

Code: Select all

@media only screen  and (min-width : 1224px) {
HERE
}

More info: http://css-tricks.com/snippets/css/medi ... d-devices/

Is this the mixed up code you are talking about:

Code: Select all

@media only screen and (min-width : 1224px) {
#gkTop {
        background:  white;
        height: 100px;
        position: fixed;
        width: 100%;
        z-index: 999;
    }
    #gkPageContentWrap {
        margin-top: 100px;
    }
}

So you're now great DJ.

Of course you can change value from 1224 to 1024 - if on tablets it can be shown also. Just test.

Mmm... it is not working OK.
It is OK on the cumputer... the logo etc stays sticky.
But it also stays sticky on my iphone...

maybe try to use: min-device-width

and under last "}" add this one:

Code: Select all

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {

#gkTop {position: relative;z-index: 0;}

}

Apple devices always works different.

This is the code I included.. but it doesn't work..

Code: Select all

@media only screen and (min-device-width: 1224px) {
#gkTop {
        background:  white;
        height: 100px;
        position: fixed;
        width: 100%;
        z-index: 999;
    }
    #gkPageContentWrap {
        margin-top: 100px;
    }
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {

#gkTop {position: relative;z-index: 0;}

}


Something wrong in the code?

sorry, I gave up. No idea except maybe this : http://extensions.joomla.org/extensions ... ting/11173