Docs

[Chgrim]

Hi,

I have setup my site to look like this. http://www.surpriseaholic.com/carnivorous-plant-diy-craft/

1. The issue I am having is how to stretch the nav bar area all the way across the top. As you can see I already moved the sidebar down.

2. Also on my home page http://www.surpriseaholic.com/ when I scroll down I can see the page through the nav bar when it shifts over to the right.

Thanks so much!
Chris

[Rad]

Hi there,

Thanks for posting in.

Please add this CSS to Admin > Appearance > Customizer > Custom > CSS

@media (min-width: 1200px){
body.x-content-sidebar-active .x-widgetbar, body.x-content-sidebar-active .x-navbar-fixed-top, body[class*="page-template-template-blank"].x-content-sidebar-active.x-blank-template-sidebar-active .x-widgetbar, body[class*="page-template-template-blank"].x-content-sidebar-active.x-blank-template-sidebar-active .x-navbar-fixed-top {
    right: 0;
}
.site {
padding-top: 118px;
}
.masthead {
position: absolute;
top:0;
width: 100%;
}
}

Hope this helps.

[Chgrim]

Hi!

1. Thanks for getting back so quickly. That seems to have done the trick for the sidebar! I don’t suppose there is code that I can freeze the sidebar from moving for 50 pix so it stays lined up with the header when it goes small as you scroll down the page? Right now it leaves a gap.

2. On my homepage it seems like the header bar still pops to the left when you scroll down. Are you still seeing this too?

Thanks again!
Chris

[Rad]

Hi there,

1. Please add this to Admin > Appearance > Customizer > Custom > Javascript

jQuery( function($) {

$(window).scroll( function() {

if ( $('.x-navbar').hasClass('x-navbar-fixed-top') ) {

$('.x-sidebar').css({ top : 47 });

} else {

$('.x-sidebar').css({ top : 118 });

}

} );

} );

2. It’s okay from my end.

Thanks!

[Chgrim]

This worked!

Thanks so much for everything!
Chris

[Prasant Rai]

You are most welcome. 🙂

[Author]

Posts