Don’t let those fixed position headers bother you

By February 25, 2014Sitefinity, Web

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 –

Fixed_At_Top

See the header above and the content starts after that. And when you scroll to see more content

Fixed_At_Top_After

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

Header_Stuck_Above_Sitefinity

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.

The solution

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

using System.Web.UI;
using System.Web.UI.WebControls; 

namespace SitefinityWebApp.Widgets
{
public class RelativeHeaderWidget : CompositeControl
{
protected override void CreateChildControls()
{
if (this.IsDesignMode())
{
Page.ClientScript.RegisterClientScriptBlock(
typeof (Page), “makeheaderrelative”,
“$(‘body’).addClass(‘editMode’);”, true);
}
}
}
}

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).

.editMode .navbar-fixed-top {
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=Truetitle=Customdescription=Customordinal=0name=Custom>
<
tools>
<
add enabled=Truetype=SitefinityWebApp.Widgets.RelativeHeaderWidgettitle=Relative Header Widget
visibilityMode=Nonename=RelativeHeaderWidget/>
</
tools>
</
add>

Your master page will look like below after  you drop this widget –

Header_Pushed_Down

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.

Enjoy!

The following two tabs change content below.