Display additional links in Bootstrap navigation bar with a second level menu

Currently, I am integrating Bootstrap into an ASP.NET application using C#. Within this application, I have implemented a two-level menu system where certain options are available to users and others are only visible to administrators. The decision on which links to display or hide is made during the page load in the master page. Everything works smoothly in desktop mode; however, in mobile view, the hidden links that should only be visible to administrators are also being displayed.

<ul class="navbar-nav">
    <li class="nav-item active">
        <asp:LinkButton class="nav-link" ID="LinkButton5" runat="server" Visible="false" PostBackUrl="#">Link 01</asp:LinkButton>
    </li>
    <li class="nav-item active">
        <asp:LinkButton class="nav-link" ID="LinkButton6" runat="server" Visible="false" PostBackUrl="#">Link 02</asp:LinkButton>
    </li>
    <li class="nav-item active">
        <asp:LinkButton class="nav-link" ID="LinkButton4" runat="server" Visible="false" PostBackUrl="#">Link 03</asp:LinkButton>
    </li>
    <li class="nav-item active">
        <asp:LinkButton class="nav-link" ID="LinkButton2" runat="server" Visible="false" PostBackUrl="#">Link 04</asp:LinkButton>
    </li>
    <li class="nav-item active">
        <asp:LinkButton class="nav-link" ID="LinkButton7" runat="server" Visible="false" PostBackUrl="#">Link 05</asp:LinkButton>
    </li>
    <li class="nav-item dropdown">
    <a runat="server" class="nav-link dropdown-toggle" href="#" id="dropdown04" data-toggle="dropdown" aria-expanded="false" aria-haspopup="true" Visible="false">Link With Sub Menu</a>
      <div class="dropdown-menu" aria-labelledby="dropdown04">
        <a class="dropdown-item" href="#">Sublink 01</a>
        <a class="dropdown-item" href="#">Sublink 02</a>
        <a class="dropdown-item" href="#">SubLink 03</a>        
      </div>
    </li>
    <li class="nav-item active">
        <asp:LinkButton class="nav-link" ID="LinkButton1" runat="server" Visible="true" PostBackUrl="#">Link 06</asp:LinkButton>
    </li>
    <li class="nav-item active">
        <asp:LinkButton class="nav-link" ID="LinkButton3" runat="server" Visible="False" OnClick="LinkButton3_Click">Link 07</asp:LinkButton>
    </li>                           
</ul>

The associated code determines which menu options are visible based on the role of the logged-in user:

if (Session["PersonType"] != null && Session["PersonType"].Equals("Admin"))
{
    LinkButton1.Visible = false;
    LinkButton2.Visible = false;
    dropdown04.Visible = true;
    LinkButton3.Visible = true;
    LinkButton4.Visible = false;
    LinkButton5.Visible = true;
    LinkButton6.Visible = true;
    LinkButton7.Visible = true;
}
else
{
    LinkButton1.Visible = true;
    LinkButton2.Visible = true;
    LinkButton3.Visible = false;
    LinkButton4.Visible = true;
    LinkButton5.Visible = false;
    LinkButton6.Visible = false;
    LinkButton7.Visible = false;
    dropdown04.Visible = false;
}

The issue arises in the mobile view where the dropdown menu items in dropdown04 are displayed regardless of the user's role. This problem is isolated to the mobile view and does not affect the desktop mode. Some users have proposed changing data-toggle to data-bs-toggle and data-target to data-bs-target, but this solution did not resolve the issue and instead prevented the menu from expanding in the mobile view.

c#cssasp.netbootstrap-5

Answer №1

In the initial code snippet, the 'a' element had a visible property.

<ul class="navbar-nav">
    <li class="nav-item active">
        <asp:LinkButton class="nav-link" ID="LinkButton5" runat="server" Visible="false" PostBackUrl="#">Link 01</asp:LinkButton>
    </li>
    ...
    </ul>

After some experimentation, I moved the visible property to the 'li' element and set it to runat server, which appears to be functioning correctly.

<li class="nav-item dropdown" id="ddropDown04" runat="server" Visible="true">
        <a runat="server" class="nav-link dropdown-toggle" href="#" id="dropdown04" data-toggle="dropdown" aria-expanded="false" aria-haspopup="true">Link With Sub Menu</a>
          <div class="dropdown-menu" aria-labelledby="dropdown04">
            <a class="dropdown-item" href="#">Sublink 01</a>
            <a class="dropdown-item" href="#">Sublink 02</a>
            <a class="dropdown-item" href="#">SubLink 03</a>        
          </div>
        </li>

Now, the code behind handles the visibility of 'ddropDown04' and I have eliminated the visibility property from the 'a' element.

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

Changing the first letter to uppercase in a string within a Win Form DataGridView using C#.NET

In my C# Win Form application, I have a data grid view where the cells are editable by default. I want the end value to always be treated as Upper Case First. For example, if a user types *string*, it should be displayed as *String*. I have tried implement ...

c#.netdatagridview

Adjusting the heights of various divs as a percentage to fill the containing parent div

Is it possible for child divs to adjust their height automatically based on a percentage within a parent div with set max dimensions using CSS? HTML: <div id="parent"> <div id="top"></div> <div id="bottom"></div> < ...

htmlcssheight

CSS Problem: The buttons beneath the div disappear when I apply a margin

