Pinning whole header on Sierra design theme

Etienne

Hi,

I use a Sierra Design, and the header contains logo (block) + a menu (navbar).

The problem is when I choose the pinning section header in customize , only the menu navbar is pinning, not the whole header (logo/title + navbar).

Do you know if a css code can fix this ?

rainforest1155

Can you post a link to your site so we could take a look at it?

rainforest1155

Looking at your site, I'm not seeing any pinning enabled in the entire site section > layout tab. Furthermore, looking through your pages, I'm not seeing any pages that really require any scrolling.

Since I'm not available at all times, could you post the link to the specific page you're seeing the issue for on this thread (instead of sending me a PM)? That way, others may also assist you with further questions.

If you don't want to post the link to your site on the forum, you may contact the HelpDesk directly for assistance instead.

Etienne

in fact, it was for a futur page with scrolling, the page was in test.
I understand for the link page.

After retry the test, it was my mistake : Whole the header is well pinned. I didn't see the logo/title in cusomize mode , it was hidden by cutomize banner. So it runs.

However, I have a second question :

Is-it possible to pinn the header and the footer at the same time ? with CSS code

Hikin' Mike

Etienne wrote: »

However, I have a second question :

Is-it possible to pinn the header and the footer at the same time ? with CSS code

Pin your Header, then add this to pin your Footer...

/**
* Footer
************************************************/
.sm-user-ui .sm-page-layout-region-footer {
	position: fixed;
	width: 100%;
	bottom: 0px;
	}

Etienne

Greats, thanks for the code.

To continue, I try the same code for the header, it can be useful if we want the header pinned on a spcecific page.

.sm-user-ui .sm-page-layout-region-header {
position: fixed;
width: 100%;
}

But the result is not the same of the SM option : the page content scroll over the header and not under.

If you know the reason or a solution ....

photoclick

... add z-index property to your code above and the page content will scroll under the header.

Hikin' Mike

Etienne wrote: »

Greats, thanks for the code.

To continue, I try the same code for the header, it can be useful if we want the header pinned on a spcecific page.

.sm-user-ui .sm-page-layout-region-header {
position: fixed;
width: 100%;
}

But the result is not the same of the SM option : the page content scroll over the header and not under.

If you know the reason or a solution ....

photoclick wrote: »

... add z-index property to your code above and the page content will scroll under the header.

I created a test page and I had this last night, but I couldn't edit the page because of the 'z-index'. It was late, so I came up with the code I posted above. I'll see if I can come up with a solution, now that I'm rested.

/**
* Pins Header and Footer
************************************************/
.sm-user-ui .sm-page-layout-region-header,
.sm-user-ui .sm-page-layout-region-footer {
    position: fixed;
    width: 100%;
    z-index: 10;
    }
    
.sm-user-ui .sm-page-layout-region-header {
    top: 0;
    }    
    
.sm-user-ui .sm-page-layout-region-footer {
    bottom: 0;
    }

Hikin' Mike

UPDATE:

Try this. Add this to your site's CSS or a selected page:

/**
* Pins the Header and Footer
************************************************/    
.sm-user-ui .sm-page-header, 
.sm-page-header.sm-user-ui, 
.sm-user-ui .sm-cart-header,
.sm-user-ui .sm-page-layout-region-header,
.sm-user-ui .sm-page-layout-region-footer {
    position: fixed;
    width: 100%;
    }
    
.sm-user-ui .sm-page-header, 
.sm-page-header.sm-user-ui, 
.sm-user-ui .sm-cart-header {
    z-index: 100;
    }    
    
.sm-user-ui .sm-page-layout-region-header,
.sm-user-ui .sm-page-layout-region-footer {
    z-index: 10;
    }    
    
.sm-user-ui .sm-page-layout-region-body {
    padding-top: 175px; /* Adjust this for your logo/nav */
    }

.sm-user-ui .sm-page-layout-region-footer {
    bottom: 0px;
    }

You can view it live here. It may be hard to see because my theme doesn't work well with pinning, but thought I'd post an example.

Etienne

Yes, it's great. I don't understand all the CSS code (object) but it runs well. Thanks for seeking
Now, it can be usefull to customize each page !

I tried to change margin of the header but don't work as I wish . Is it possible to change the margin top and bottom of the header ?
I tried this :

.sm-page-widget-nav{
margin-bottom: 0px;
margin-top: 0px;
background: rgba(224,138,21,0.50);
}
.sm-page-widget-logo{
margin-bottom: 0px;
margin-top: 0px;
background: rgba(224,138,21,0.50);
}

As you see on the picture, there is a gap between the logo and the menu i wish to reduce.


If i use the the .sm-page-layout-region-header or the .sm-page-layout-region-top

.sm-page-layout-region-header{
margin-bottom: 0px;
margin-top: 0px;
background: rgba(224,138,21,0.50);
}

the result is not good :




So the question is to know if it's possible to choose the number of pixel (even 0px) à the bottom of the colored header, at the top, and between the logo and the menu ?

A new chalenge

But it's already great !

Hikin' Mike

I'm not seeing any pictures here.

Can you post your site/page(s)?

Hikin' Mike

I received your PM and I'll respond there too.

Etienne

Thanks, it's good now.

I ask a last question on PM with the link

It's about the code :

.sm-user-ui .sm-page-layout-region-body {
padding-top: 50px !important; /* Adjust this for your logo/nav */
}
I understand, and it's work

but when I come on the page with an anchor -->

URL#A0

Here the anchor is #A0 , so the Anchor A0 is behind the navbar (at the top) when the page display

So here the padding-top: 50px does not work when we come on the page with #A0. It works without Anchor.

If you have an idea