Background

The WebDrawer HTML is structured in a way that allows you to re-organise the page simply by applying some CSS.  In a previous post I looked at the custom_head.cshtml file which allows you to inject code into the head of the WebDrawer HTML pages.  In this post I demonstrate a technique to display the WebDrawer menu at the top of each page, rather than at the left.

Show me

The code

This is the code used in the video above

custom_head.cshtml

<link href="~/css/hide_menu.css" media="(min-width: 480px)" type="text/css" rel="stylesheet" />
<link href="~/css/top_menu.css" media="(min-width: 480px)" type="text/css" rel="stylesheet" />

top_menu.css

#quick-search-forms > form:first-child +  hr,
#quick-search-forms > form:first-child +  hr + form,
ul.left-menu > li:first-child + li,
ul.left-menu > li:first-child +  li + li 
{
    display:none;
}

#leftcolumn {
    height:36px;
}

#quick-search-forms {
    float:right;
    display:inline;
    margin:0 10px 0 0;
    padding:2px;
}

#leftcolumn > ul.left-menu {
    float:right;
    margin-top:4px;
}

#quick-search-forms > form > button {
    padding:2px 0 2px 0;
    width:120px;
}

#quick-search-forms > form > input {
    padding:2px 0 2px 23px;
    width: 170px;
}

#quick-search-forms > form:first-child {
    margin:0;
    padding-top:4px;
}