ASP.NET Expandable Navigation Bar

I'm struggling to create a collapsible navigation bar for my website that works well on mobile devices.

Here's the code for my navigation bar:

<div style="padding-bottom: 50px;">
        <header id="main-header">
            <div class="container">
                <a href="@Url.Action("Index", "Home")">

                    <img src="~/ToDo_logo1.png" id="logo" alt="logo" style="width:140px; height:50px;" />
                </a>
                <nav class="main-nav" role="navigation">
                    <ul>
                        @if (User.IsInRole("Admin"))
                        {

                            <li class="@(ViewBag.Linktext == "Venues" ? "current" : "")">@Html.ActionLink("Venues", "Index", "Venues")</li>
                            <li class="@(ViewBag.Linktext == "Events" ? "current" : "")">@Html.ActionLink("Events", "Index", "Events")</li>
                            <li class="@(ViewBag.Linktext == "Bands" ? "current" : "")">@Html.ActionLink("Bands", "Index", "Bands")</li>
                            <li class="@(ViewBag.Linktext == "Admin" ? "current" : "")">@Html.ActionLink("Admin", "Admin", "Home")</li>

                            @Html.Partial("_LoginPartial")
                        }

                        else
                        {
                            <li class="@(ViewBag.Linktext == "Venues" ? "current" : "")">@Html.ActionLink("Venues", "Index", "Venues")</li>
                            <li class="@(ViewBag.Linktext == "Events" ? "current" : "")">@Html.ActionLink("Events", "Index", "Events")</li>
                            <li class="@(ViewBag.Linktext == "Bands" ? "current" : "")">@Html.ActionLink("Bands", "Index", "Bands")</li>

                            <li>@Html.Partial("_LoginPartial")</li>
                        }
                    </ul>
                </nav>
            </div>
        </header>
    </div>

Although the navigation links disappear with this code, I can't seem to figure out how to make the collapsible navigation bar icon show up with the links in it.

If you require any more code, feel free to ask

htmlcssasp.nettwitter-bootstrap

Answer №1

Learn how to create a collapsible tool bar using Bootstrap 3 and MVC. This tutorial also includes user authentication tests to display different content based on user roles.

