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 src/partials/horizontal.html. The change would reflect in all the html files automatically. We are using gulp-file-include which would actually take care of including the horizontal.html file content in the all html pages.
How to change height?
In order to change the height of topbar menu, open a file src/assets/scss/_variables.scss and change the value of variable $header-height. The default value is set to 70px.

How to use pre-built layouts?

Each of the layout options is provided below with steps you would need to perform:

image
Bordered Layout
Add data attribute in body element data-layout="horizontal" data-layout-mode="bordered" E.g. <body >data-layout="horizontal" data-layout-mode="bordered"> to have Bordered.
image
Topbar Dark
Keep your body element with data attribute
data-topbar="dark" data-layout="horizontal" E.g. <body data-topbar="dark" data-layout="horizontal"> to have Dark topbar.
image
Boxed Layout
Keep your body element with data attribute data-layout-size="boxed" data-layout="horizontal" E.g. <body data-layout-size="boxed" data-layout="horizontal"> to have boxed layout.
image
Scrollable Layout
Keep your body element with data attribute data-layout="horizontal" data-layout-scrollable="true" E.g. <body data-layout-scrollable="true" data-layout="horizontal"> to have Scrollable Layout.
© Themesdesign.
Crafted with by Themesdesign