Kindly click on the links below to view the images. The first image displays the desired design I am aiming for. The text and blue background are part of the image, and there is a button located below them. However, whenever I adjust the top margin, it ge ...

htmlcsswordpressbootstrap-4

Why should curly brackets be used within functions?

Why are curly braces used inside a function if the syntax and code already work well? public void Foo() { string txt = "hello world"; { <---- THIS Assert.AreEqual("hello world", txt); } <---- THIS } EXAMPLE: This code snippet w ...

c#selenium

VUE component disregarding CSS styles

Check out my awesome VUE component below: <template> <div> <div class="bottom-footer"> {{msg}} </div> </div> </template> <script> export default { ...

cssvue.js

Accessing user information after logging in can be achieved through utilizing Web API in conjunction with Angular 5 Token Authentication

Every time I access my Angular app, the following information is displayed: access_token:"******************" expires_in:59 refresh_token:"******************" token_type:"bearer" However, I am now facing an issue where I cannot extract the user id from t ...

c#angularauthenticationasp.net-web-apitoken

In C#, how can the HTMLAgilityPack be utilized to extract a value from within a script tag?

I'm currently working with HTMLAgilityPack and I need to extract a value from a script tag. Here is the code: <div id="frmSeller" method="post" name="frmSeller"> <div class="clear"></div> <script type="text/javascript" language=" ...

javascriptc#regex

Hover over CSS sprite

My anchor tag looks like this: <a href="#"> <i class="ico01"></i> <span>Text</span> </a> The ico01 class applies an image using CSS sprite. I want to change the background color of the entire content inside the a ...

htmlcsscss-sprites

Create personalized styles for each item within a stack with specific spacing using the @mui library

Is there a way to change both the background color and spacing area when hovering over each item in my list? https://i.stack.imgur.com/87TST.png <Stack spacing={4} divider={<Divider variant={`fullWidth`} orientation={`horizontal`} flexItem/>}> ...

javascripthtmlcssreactjsmaterial-ui

Contrasting performance of HttpWebRequest/HttpClient in .NET Core versus .NET Framework

Currently, I am developing a console application that utilizes SSO (Windows Authentication) for logging into a third-party web API. The code successfully functions with .NET Framework 4.6.1, however, it encounters issues when running on .NET Core 3.1. Aft ...

c#.net.net-core

Grid of squared CSS elements contained within a wrapper div that is set to a maximum

When attempting to create a CSS grid layout with square boxes, I encountered an issue. While the first row of squares remains square when setting the maximum height of the wrapper, subsequent rows are cropped into rectangles instead. The culprit seems to b ...

htmlcsscss-grid

CSS changes triggered by JQuery are ineffective

Having trouble modifying the CSS of a class in my HTML file. I've been struggling with this for quite some time and can't figure out what I'm doing wrong. (I've already attempted multiple versions, but nothing seems to work) Here' ...

javascriptjqueryhtmlcss

Changing the class of an element in Svelte: A step-by-step guide

I am working on a svelte application and I want to implement row highlighting when a user clicks on it. Here is an example code snippet that demonstrates this functionality: <div id="A" class="car-even">A</div> <div id=&q ...

csssvelte

What are the steps for incorporating a personalized background in Autodesk Forge?

Is it possible to set an image as the background? I am trying to achieve this but so far, I have only been able to do the following: viewer.setLightPreset(4); viewer.setQualityLevel(false, false); viewer.setGhosting(true); viewer.setGroundShadow(true); vi ...

cssautodesk-forgeautodeskforgeautodesk-viewer

The arrangement of CSS code is crucial for it to work properly; any deviation from the correct order

I am facing a problem where I am trying to display a circular div using CSS, but it only works if the background image property is set first. Typically, this wouldn't be an issue if the image wasn't being dynamically inserted using PHP code. I ...

css

The div is obscured by the background image

Could someone please assist me in preventing the .background image from overlapping with the skills div when the viewport expands either vertically or horizontally? I've tried several approaches without success. Any help would be greatly appreciated! ...

javascriptjqueryhtmlcss

The error at line 72 of proxyConsole.js is: TypeError - Unable to access the 'default' property of an undefined object

I am new to using react redux loading bar and redux forms After clicking a button, I want the loading bar to display. The issue arises when I try to load the loading bar, resulting in the following error message: proxyConsole.js:72 TypeError: Cannot read p ...

htmlcssreactjsreduxmaterial-ui

The line breaks in elements occur when the combined widths add up to 100%

Is there a way to display an input and a button inline, with the input taking up 70% of the row and the button taking up 30%? I tried setting the CSS for the input to 70% and the button to 30%, but they keep breaking onto separate lines. How can I solve ...

css

Tips for positioning the overlay to match the icon list when hovering- JavaScript/Cascading Style Sheets (CSS)

My challenge involves a list of <li>'s accompanied by an icon that, when hovered over, displays an overlay containing information about the 'test'. The setup looks something like this: test1 test2 test3 and so forth.... Here' ...

javascriptjqueryhtmlcss

"Efficiently Triggering Multiple Events with One Click in JavaScript

Hey everyone, I could use some assistance. I'm trying to execute multiple events with a single click. Currently, I can change the image in my gallery on click, but I also want to add text labels corresponding to each image. Whenever I click on a diffe ...

javascripthtmljquerycssdom-events