Sticky topbar and responsive

Support
#1

Hello,

I’m using X Theme 5.2.5 and i’m looking for a sticky topbar and responsive.

Atm i’m using this css for top bar :

> /* Hide social icons (optional) */
> .x-topbar .x-social-global {
> display: none;
> }
> ul.x-ul-icons {
>     color: #ffffff;
> }

> .x-colophon.bottom {
> 	padding: 5px 0;
> }

> /* Change the topbar font size */
> .x-topbar .p-info, .x-topbar .p-info a{
>   font-size:17px!important;
> }
> /* fixed topbar */
> .x-topbar {
>     position: fixed;
>     top: 0;
>     width: 100%;
>     background-color: #F0F0F0;
> }

But there is a problem as you can see on : http://8dbec2df04.url-de-test.ws/

It’s not responsive, it overpass the logo and not center.

Can you help me ?

Thanks

#2

Hi there,

Thanks for writing in.

You’ve to remove “position:fixed” from the class “x-topbar” and add “position: fixed” to “masthead masthead-stacked” class.

Hope that’ll work.

Thanks.

#3

Nope it’s not working :

/* Hide social icons (optional) */
.x-topbar .x-social-global {
display: none;
}
ul.x-ul-icons {
color: #ffffff;
}

.x-colophon.bottom {
padding: 5px 0;
}

/* Change the topbar font size /
.x-topbar .p-info, .x-topbar .p-info a{
font-size:17px!important;
}
/ fixed topbar */
.x-topbar {
top: 0;
width: 100%;
background-color: #F0F0F0;
}

.masthead.masthead-stacked {
position:fixed
}

#4

Hi there,

Please try this instead, add this in the custom JS:

$(function(){
    $(window).scroll(function() {
        var scroll = $(window).scrollTop(); // how many pixels you've scrolled
        var os = $('.masthead').offset().top; // pixels to the top of the header
        var ht = $('.masthead').height(); // height of the header in pixels
        // if you've scrolled further than the top of header plus it's height
        // add the CSS to set the header as fixed.
	if( scroll == 0 ) {
	    $('.masthead').removeClass('fixed');
	}

        if(scroll > os + ht) {
            $('.masthead').addClass('fixed');
        }
    });
});

Then add this code in the custom CSS:

.fixed {
    position: fixed;
    z-index: 999;
}

And kindly remove this custom CSS:

.masthead.masthead-stacked {
    position: fixed;
}

Hope this helps.

#5

Hello, yep it helps but now the header is also fixed, i just need the topbar.

thanks

#6

Hi there,

Please update the JS code to:

(function($){

    $(window).scroll(function() {
        var scroll = $(window).scrollTop(); // how many pixels you've scrolled
        var os = $('.x-topbar').offset().top; // pixels to the top of the header
        var ht = $('.x-topbar').height(); // height of the header in pixels
        // if you've scrolled further than the top of header plus it's height
        // add the CSS to set the header as fixed.
        if( scroll == 0 ) {
            $('.x-topbar').removeClass('fixed');
        }

        if(scroll > os + ht) {
            $('.x-topbar').addClass('fixed');
        }
    });

})(jQuery);

Then the custom CSS to:

.fixed {
    position: fixed;
    z-index: 999;
    width: 100%;
}
#7

Ok i’ve doen this but there is a problem, look :

#8

Hi There,

Please change:

.fixed {
    position: fixed;
    z-index: 999;
    width: 100%;
}

to :

.fixed {
    position: fixed;
    z-index: 999;
}

And add:

.x-topbar {
width: auto;
}

Hope it helps

#9

It’s works ! Thank a lot all :slight_smile:

#10

You’re welcome :slight_smile:

#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.