locked
MasterPage mobile menu not synching RRS feed

  • Question

  • User-1142442608 posted

    Hello,

    I'm using a masterpage to load different menus depending on which section of the website a user visits. ie if the user is logged in as a Contractor, they see a different menu/links than if logged in as a Supplier (which in this case oversees the Contractors). I have everything linked up and working, however when viewed on mobile the "hamburger" menu appears but remains blank and the user is unable to navigate the menu, regardless of status. What am I missing to load the proper links inside the collapsible mobile menu?

    <nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light fixed-top shadow">
    <!-- ** Supplier ** -->
            <div class="container-fluid p-2" id="tblNavMasterSuppliers" runat="server" visible="false">
                    <a class="navbar-brand" href="index.html"><img class="navbar-brand img-fluid" id="LogoSmall"
                        src="/images/Logos/Logo.png"></a>
                <a class="navbar-brand" href="index.html"><img class="navbar-brand img-fluid" id="Logo"
                        src="/images/Logos/Logo2.png"></a>
                    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"
                        data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false"
                        aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                <div class="collapse navbar-collapse" id="navbarResponsive">
    
                    <ul class="navbar-nav ml-auto">
                        <li class="nav-pills">
    
                            <a class="nav-link" href="/master_suppliers/main.aspx" target="_parent">Account
                                Overview</a>
                        </li>
                        <li class="nav-pills dropdown">
                            <a class="nav-link dropdown-toggle" href="/master_suppliers/edit_account.aspx"
                                target="_parent" id="navbarDropdownBlog" data-toggle="dropdown" aria-haspopup="true"
                                aria-expanded="false">
                                Account Settings
                            </a>
                            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownBlog">
                                <a class="dropdown-item" href="/master_suppliers/edit_account.aspx" target="_parent"
                                    id="A1" runat="server">Account Contact
                                    Information</a>
                            </div>
                        </li>
                        <li class="nav-pills dropdown" id="Li1" runat="server">
                            <a class="nav-link dropdown-toggle" href="/master_suppliers/search.aspx" target="_parent"
                                id="navbarDropdownBlog" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                Management
                            </a>
                            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownBlog">
                                <a class="dropdown-item" href="/master_suppliers/search.aspx"
                                    target="_parent">Search</a>
                                <a class="dropdown-item" href="/master_suppliers/reports_system.aspx" id="A5"
                                    runat="server">System Reports</a>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
    
            <!-- ** Contractor ** -->
            <div class="container-fluid p-2" id="tblNavContractor" runat="server" visible="false">
                    <a class="navbar-brand" href="index.html"><img class="navbar-brand img-fluid" id="LogoSmall"
                        src="/images/Logos/Logo.png"></a>
                <a class="navbar-brand" href="index.html"><img class="navbar-brand img-fluid" id="Logo"
                        src="/images/Logos/Logo2.png"></a>
                    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"
                        data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false"
                        aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                <div class="collapse navbar-collapse" id="navbarResponsive">
                    <ul class="navbar-nav ml-auto" >
                        <li class="nav-pills">
                            <a class="nav-link" href="/contractors/main.aspx" target="_parent">Account
                                Overview</a>
                        </li>
                        <li class="nav-pills">
                            <a class="nav-link" href="/contractors/edit_account.aspx" target="_parent">My
                                Account</a>
                        </li>
                        <li class="nav-pills">
                            <a class="nav-link" href="/contractors/EvaluationForm.pdf"
                            target="_parent" id="A4" runat="server">Download Evaluation Form</a>
                        </li>
                    </ul>
                </div>
            </div>
    </nav>

    Any help would be greatly appreciated!

    Friday, May 3, 2019 8:24 AM

All replies

  • User839733648 posted

    Hi jtcoldfan,

    According to your description and code, I'm sorry that I could not reproduce your issue successfully.

    When I run your code, the page is blank without anything.

    If possible, please provide more details about your requirement like detailed code with style settings.

    This will be easier for us to help you.

    Besides, I've checked that on your page, there are several duplicted ids such as navbarDropdownBlog, it is not correct to do so.

    Perhaps this is the reason.

    Best Regards,

    Jenifer

    Monday, May 6, 2019 3:02 AM
  • User61956409 posted

    Hi jtcoldfan,

    <!-- ** Supplier ** -->
            <div class="container-fluid p-2" id="tblNavMasterSuppliers" runat="server" visible="false">

    <!-- ** Contractor ** -->
            <div class="container-fluid p-2" id="tblNavContractor" runat="server" visible="false">

    According to your description and code, it seems that your application would dynamically show different menus based on logged-in user's role by setting visible property of menu container (div element). 

    If the menu does not display well for mobile client user, please make sure your application can get correct user's role information and can set visible property for the corresponding menu container well. 

    Besides, please make sure the CSS styles you are using are supported well on mobile browser. 

    With Regards,

    Fei Han

    Tuesday, May 7, 2019 2:41 AM