locked
How to make sidenav bar to toggle on mobile RRS feed

  • Question

  • User-218090889 posted

    I have the below HTML for sidenav in my site, it work well when viewed on a desktop browser but when viewed on mobile the sidenav is no where to be found.

    <div class="col-sm-3 sidenav hidden-xs">
          <h2>&nbsp;</h2>
          <ul class="nav nav-pills nav-stacked">
            <li class="active"><a href="#section1">Active Page</a></li>
            <li><a href="/Page1.aspx?">Page1</a></li>
            <li><a href="/Page2.aspx?">Page2</a></li>      
            <li><a href="/Page3.aspx?">Page3 </a></li>
            <li><a href="/Page4.aspx?">Page4</a></li>
          </ul><br>
        </div>

    How do I code it so that when it is viewed on mobile it will show a toggle nav bar.

    Thursday, April 25, 2019 3:12 PM

Answers

  • User-893317190 posted

    Hi Enzyme ,

    I find you are using bootstrap hidden-xs class, which means hidden in mobile.

    <div class="col-sm-3 sidenav hidden-xs">
          <h2>&nbsp;</h2>
          <ul class="nav nav-pills nav-stacked">
            <li class="active"><a href="#section1">Active Page</a></li>
            <li><a href="/Page1.aspx?">Page1</a></li>
            <li><a href="/Page2.aspx?">Page2</a></li>      
            <li><a href="/Page3.aspx?">Page3 </a></li>
            <li><a href="/Page4.aspx?">Page4</a></li>
          </ul><br>
        </div>

    If you want to show in mobile and hidden in desktop , you could use

     <div class="col-sm-3 sidenav hidden-lg">
          <h2>&nbsp;</h2>
          <ul class="nav nav-pills nav-stacked">
            <li class="active"><a href="#section1">Active Page</a></li>
            <li><a href="/Page1.aspx?">Page1</a></li>
            <li><a href="/Page2.aspx?">Page2</a></li>      
            <li><a href="/Page3.aspx?">Page3 </a></li>
            <li><a href="/Page4.aspx?">Page4</a></li>
          </ul><br>
        </div>

    Best regards,

    Ackerly Xu

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, April 29, 2019 1:56 AM

