Adding A Pinned Header

wowography · December 14, 2015

I'd like to know if there is a CSS/HTML way to add a pinned like header. I've attached a screenshot of the idea. My Site as it is now has the LEFT sidebar pinned. The header would serve as a design element and allows the option of adding a text tagline for my site across the top. Thank you!

http://www.wowography.com/

photoclick · December 14, 2015

Two questions:
>do you want it on all the pages or only the home page?
>"across the top" - from left to right edge of the page OR from where the left side bar ends to right edge of the page?

wowography · December 14, 2015

Michael,
Thanks for looking at this. Ideally, across the top on all pages and from where the sidebar ends.
Either way would be great addition to some SM templates. I think this could be a popular item.

Allen · December 14, 2015

On any page on your site go to customize > content and design.
Highlight "entire site" at top of right flyout.
Drag an HTML box/widget to the header area.

wowography · December 14, 2015

Allen wrote: »

On any page on your site go to customize > content and design.
Highlight "entire site" at top of right flyout.
Drag an HTML box/widget to the header area.

Thank you..I was looking for recommendations on how to do it or CSS/HTML coding to create the fixed header.

AceCo55 · December 15, 2015

wowography wrote: »

Thank you..I was looking for recommendations on how to do it or CSS/HTML coding to create the fixed header.

Actually Allen did give you the steps to achieve what you wanted, but being new I suspect that you didn't know exactly what he meant.
He is the longer version of what he said!

1. Login to your website

2. click on "Customise" and then "Content & Design"

3 choose "entire site" and make sure the "content" tab is active

4. Scroll down to the "Add Content Block" section and continue to scroll until you can see "html & css"

5. Click on the "+" to the right of "html & css" to expand the options

6 Click and drag the HTML name/link onto your main page and up to the top of the page (because that is where you want your header to appear.
Wait until you see a green line appear at the top of the HTML block and for it to appear at the yop of the page.
Release the mouse button - you now have a HTML content box at the top of every page on your website

7 Now enter the content that you want to appear in that HTML content block

You may need to get some specific code to alter the appearance of your text their (eg size, colour)
You may also need to adjust the spacing, size etc of the content block to suit your taste.

Best of luck.

wowography · December 15, 2015

AceCo55 wrote: »

Actually Allen did give you the steps to achieve what you wanted, but being new I suspect that you didn't know exactly what he meant.
He is the longer version of what he said!

1. Login to your website

2. click on "Customise" and then "Content & Design"

3 choose "entire site" and make sure the "content" tab is active

4. Scroll down to the "Add Content Block" section and continue to scroll until you can see "html & css"

5. Click on the "+" to the right of "html & css" to expand the options

6 Click and drag the HTML name/link onto your main page and up to the top of the page (because that is where you want your header to appear.
Wait until you see a green line appear at the top of the HTML block and for it to appear at the yop of the page.
Release the mouse button - you now have a HTML content box at the top of every page on your website

7 Now enter the content that you want to appear in that HTML content block

You may need to get some specific code to alter the appearance of your text their (eg size, colour)
You may also need to adjust the spacing, size etc of the content block to suit your taste.

Best of luck.

Wow..Thanks for the high level of clarity & detail in your tutorial, Much appreciated! I made the changes, I find that the header is not fixed or pinned, it scrolls away. I don't know if it's it's possible for CSS/HTML to fix the header in place at the top of the browser window when scrolling?

Allen · December 15, 2015

Highlight "Entire Site" then check Layout tab in right flyout and see if it's pinned.

wowography · December 15, 2015

I checked layout, the Left sidebar is pinned already (that's my navigation). It seems as though it's not possible to have a fixed header along with a pinned (fixed) sidebar without some special CSS

photoclick · December 15, 2015

Yes - it will require some (css) programming to implement what you want.

Etienne · December 16, 2015

Hi,

I post a equivalent question here : http://www.dgrin.com/showthread.php?t=255893

you will find any ideas, posted by Hikin' Mike

Example of code : you can remove the footer.....

/**
* 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;
}

agallia · December 16, 2015

Great info!

Sent from my iPhone using Tapatalk

Adding A Pinned Header

Comments