What are fixed position headers?
A common navigation paradigm now a days, thanks to Bootstrap, is “fixed navigation headers”. In this paradigm the navigation elements of the website are in a fixed position generally fixed to the top of the browser screen. See below for an illustration –
See the header above and the content starts after that. And when you scroll to see more content
The content scrolls but header stays where it is.
Why is it a problem in Sitefinity’s context?
Now this presents a tricky problem when dealing with templates in Sitefinity. If I were use this template as is, this is what I will be seeing
As you can see the header is preceding Sitefinity action bar which generally has Publish, Preview and Delete buttons. And is also overriding the toolbox on the right hand side. This will present huge challenges to your content editors who want to drag and drop some widgets on to the page and just publish the page.
So to avoid this scenario from happening we have to make the header position be relative when you are editing a page in Sitefinity. Keep in mind we don’t want to change the header position to be relative on the frontend (actual website) we just want to make header relative in the backend. And the way to do it is to build a custom widget which adds a new class to the body tag which we can use to mark our header as relative.
The custom widget is really simple as below
public class RelativeHeaderWidget : CompositeControl
protected override void CreateChildControls()
Page.ClientScript.RegisterClientScriptBlock(typeof (Page), “makeheaderrelative”,
And we will create a new style to honor the class added via our custom widget. (make sure the stylesheet file this style is in, is the last stylesheet called from your master page).
position: relative !important;
Now all you have to do is register this widget (see below) and drop the widget on to your master page.
<add enabled=“True” type=“SitefinityWebApp.Widgets.RelativeHeaderWidget” title=“Relative Header Widget“
Your master page will look like below after you drop this widget –
As you can see the header is now pushed down in the master page due to relative positioning keep in mind this behavior is only applied when in edit mode.
Latest posts by Falafel Posts (see all)
- Matching Complex Query String Rewrite Rule in IIS - March 22, 2017
- Using Google Services in UWP C# Apps – Part 2 - February 7, 2017
- Using Google Services in UWP C# Apps – Part 1 - February 6, 2017
- Redis Caching in the Google Cloud Platform - February 3, 2017
- Entity Framework with Google Cloud SQL - February 2, 2017