Responsive Site Topnav

[AEM_Forum]

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.

[smacdonald2008]

Responsive is driven from the CSS/HTML markup that you can use at the component level. Some ppl use 3rd party technology like Bootstrap to drive this. We just did ask the Experts last month on this. It will be posted to out Ask the AEM Experts page soon:  https://helpx.adobe.com/experience-manager/topics/ate-sessions.html,

[Lokesh_Shivalingaiah]

Hi Rama,

  Here is what my understanding is

1. Top navigation is replaced by a button (list) in mobile viewport happens because of the below piece of code

               <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>

2. Responsiveness is a quality of everything in a page, So it will be both for Template and Component in AEM

3. Yes, If a template is made responsive all the pages created using that template will be responsive at the layout level, however you need to make all your components responsive aswell to render it properly.

Hope it helps !