Require a selection from the menu on the right side needed

I am looking to have the logout link displayed on the far right when the other menu items are hidden.

Currently, it is appearing in the center.

Is there a way I can make it show up on the right?

<div class="nav-content container">
            <div class="nav-wrapper">      
                <ul class="main-nav">
                    <asp:PlaceHolder runat="server" ID="hideNav">
                    <li runat="server" id="home" Visible="false" class="hide"><asp:HyperLink Id="homeLink" runat="server"></asp:HyperLink></li>
                    <li runat="server" id="reportClaim" Visible="False" class="hide"><asp:HyperLink runat="server" NavigateUrl="/reportclaim.aspx" Text="<span>Report Claim</span>" ID="reportClaimLink"></asp:HyperLink></li>
                    <li  id="lnkLogOut1" runat="server" style=" "><asp:HyperLink runat="server"  NavigateUrl="~/LogOut.aspx" Text="<span>Log Out</span>"></asp:HyperLink></li>
                    </asp:PlaceHolder>
                </ul>
            </div>

I have attempted to use 

.pull-right {
  float: right !important;
}

but unfortunately it is not having any effect.

htmlcssasp.net

Answer №1

Below is the code snippet for your reference:

<div class="nav-content container" >
        <div class="nav-wrapper" >      
            <ul class="main-nav" >
                <asp:PlaceHolder runat="server" ID="hideNav"> 
                <li runat="server" id="home" Visible="true" class="hide"  ><asp:HyperLink Id="homeLink" runat="server" Text="<span> Claim</span>"></asp:HyperLink></li>
                <li runat="server" id="reportClaim" Visible="true" class="hide"><asp:HyperLink runat="server" NavigateUrl="/reportclaim.aspx" Text="<span>Report Claim</span>" ID="reportClaimLink"></asp:HyperLink></li>

                </asp:PlaceHolder>
            </ul>
        </div>
       <div align="right" style="vertical-align:top">
            <asp:HyperLink ID="HyperLink1" runat="server"  NavigateUrl="~/LogOut.aspx" Text="<span>Log Out</span>"></asp:HyperLink>


</div>

In order to make the Link button display on the right side, you can place it in a separate Div tag and set the alignment to "right". We have excluded the UL & LI tags for the Logout section as they are not necessary.

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

Divide a SINGLE BACKGROUND IMAGE in HTML into two separate links of equal size, one at the top and

As a beginner in HTML, I am trying to find a way to divide a background image into two equal sections without using image mapping. I attempted to split the links by setting the style to 0% and 50% to designate the top and bottom halves, but unfortunately, ...

javascripthtmlcsshtml5-canvas

Unusual sequence of JQuery Ajax calls

Within my website, there is a project div that is displayed using EJS. The data for the projects in EJS are rendered using a forEach loop, resulting in multiple similar divs appearing on the page. Each project div is assigned an id for identification pur ...

javascripthtmljquerydom

Attempting to implement Ajax for my AddToCart feature while iterating through a form

At the moment, I am facing an issue where only the first item is being added to the cart and the page remains unchanged. On each page, there are a minimum of 3 items, with a new form created for each one. However, the other products do not get added to the ...

c#htmlajaxhtml.beginform

Tips for accurately aligning a relative p tag within a td

Description: I am trying to prevent text overflow in a table cell and position the text underneath a header without wrapping it under an image. I have tried setting a static width for the image and adjusting the left property, but it is not working as expe ...

htmlcsshtml-tableposition

Disabling click events on a span tag in Angular 6: A step-by-step guide

Is there a way to disable the click event for deleting hours with the 'X' symbol based on a condition? Thank you in advance. <table navigatable class="<some_class>"> <tbody> <tr *ngFor="let item of ...

javascriptcssangularhtml-table

Including code that is tailored specifically for the Internet Explorer browser on Windows Phone devices

While testing the Google Maps API on different browsers and devices, I encountered issues with Windows Phone. It turns out that Google Maps is not supported on Windows Phones, resulting in errors. How can I set it up so that instead of displaying the map ...

javascriptcssgoogle-mapswindows-phone-8

Developing an interactive selector within the on() event handler

