Hi all,
My question is regarding making a Site Topnav Responsive.
Please find the code without Responsiveness and with Responsiveness below:
Without Responsive:
<!-- /* Basic mock up code */ -->
<nav class="navbar navbar-inverse navbar-absolute-top">
<ul class="nav navbar-nav navbar-center">
<li class="nav navbar-nav navbar-left" data-sly-repeat="${currentPage.listChildren}">
<a href="${item.path}.html">${item.title}</a>
</li>
</ul>
</nav>
Responsive:
<!-- /* Add the full responsive design */ -->
<div class="container we-Container--top-navbar">
<nav class="navbar navbar-inverse navbar-absolute-top">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#we-example-navbar-collapse-inverse" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
</button>
<button type="button" class="navbar-toggle navbar-toggle-close collapsed" data-toggle="collapse" data-target="#we-example-navbar-collapse-inverse" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
</button>
<a class="navbar-brand" href="#">we.<strong>train</strong></a>
<div class="pull-right visible-xs"></div>
</div>
<!-- /.navbar-header -->
<div class="collapse navbar-collapse width" id="we-example-navbar-collapse-inverse">
<ul class="nav navbar-nav navbar-center">
<li class="visible-xs"><a href="#">we.<strong class="text-primary">train</strong></a></li>
<!-- /* Basic mock up code */ -->
<li class="nav navbar-nav navbar-left" data-sly-repeat="${currentPage.listChildren}">
<a href="${item.path}.html">${item.title}</a>
</li>
<li class="visible-xs divider" role="separator"></li>
</ul>
</div>
<span style="height: 0px;" class="navbar-shutter"></span>
</nav>
<!-- /.navbar -->
</div>
With Responsivess, when the window is resized smaller, the top navigation changes to a List.
1. Could someone kindly explain how this is achieved with the above code?
2. Is Responsiveness a quality of a Component or Template or a Page? The above case is for a Component.
3. If we make a Template Responsive, will all the pages created out of it be Responsive?
Appreciate all your responses.
Thanks,
Rama.