Horizontal menu configuration
You can change or customize the Topbar Menu Navigation very easily.
How to add new menu items/change menu items?
- In order to add, change or remove menu items from the
Topbar Menu navigation, simply edit in file
Views/Shared/horizontal.cshtml. The change would reflect in all the html files automatically. We are using gulp-file-include which would actually take care of including thehorizontal.htmlfile content in the all html pages.
How to change height?
-
In order to change the height of topbar menu,
open a file
assets/scss/_variables.scssand change the value of variable$header-height. The default value is set to70px.
How to use pre-built layouts?
Each of the layout options is provided below with steps you would need to perform:
Bordered Layout
Add data attribute in body elementdata-layout="horizontal" data-layout-mode="bordered" E.g.
<body >data-layout="horizontal" data-layout-mode="bordered"> to
have Bordered.
Topbar Dark
Keep your body element with data attributedata-topbar="dark" data-layout="horizontal" E.g. <body data-topbar="dark" data-layout="horizontal"> to have Dark topbar.
Boxed Layout
Keep your body element with data attributedata-layout-size="boxed" data-layout="horizontal" E.g. <body data-layout-size="boxed" data-layout="horizontal"> to have boxed layout.
Scrollable Layout
Keep your body element with data attributedata-layout="horizontal" data-layout-scrollable="true" E.g. <body data-layout-scrollable="true" data-layout="horizontal"> to have Scrollable Layout.