Static top widgets

[lvvvvvl]

Hello,

I’m using a Genesis Child Theme for my blog called Swank. It has two widgets that work almost as a topbar where I’ve placed social icons and a facebook like button.

Currently the top widgets stay at the top and don’t scroll down with the user. I’d like to make it so that the widgets are always visible at the top, no matter what device the visitor is using.

I know this should be possible with css, but aren’t quite sure how. Messing around with the media queries I got it to work on my wide screen tv I use as a monitor with the code below, but I’d like it to work universally no matter what screen size.

@media only screen and (min-width: 1140px) {

    .top-bar {
        padding-top: 0;
        padding-bottom: 0;
    }

    .top-bar .wrap {
        position: fixed;
        z-index: 100;
        padding-top: 15px;
        padding-bottom: 10px;
        border-bottom: 1px solid #ddd;
        width: 100%;
        background: #fff;
    }

    .site-header {
        padding-top: 46px;
    }

}

[__]

…have you tried doing that without a media query?

[lvvvvvl]

I have, but when I visit from my phone it creates this strange extra padding on the top and bottom of the widgets doubling the size of the widget bar.

[__]

Could you make a test case on codepen?

[Author]

Posts