Adding A Pinned Header

wowography

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

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

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

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

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

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

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

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

wowography

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

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

Etienne

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

Great info!


Sent from my iPhone using Tapatalk