My goal is to utilize the on() event for managing dynamically created code. It functions properly when the selector is hardcoded in the on() event. However, I aim to enable it to select different elements depending on which box they choose. $("body").on( ...

javascriptjqueryhtml

Managing varied PHP submissions using a single 'isset' declaration

I'm working on loading data from a MySQL database with PHP and displaying images in HTML. When a specific image is clicked, I want to show text associated with that image using MySQL/PHP. I'm looking for a way to achieve this without having multi ...

phphtmlmysqlisset

Applying a specified style to a pseudo element using the ::after selector to display an

Can anyone help me with adding a pseudo element ::after containing an icon (from FontAwesome) to my Bootstrap Vue ProgressBar? I want this icon to be dynamic and move along the progress bar line when I click. Here is my current implementation, where the Pr ...

htmlcssvue.jsbootstrap-4

Bespoke HTML, CSS, JavaScript, and PHP website designs within the Wordpress platform

I am a beginner in the world of Wordpress, coming from a background of creating websites from scratch. Currently, I am working on a Wordpress template (Astra) and looking to create a custom page using HTML, CSS, JavaScript, and PHP from the ground up to ad ...

javascriptphphtmlcsswordpress

Displaying both items upon clicking

Hey there, I'm having an issue where clicking on one article link opens both! <span class='pres'><img src='http://files.appcheck.se/icons/minecraft.png' /></span><span class='info'><a href=&apo ...

javascriptjqueryhtml

Batch script prematurely ends when compiling .less files in a batch for-loop

Recently, I decided to try my hand at using batch scripts as a way to compile the .less files for my website into .css files before deploying. It seemed like an efficient solution for my needs. However, after successfully utilizing a for loop in my batch ...

cssbatch-fileless

Is there a way to customize the color of a MUI styled component?

I have a customized MUI component that displays a circular badge in green. const StyledGreenBadge = styled(Badge)(({ theme }) => ({ '& .MuiBadge-badge': { backgroundColor: '#44b700', color: '#44b700', ...

javascriptcssreactjsmaterial-uistyled-components

Developing a user-friendly widget for a website that is not optimized for mobile devices

Here's the backstory: I'm currently in the process of creating a mobile-friendly widget for my clients. Unfortunately, they have web pages that are not optimized for mobile devices, and it doesn't seem like that will change anytime soon. Th ...

javascriptjqueryhtmlcssmobile

Is it more effective to implement react useState and conditional rendering for managing different screen sizes, or is it better to use

In my current project, I am using standard CSS3 and creating separate CSS files for each component. I am debating whether to incorporate an event listener with multiple return functions within my React component instead of having multiple media queries in ...

cssreactjsconditional-statementsrendering

How can the checkers code be corrected due to a mistake?

Designed a simple game where the objective is to clear all the pieces by jumping over the checkers. However, encountering an error when attempting to remove the checker for the second time. Uncaught TypeError: Cannot read property 'theRow' of u ...

javascripthtmlhtml5-canvas

Selection of country and state in a form

Within the "My Account" form for users, I have implemented two select fields - one for country and one for state. These fields are automatically populated with lists from countries.js, which is functioning well. However, whenever a user accesses their acco ...

phphtmlforms

What steps can I take to resolve the CSP errors I am experiencing?

I am currently working with NextJs@12 and I am attempting to set up CSP for my application. Unfortunately, I keep encountering errors in my console and I cannot figure out where I am going wrong. Below is the current policy that I have in my next.config fi ...

javascriptcssnext.jshttp-headerscontent-security-policy

What could be the reason for the lower section of my website not being displayed?

I'm having an issue with a new div I added to the bottom half of my website - it's not showing up. Oddly enough, when I test the same code on a separate web page, it works fine. Can someone please take a look at the code and help me out? Thank yo ...

pythonhtmlcssdjango

Suggestions for improving the smoothness of the Bootstrap toggle hide/show feature

Recently completed my bootstrap toggle hide/show feature and everything seems to be functioning correctly, except for the transition between the different contents. The borders appear jagged and not smooth when activating the toggle. I suspect there may b ...

javascriptjqueryhtmlcsstwitter-bootstrap