<div class="navbar navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle navbar-inverse" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar navbar-inverse"></span>
                    <span class="icon-bar navbar-inverse"></span>
                    <span class="icon-bar navbar-inverse"></span>
                </button>
                @Html.ActionLink("MY SITE NAME ", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" id="dropdownCommonMenu" data-toggle="dropdown">Content</a>
                        <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownCommonMenu">
                            @if (Request.IsAuthenticated)
                            {

                                if (User.IsInRole("YourRoleToCheck"))
                                {
                                    <li role="menuitem" class="nav-header text-info">Admin Tools</li>
                                    <li role="menuitem">@Html.ActionLink("Customers", "Index", "AspNetUsers")</li>
                                    <li role="menuitem">@Html.ActionLink("Suasages", "Index", "Sausages")</li>
                                    <li role="menuitem">@Html.ActionLink("Spiders", "Index", "Spiders")</li>
                                    <li role="menuitem">@Html.ActionLink("Reports", "Index", "Reports")</li>
                                    <li role="menuitem" class="divider"></li>
                                }
                                if (User.IsInRole("AnotherRoleTest"))
                                {
                                    <li role="menuitem" class="nav-header text-info">Managers Only</li>
                                    <li role="menuitem">@Html.ActionLink("Users", "ManageIndex", "AspNetUsers")</li>
                                    <li role="menuitem" class="divider"></li>
                                }
                                if (User.IsInRole("AnotherRoleToTest"))
                                {
                                    <li role="menuitem" class="nav-header text-info">Supervisor Stuff</li>
                                    <li role="menuitem">@Html.ActionLink("Technician", "TechnicianIndex", "Technician")</li>
                                }
                            }
                            else
                            {
                                <li role="menuitem" class="nav-header text-danger">You must be Logged in</li>
                            }
                        </ul>
                    </li>                    
                    <li>@Html.ActionLink("Help", "Contact", "Home")</li>
                    @*<li>@Html.ActionLink("About", "About", "Home")</li>*@
                </ul>
                @Html.Partial("_LoginPartial")
            </div>
        </div>
    </div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Adding options to an HTML select dropdown menu using data stored in an array

Having reviewed several questions related to this issue, I am still encountering difficulties. Below is the code snippet that I am struggling with: <body> <?php //To begin, there is a form with a drop-down menu and a button, which will trigge ...

phphtmlforms

What is the reason for the failure of this code to store data in local storage (undefined)?

After creating a new div with data from an input form, I noticed that the first div properly saves the inputted data. However, when I try to input new data, the div displays an undefined value. first attempt second attempt 0: {name: "Milk", amount: "30"} ...

javascripthtmljsondom

How can I design an SVG page similar to Coin360 and Market Maps?

I need to design a homepage similar to coin360.com, where I can display market maps and cryptocurrency rates. This page will be created using SVG elements for the answers section. Is there a pre-made template available for this design, or can someone gui ...

javascripthtmlcsssvgsections

Having trouble getting the .toggle() function with classList to work on one element, despite working fine on others

I've been struggling to apply a class to an HTML element when I click on another element of the page. Despite numerous attempts, it just doesn't seem to work for me. Let's take a look at my code: HTML Code: <div class="container&qu ...

javascripthtmljqueryonclicktoggle

The program is designed to only allow up to two images to be wrapped

I'm struggling with a short jQuery program that I need help with. The problem is, I can't seem to get it to wrap more than two images in the same row. My goal is to create a website that side-scrolls, and I thought this approach would be the simp ...

javascriptjquerycsshtml

display child element at full width within a parent element that is not full width

I have a container with a maximum width of 1024px, and I want one of its child elements to take up 100% width starting from the left edge of the screen. Is there a way to achieve this without adding extra HTML markup? I know I can make the child element 1 ...

htmlcsswidth

Having trouble getting a background image to show up in a table cell when using CSS clear:both?

I am working on an email and I want an image to only show up on mobile devices. To achieve this, I created an empty <td> with a span inside where I styled the span to have a background image. However, my issue is that I want the image to occupy an e ...

htmlcsshtml-tablehtml-email

What is the best way to ensure a division's height matches that of the window using CSS?

Is it possible to create a division that covers the total width and height of the screen using just CSS without relying on JavaScript or jQuery? <div id="all"></div> I have tried setting the width and height of the element to 100%, but I am s ...

htmlcssheight

Issue with Google Maps iFrame not loading when utilizing JavaScript variables in the "src" attribute

Currently, I am facing an issue with utilizing JavaScript variables containing GPS latitude and longitude values in the "src" attribute of an iFrame in an HTML file for displaying image EXIF data on a Google Maps iFrame. When I hardcode specific latitude ...

javascripthtmlgoogle-mapsiframe

Prevent User Access to Start Button During Browser Request Processing

I have buttons for starting and stopping a window service on a server. When I click on the start button, the service takes some time to start. During this time, I need to disable the start button on the client side. The same goes for the stop button. Even ...

c#javascriptjqueryasp.net

Is your PHP random advertisement feature malfunctioning?

<div id="bannerAd"> <?php //THIS SCRIPT RANDOMLY SELECTS AN AD. $randomAd = rand(1,3); switch($randomAd) { case "1": $adLink = "/sale.php"; $imageFile = "/images/saleAd.png"; ...

phphtml

Having difficulty extracting information from an HTML page using Swift

I'm attempting to convert data retrieved from an HTML page into a readable format, but the string urlContent is showing as nil even though the data received from the NSURLSession is not null. This is my approach: var city = "London" var url = NSURL ...

htmlswiftdecodensurlsession

Resolve the issue of text overlapping on an image when zooming in

There seems to be an issue with overlapping text and images when zooming the page. I have included a screenshot for reference, please take a look and provide a solution. Thank you in advance.https://i.sstatic.net/oVlGN.png Here is the CSS code causing the ...

htmlcssangularbootstrap-4

Adjust the initial scroll position to - apply overflow-x: scroll - on the specified element

I have an image that can be scrolled to the right on screens that do not fit the full width, but I want the center of the image to be displayed first instead of the left side. Below is my React code: import React, { useEffect, useRef, useState } from &qu ...

javascripthtmlcssreactjs

Looking to send a request to create a page using ASP?

Is there a way to generate and save an ASP.NET page that takes a long time to load in a separate thread, while maintaining the user's session? I've found that opening a new thread from code-behind breaks the Request object and Server.Execute. I ...

asp.netmultithreadingasp.net-2.0

When Css is incorporated within a text, it prevents the use of " " from functioning properly

I am currently developing a GUI application using Qt 4.8. I have a label that displays text in white (the stylesheet has already been set up for this) and I want to change the color of the word "UPDATE" to red. Here is my initial code: //all text in whit ...

c++cssqt

Records were successfully updated and a confirmation message was received, however the changes did not reflect in the database

I am working on creating an "edit_post" page for my website to allow users to edit their previously posted content. Although I receive a notification saying "Updated data successfully," the changes are not being reflected in the MySQL database. <?php ...

phphtmlmysqlinsert-update

Having trouble getting the sorting/search function to work with a click event to display content. It seems to only work with a single item - possibly an issue with the

Creating a function that involves multiple boxes with a search function. The search function is working for the most part, but when clicking on a result, certain content should display. function filterFunction() { var input, filter, ul, li, a, i; ...

javascripthtmlcss

Is it possible to customize the arrow on a drop-down menu?

Here is an example of the page I am facing issues with: If you look at the right side of the bottom bar, you will notice a selection option for different themes. I have been attempting to replace the down arrow with an image. Below is the code I have used ...

htmlcss

Utilizing border-image property to showcase four dots in each corner of my div container

I'm having trouble applying a gradient color to my border using the border-image property. When I use border-image: linear-gradient(-180deg, #2D6BD0 0%, #83B8FF 100%);, I'm only seeing a single dot in each corner of my DIV. Does anyone know why t ...

htmlcssborderborder-image