Main Navigation

Updated on

Menu HTML markup without sub menus:

<nav id="crt-main-nav">
    <ul class="clear-list">
        <li><a href="[url]">item</a></li>
        <li><a href="[url]">item</a></li>
        <li><a href="[url]">item</a></li>
        <li><a href="[url]">item</a></li>
        ...
    </ul>
</nav>

[url] - the address of a web page

Menu HTML markup with sub menus:

<nav id="crt-main-nav">
    <ul class="clear-list">
        <li><a href="[url]">item level 1</a></li>
        <li><a href="[url]">item level 1</a></li>
        <li class="has-sub-menu">
            <a href="[url]">item level 1</a>
            <ul class="sub-menu">
                <li><a href="[url]">item level 2</a></li>
                <li><a href="[url]">item level 2</a></li>
                <li>
                    <a href="[url]">nav item level 2</a>
                    <ul class="sub-menu">
                        <li><a href="[url]">item level 3</a></li>
                        <li><a href="[url]">item level 3</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        ...
    </ul>
</nav>

NOTE: There are two separate markups in the html page for the main
navigation – desktop ( visible on large devices ) & mobile ( visible on small devices ).
Make sure to customize both of them, they differs only with the container <nav> tag ( see the code
example below ), so you can make changes for example only for the desktop version and copy html markup for mobile.

<!-- Desktop Navigation -->
<nav id="crt-main-nav">
    <ul class="clear-list">
        <li><a href="item1.html">item1</a></li>
        ...
    </ul>
</nav>

<!-- Mobile Navigation -->
<nav id="crt-main-nav-sm" class="visible-sm text-center">
    <ul class="clear-list">
        <li><a href="item1.html">item1</a></li>
        ...
    </ul>
</nav>

 

Main Navigation Alignment

Fined #crt-head-col2 div inside theme header and add text-left ( for left alignment ),
text-right ( for right alignment ) or text-center ( for center alignment ).

<div id="crt-head-col2" class="crt-head-col text-left"> ... <div>