{"id":108,"date":"2018-10-04T14:18:23","date_gmt":"2018-10-04T14:18:23","guid":{"rendered":"https:\/\/documentation.px-lab.com\/certy-html\/?p=108"},"modified":"2018-10-04T14:31:51","modified_gmt":"2018-10-04T14:31:51","slug":"main-navigation","status":"publish","type":"post","link":"https:\/\/documentation.px-lab.com\/certy-html\/main-navigation\/","title":{"rendered":"Main Navigation"},"content":{"rendered":"

Menu HTML markup without sub menus:<\/p>\n

<nav id=\"crt-main-nav\">\r\n    <ul class=\"clear-list\">\r\n        <li><a href=\"[url]\">item<\/a><\/li>\r\n        <li><a href=\"[url]\">item<\/a><\/li>\r\n        <li><a href=\"[url]\">item<\/a><\/li>\r\n        <li><a href=\"[url]\">item<\/a><\/li>\r\n        ...\r\n    <\/ul>\r\n<\/nav>\r\n\r\n[url] - the address of a web page<\/pre>\n
Menu HTML markup with sub menus:<\/p>\n
<nav id=\"crt-main-nav\">\r\n    <ul class=\"clear-list\">\r\n        <li><a href=\"[url]\">item level 1<\/a><\/li>\r\n        <li><a href=\"[url]\">item level 1<\/a><\/li>\r\n        <li class=\"has-sub-menu\">\r\n            <a href=\"[url]\">item level 1<\/a>\r\n            <ul class=\"sub-menu\">\r\n                <li><a href=\"[url]\">item level 2<\/a><\/li>\r\n                <li><a href=\"[url]\">item level 2<\/a><\/li>\r\n                <li>\r\n                    <a href=\"[url]\">nav item level 2<\/a>\r\n                    <ul class=\"sub-menu\">\r\n                        <li><a href=\"[url]\">item level 3<\/a><\/li>\r\n                        <li><a href=\"[url]\">item level 3<\/a><\/li>\r\n                    <\/ul>\r\n                <\/li>\r\n            <\/ul>\r\n        <\/li>\r\n        ...\r\n    <\/ul>\r\n<\/nav><\/pre>\n
NOTE:<\/b> There are two separate markups in the html page for the main
\nnavigation – desktop<\/b> ( visible on large devices ) & mobile<\/b> ( visible on small devices ).
\nMake sure to customize both of them, they differs only with the container <nav> tag ( see the code
\nexample below ), so you can make changes for example only for the desktop version and copy html markup for mobile.<\/em><\/p>\n
<!-- Desktop Navigation -->\r\n<nav id=\"crt-main-nav\">\r\n    <ul class=\"clear-list\">\r\n        <li><a href=\"item1.html\">item1<\/a><\/li>\r\n        ...\r\n    <\/ul>\r\n<\/nav>\r\n\r\n<!-- Mobile Navigation -->\r\n<nav id=\"crt-main-nav-sm\" class=\"visible-sm text-center\">\r\n    <ul class=\"clear-list\">\r\n        <li><a href=\"item1.html\">item1<\/a><\/li>\r\n        ...\r\n    <\/ul>\r\n<\/nav><\/pre>\n
 <\/p>\n
Main Navigation Alignment<\/h4>\n
Fined #crt-head-col2 div inside theme header and add text-left<\/code> ( for left alignment ),
\ntext-right<\/code> ( for right alignment ) or text-center<\/code> ( for center alignment ).<\/p>\n
<div id=\"crt-head-col2\" class=\"crt-head-col text-left\"> ... <div><\/pre>\n","protected":false},"excerpt":{"rendered":"
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”> […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/documentation.px-lab.com\/certy-html\/wp-json\/wp\/v2\/posts\/108"}],"collection":[{"href":"https:\/\/documentation.px-lab.com\/certy-html\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/documentation.px-lab.com\/certy-html\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/documentation.px-lab.com\/certy-html\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/documentation.px-lab.com\/certy-html\/wp-json\/wp\/v2\/comments?post=108"}],"version-history":[{"count":2,"href":"https:\/\/documentation.px-lab.com\/certy-html\/wp-json\/wp\/v2\/posts\/108\/revisions"}],"predecessor-version":[{"id":111,"href":"https:\/\/documentation.px-lab.com\/certy-html\/wp-json\/wp\/v2\/posts\/108\/revisions\/111"}],"wp:attachment":[{"href":"https:\/\/documentation.px-lab.com\/certy-html\/wp-json\/wp\/v2\/media?parent=108"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/documentation.px-lab.com\/certy-html\/wp-json\/wp\/v2\/categories?post=108"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/documentation.px-lab.com\/certy-html\/wp-json\/wp\/v2\/tags?post=108"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}