Welcome Guest. Please Login or Register  


You are here: Index > SitePad Website Builder > General Support > Topic : Sticky Website Header



Threaded Mode | Print  

 Sticky Website Header, Sticky Website Header (3 Replies, Read 1677 times)
DJMastMix
Group: Member
Post Group: Newbie
Posts: 20
Status:
Hello again.  I have had some great answers in the forum when I need help. 

Im currently looking to be adding a Sticky Header to my website.  I do know I have to add this into the Custom CSS section under my header page. 

What would i be needing to enter into the sections under the Custom CSS section to make a sticky header occur.
Elements ID -

CSS Class -

Custom CSS -

Also my site is in development right now and almost done as a DEV site.  Do you need the link for the site to see or no. 

Any feedback is great.
IP: --   

Sticky Website Header
MicroDrie
Group: Member
Post Group: Working Member
Posts: 175
Status:
Well the short answer is an approach like:
  1. Google a sticky header to find one which you like and define the top of the sticky header at your current menu hight plus one pixel.
  2. At that moment you have your sticky menu with a sticky header and a new problem. The body of your web page is missing the top because you sticky header is over it.
  3. You can simply add an empty Rich Text widget as the first item to compensate that problem.
IP: --   

Sticky Website Header
DJMastMix
Group: Member
Post Group: Newbie
Posts: 20
Status:
Quote From : MicroDrie January 11, 2021, 9:41 am
Well the short answer is an approach like:
  1. Google a sticky header to find one which you like and define the top of the sticky header at your current menu hight plus one pixel.
  2. At that moment you have your sticky menu with a sticky header and a new problem. The body of your web page is missing the top because you sticky header is over it.
  3. You can simply add an empty Rich Text widget as the first item to compensate that problem.


Thank you for replying.  I know there are pros and cons about this.  Im wanting to but it on the site to see if I like it or not.  Better to try it out and then do it or not. 

I already have my header created, so why would I be needing to search google for the one I like.  I would like it to stay on the top of my site.  I am currently looking to find the coding I will need to but into my CSS to make this happen. 

Please explain how a rich text will compensate to make a sticky header. 

Thank you


IP: --   

Sticky Website Header
MicroDrie
Group: Member
Post Group: Working Member
Posts: 175
Status:
Well it is its own simple arithmetic addition:
Top-margin Menu + Menu Height + Bottom-margin = Body offset.
What you are going to do is hang your sticky header on the top of body as a overlay. Therefore, it is not included in building the web page space!

The following also applies to your sticky header:
Top-margin sticky header + sticky header height + bottom-margin sticky header = Sticky header space.
By default your "body" starts on the Body offset. Because of your sticky header, this should now be Body offset + Sticky header space.
Some of your body content will be lost behind the Sticky header space.

Now if you simply start with a Rich Text widget with only a few "empty" & nbsp; <br/> lines, the web page content will shift down so you don't lose the first few lines of your web page text only the empty content of de rich Text widget.

This approach will always work and ok you could search for each page which is the first HTML / CSS class and increase the top margin. Only this could lead somewere else to problems. Thats why a simple empte Rich Text widget is simple without a problem elsewere.

IP: --   

« Previous    Next »

Threaded Mode | Print  



Jump To :


Users viewing this topic
1 guests, 0 users.


All times are GMT. The time now is March 29, 2024, 8:45 am.

  Powered By AEF 1.0.8 © 2007-2008 Electron Inc.Queries: 11  |  Page Created In:0.020