Engineers

Brands Menu

A list of brands that, when hovered over, provides users with a simple way to find branded products.

Wireframe

Coding Instructions

Step 1: Connect to your website via FTP

Follow our instructions in this article to request access and learn how to connect to your website via ftp.

Step 2: Open up Header template

Locate the header template.html. This can be found in /httpdocs/assets/themes/skeletal/templates/headers/template.html. If using a different template, go into that template instead of the 'skeletal' template.

Open the template in your text editor. We suggest either Visual Studio Code or Atom.

Step 3: Add the Brands Menu code into template

Add the following code block underneath the openning ul with the classes nav navbar-nav and save the template:

The [&percnt;list&percnt;] dynamically generates a menu based on the content type you define in the filter parameter. The following parameters are used in this [&percnt;list&percnt;]:

type : The content type you'd like to target for the menu.

filter: Filters the list to a specific content type.

sort : The sort order for the pages in the menu. To set which brands to display, give them a sortorder higher then the rest of the brands and they will display instead of the other brands. Sortorder is editable in the backend of the brand page in the cPanel.

limit : Sets a limit of items generated in the menu.

Inside the [&percnt;list&percnt;], there are three [&percnt;params&percnt;]: header, body, footer. The body param loops through every item that matches the parameters defined at the top of the [&percnt;list&percnt;] and gives the defined html markup:

The header and footer param wrap around the body param. The header param opens an overall <li> with a title of Brands and then the <ul class="dropdown-menu> heads the body param. The body loops through the brands, and then the footer param is closing the <li> and <ul>.

Now it will show a list of featured brands at the start of the main navigation in the header of every page:

Was this article useful?

Not usefulSomewhat usefulVery useful

How can we improve this page?Email addressBe notified when this page is updated. Optional.