All replies

  • User-893317190 posted

    Hi Enzyme ,

    I have tried your code using chrome, but I couldn't reproduce your problem , could you provide more of your code to let use reproduce your problem?

    Maybe you could try viewport meta.

    https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag

    Best regards,

    Ackerly Xu

    Friday, April 26, 2019 6:01 AM
  • User-218090889 posted

    Maybe you could try viewport meta.

    viewport meta did not work for me

    for better understanding of my issue, I used asp.net template that has Site.Master and Site.Mobile.Master. with this the "About, Contact, Register and Login" links
    that is placed on the Navbar toggles when viewed on mobile. But I have sidenav that I placed inside the page that can only be accessed via Login, so what I want
    is for the sidenav to toggle when viewed on mobile.

    below is my master page HTML

    <!DOCTYPE html>
    
    <html lang="en">
    <head runat="server">
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title><%: Page.Title %> - Mysite</title>
    
        <asp:PlaceHolder runat="server">
            <%: Scripts.Render("~/bundles/modernizr") %>
        </asp:PlaceHolder>
        <webopt:bundlereference runat="server" path="~/Content/css" />
        <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    
    </head>
    <body>
        <form runat="server">
            <asp:ScriptManager runat="server">
                <Scripts>
                    <%--To learn more about bundling scripts in ScriptManager see http://go.microsoft.com/fwlink/?LinkID=301884 --%>
                    <%--Framework Scripts--%>
                    <asp:ScriptReference Name="MsAjaxBundle" />
                    <asp:ScriptReference Name="jquery" />
                    <asp:ScriptReference Name="bootstrap" />
                    <asp:ScriptReference Name="respond" />
                    <asp:ScriptReference Name="WebForms.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebForms.js" />
                    <asp:ScriptReference Name="WebUIValidation.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebUIValidation.js" />
                    <asp:ScriptReference Name="MenuStandards.js" Assembly="System.Web" Path="~/Scripts/WebForms/MenuStandards.js" />
                    <asp:ScriptReference Name="GridView.js" Assembly="System.Web" Path="~/Scripts/WebForms/GridView.js" />
                    <asp:ScriptReference Name="DetailsView.js" Assembly="System.Web" Path="~/Scripts/WebForms/DetailsView.js" />
                    <asp:ScriptReference Name="TreeView.js" Assembly="System.Web" Path="~/Scripts/WebForms/TreeView.js" />
                    <asp:ScriptReference Name="WebParts.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebParts.js" />
                    <asp:ScriptReference Name="Focus.js" Assembly="System.Web" Path="~/Scripts/WebForms/Focus.js" />
                    <asp:ScriptReference Name="WebFormsBundle" />
                    <%--Site Scripts--%>
                </Scripts>
            </asp:ScriptManager>
    
            
    
            <div class="navbar navbar-inverse navbar-fixed-top">
                <div class="container">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand" runat="server" href="~/">
                            <div class="img-circle">
                            <img src="/Controls/image.png" class="img-circle" alt="image"width="30" height="30">
                           </div>
                         
                        </a>
                    </div>
                    <div class="navbar-collapse collapse">
                        <ul class="nav navbar-nav">
                            <li><a runat="server" href="~/">Home</a></li>
                            <li><a runat="server" href="~/About">About</a></li>
                            <li><a runat="server" href="~/Contact">Contact</a></li>
                        </ul>
                        <asp:LoginView runat="server" ViewStateMode="Disabled">
                            <AnonymousTemplate>
                                <ul class="nav navbar-nav navbar-right">
                                    <li><a runat="server" href="~/Account/Register">Register</a></li>
                                    <li><a runat="server" href="~/Account/Login">Log in</a></li>
                                </ul>
                            </AnonymousTemplate>
                            <LoggedInTemplate>
                                <ul class="nav navbar-nav navbar-right">
                                    <li><a runat="server" href="~/Account/Manage" title="Manage your account">Hello, <%: Context.User.Identity.GetUserName()  %> !</a></li>
                                    <li>
                                        <asp:LoginStatus runat="server" LogoutAction="Redirect" LogoutText="Log off" LogoutPageUrl="~/" OnLoggingOut="Unnamed_LoggingOut" />
                                    </li>
                                </ul>
                            </LoggedInTemplate>
                        </asp:LoginView>
                    </div>
                </div>
            </div>
            <div class="container body-content">
                <asp:ContentPlaceHolder ID="MainContent" runat="server">
                </asp:ContentPlaceHolder>
                <hr />
                <footer>
                    <p class="text-center">&copy; <%: DateTime.Now.Year %> - Mysite.com</p>
                </footer>
            </div>
        </form>
    </body>
    </html>

    This is the sidenav of the inner page

    <div class="col-sm-3 sidenav hidden-xs">
          <h2>&nbsp;</h2>
          <ul class="nav nav-pills nav-stacked">
            <li class="active"><a href="#section1">Active Page</a></li>
            <li><a href="/Page1.aspx?">Page1</a></li>
            <li><a href="/Page2.aspx?">Page2</a></li>      
            <li><a href="/Page3.aspx?">Page3 </a></li>
            <li><a href="/Page4.aspx?">Page4</a></li>
          </ul><br>
        </div>

    So, how do I make the sidenav combine with that of master page on the Navbar when it toggles, or how the sidenav toggle on its own when viewed on mobile
     

    Saturday, April 27, 2019 9:59 AM
  • User-893317190 posted

    Hi Enzyme ,

    I find you are using bootstrap hidden-xs class, which means hidden in mobile.

    <div class="col-sm-3 sidenav hidden-xs">
          <h2>&nbsp;</h2>
          <ul class="nav nav-pills nav-stacked">
            <li class="active"><a href="#section1">Active Page</a></li>
            <li><a href="/Page1.aspx?">Page1</a></li>
            <li><a href="/Page2.aspx?">Page2</a></li>      
            <li><a href="/Page3.aspx?">Page3 </a></li>
            <li><a href="/Page4.aspx?">Page4</a></li>
          </ul><br>
        </div>

    If you want to show in mobile and hidden in desktop , you could use

     <div class="col-sm-3 sidenav hidden-lg">
          <h2>&nbsp;</h2>
          <ul class="nav nav-pills nav-stacked">
            <li class="active"><a href="#section1">Active Page</a></li>
            <li><a href="/Page1.aspx?">Page1</a></li>
            <li><a href="/Page2.aspx?">Page2</a></li>      
            <li><a href="/Page3.aspx?">Page3 </a></li>
            <li><a href="/Page4.aspx?">Page4</a></li>
          </ul><br>
        </div>

    Best regards,

    Ackerly Xu

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, April 29, 2019 1:56 AM