Loaded
Dogart Template

HTML Structure

Help Center » Template Docs Dogart

Page Layout

Follows a simple coding structure that is easy to understand and implement. Make sure that you follow some of the Important Rules to avoid unexpected errors:

  • Always enclose all the content inside the #page-content div
  • Validate on https://validator.w3.org/ your HTML code for errors.
Code Example:

Header

This page section is always fixed on top and contain the logo, the navigation and the burger menu:

Code Example:

Logo Settings

The template supports dual logo options and will be displayed the version depend on your color scheme set on each page.

Code Example:

If you wish to use a retina logo, make sure that you use double the size of your standard logo image.

Navigation Types

The classic navigation menu type:

Options
Description
classic-menu

Set this class to header
data-breakpoint="1025"

Set this value to ul located inside the nav

The fullscreen navigation menu type:

Options
Description
fullscreen-menu

Set this class to header
invert-header

Set this class to header if you want to change the logo, menu burger and navigation color from dark to light
data-menucolor="#171717"

Set the background color for fullscreen menu and responsive menu
data-breakpoint="10025"

Set this value to ul located inside the nav

Navigation Structure

The navigation supports up to two page sub menus.

Code Example:

Menu Burger Types

This is dysplayed on your fullscreen navigation menu and also on the responsive navigation menu:

Options
Description
burger-lines

Set this class to display the three lines burger type
burger-dots

Set this class to display the three dots burger type

The burger menu is displayed on your fullscreen navigation menu and also on the responsive navigation menu.

Hero

This page section contains the page title and subtitle.

Code Example:

Hero Options. All this classes are applied to #hero-caption div

Options
Description
inline-title

Set this class to have title words displayed on one single row. All the title words need to be wrapped on a sigle span:
block-title

Set this class to have title words displayed on multiple rows. Each title words need to be wrapped on individual spans:
content-max-width

Set this class to have the caption maximum width up to 1280px
content-full-width

Set this class to have the caption width like the viewport
parallax-scroll-caption

This class will make your hero caption parallax on scroll
text-align-center

This class will align your hero caption on center

The Project Page Hero have different structure and is explained on the Template Portfolio section.

Main Content

This page section contain the Main Page Content and Next Page Navigation.

Code Example:

Main Page Content

On this page section contains you can build all the page content.

Code Example:

This section has the following option:

Options
Description
content-max-width

Set this class to have the content maximum width up to 1280px
content-full-width

Set this class to have the content width like the viewport

Next Page Navigation

The section is optional and can be removed if it's not necessary.

Code Example:

This section has the following options:

Options
Description
inline-title

Set this class to have title words displayed on one single row. All the title words need to be wrapped on a sigle span:
block-title

Set this class to have title words displayed on multiple rows. Each title words need to be wrapped on individual spans:
content-max-width

Set this class at to have the content maximum width up to 1280px
content-full-width

Set this class to have the content width like the viewport
data-firstline="Next"

First word displayed on the Mouse Circle Cursor hovering the next page title url
data-secondline="Page"

Second word displayed on the Mouse Circle Cursor hovering the next page title url

Footer

This page section contain the Back to Top Button, Copyright Link and Social Links.

Code Example:

Social Links

You can set acronyms or icons for your social links profile

Acronym Code Example:
Icon Code Example:

All the brands icons you can find them on Fontawesome

Didn't find what
you were looking for?


If there’s anything unclear or you have some concerns
open a ticket on our forum and we'll get back to you.

Submit a Ticket