Horizontal menu configuration
If you would like to have Horizontal Menu (or Topnav) based layout,
-
You can use Horizontal folder for horizontal layout and if you want to change layout from vertical to hoizontal then perform the below changes.
You need to update the below code in thetemplates/partials/base.html
To change Horizontal layout header, comment vertical block header & block sidebar as shown below.
{% comment %} {% block header %} {% include 'partials/header.html' %} {% endblock %} {% block sidebar %} {% include 'partials/sidebar.html' %} {% endblock %} {% endcomment %}
and un-comment block header as shown below.
<body data-layout="horizontal">
And intemplates/partials/base.html
{% block header %} {% include 'partials/hori-header.html' %} {% endblock %} {% block sidebar %} {% include 'partials/hori-sidebar.html' %} {% endblock %}
It will set horizontal layouts in all the pages.
In order to add, change or remove any ui elements from the topbar, simply edit in
file
templates/partials/hori-sidebar.html
The change would reflect in all the files automatically.
How to use pre-built layouts?
Each of the layout options is provided below with steps you would need to perform:
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 and Light Menubar.
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.