Guide to positioning a link on the right side of a navigation bar

I am trying to achieve a specific layout using Bootstrap. I want to align the logout button to the right-hand side and have three modules (contact us, about epm, and modules) centered on the page. Can someone guide me on how to achieve this using Bootstrap? Thank you in advance.

<div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="home.jsp" style="color:purple;cursor: auto" id="wel">Welcome Admin</span></a>
    </div>

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav" style="text-align:center">
        <li class="active"><a href="about_epm.jsp">About EPM</a></li>
        <li><a href="contact_us.jsp">Contact Us</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Modules <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu"> 
            <li><a href="#">Employer Section</a></li>
            <li class="divider"></li>
            <li><a href="#">Employee Section</a></li>
            <li class="divider"></li>
            <li><a href="#">Client Section</a></li>
            <li class="divider"></li>
            <li><a href="#">Project Details</a></li>
          </ul>
        </li>

    <li class="pull-right">
        <a onClick="logout();" class="navbar-brand pull-right">
            <span class="glyphicon glyphicon-off" id="icon"> Logout</span>  
        </a>
    </li>

    </ul>   
</div>
</div>

Answer №1

If you want to align the logout object to the right, you can simply apply the navbar-right class from Bootstrap.

For center aligning other links, you can achieve this with the following block of CSS code:

#bs-example-navbar-collapse-1 { text-align:center; }
.centered-navbar { display:inline-block; float:none; vertical-align:top; }

Here is the HTML structure:

<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="home.jsp" style="color:purple;cursor: auto" id="wel">Welcome Admin</a>
      </div>

      <ul class="nav navbar-nav centered-navbar">
        <li class="active"><a href="about_epm.jsp">About EPM</a></li>
        <li><a href="contact_us.jsp">Contact Us</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Modules <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu"> 
            <li><a href="#">Employer Section</a></li>
            <li class="divider"></li>
            <li><a href="#">Employee Section</a></li>
            <li class="divider"></li>
            <li><a href="#">Client Section</a></li>
            <li class="divider"></li>
            <li><a href="#">Project Details</a></li>
          </ul>
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li>
          <a onclick="logout();">
            <span class="glyphicon glyphicon-off" id="icon"> Logout</span>  
          </a>
        </li>
      </ul> 
    </div>
  </div>
</nav>

View a live example on Bootply: http://www.bootply.com/ddmUGfX0PI

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

Enhance and soften images using CSS with smooth responsiveness across all web browsers

When an image is clicked, it should zoom in and become the background of the page with a blurred effect. I attempted to achieve this using the following code... <style type="text/css"> body{ position: absolute; margin-left: 100px; right: 0; z-inde ...

CSS designs that adapt flawlessly to high-resolution mobile devices with perfect responsiveness

Currently, I am implementing max-width: 768px to modify the appearance of my website. However, with the increasing number of high-resolution devices available in the market such as 4K mobile phones, I am wondering how I can detect them. Should I consider ...

Enhancing List Numbers with CSS Styling

Is there a way to customize the appearance of numbered lists? I created an ordered list and would like to modify the numbering style To remove the bullets And adjust the color and background ...

Creating a two-column grid layout using Bootstrap 4 is a simple and efficient process. Let's see how

I've been struggling to get this to display side by side in a two-column grid. Even after following Bootstrap tutorials, I can't seem to make it work. Check out the code below: <div class="row"> <div class="col-md-8 ...

The Webix component is experiencing a lack of refreshment

function refresh_group_items(){ //console.log("calling1"); window.setTimeout(function(){ $$("cfg").reconstruct() }, 3000); } $.ajax({ type: "POST", xhrFields:{ withCredentials: true }, beforeSend: function(reque ...

The code functions properly on React Webpack when running on localhost, however, it fails to work once deployed to AWS Amplify

As I work on my React.js app, I encountered an issue with hosting pdf files on Amplify. While everything runs smoothly on localhost/3000, allowing me to access and view the pdf files as desired either in a new tab or embedded with html, the same cannot be ...

What is the method for customizing the NavBar color using CSS?

Hi there! I recently came across a responsive multi-level menu that caught my eye. After copying the CSS and JavaScript exactly, I ended up with this NavBar. The issue I'm facing is changing the default color (which is green) to another color. Here&ap ...

Shuffle letters in a word when hovered over, then unscramble them back to their original order

I have noticed a fascinating effect on several websites. To give you an idea, here are two websites that showcase this effect: Locomotive and TUX. Locomotive is particularly interesting to look at as the desired effect can be seen immediately when hovering ...

Troubleshooting CSS Text Display on HTML5 Video for Mobile Devices

I am currently working on positioning text and a button over an HTML5 video without using media queries to address mobile display issues. The problem arises when using the car-image-overlay class from Bootstrap 4 to show the div containing the text over th ...

What is a method for capturing the value of a nested input element without requiring its ID to be

Currently, I am facing a challenge in selecting the value of an input box from a user-generated ordered list of text boxes and logging its value to the console. It seems like I cannot find a way to select the value of a child's child element when the ...

Pressing a key once causing two actions when managing content in a separate window

Issue: I am facing a problem where I receive double keypresses from one key event when the event updates content in two separate windows. (Please keep in mind that I am not an expert in this field and appreciate your understanding.) I am attempting to use ...

Using -webkit-transform with varying transition durations for rotateX and rotateY properties

Is it possible to have different transition times for both rotateX and rotateY in CSS3? I know you can use -webkit-transition to set a time, but it seems like setting separate transition times for both is not doable. It appears that you can only set it for ...

Designing Forms with Label Placement above Input Fields

I am working on creating a form with the following layout: <form name="message" method="post"> <section> <label for="name">Name</label> <input id="name" type="text" value="" name="name"> <label for="email"& ...

Solutions for altering the appearance of a combobox using CSS

Currently, I am experimenting with javafx 2 and trying to modify the background color of the menu/list through CSS. Despite attempting the code snippet below, nothing seems to be working as expected. Do you have any suggestions or insights on how to achi ...

Angular UI grid: Arranging numbers in a straight line at the decimal point

I am interested in aligning decimal numbers in Angular UI Grid as shown below. 11.293 .89 233424 .34345 I have considered different approaches such as using a cell template with aligned divs or transparent 0s. Has anyone successfully imp ...

What is the method for activating scrolling in an inner div instead of the browser window?

In the code snippet provided, I am encountering an issue where the browser window scrolls instead of the specified div with overflow-y: scroll when minimizing the browser window. How can I ensure that scrolling occurs within the div itself without making ...

How to configure dropdown options in Angular 2

I have been struggling to set the display of a select tag to the value obtained from another call. Despite my attempts with [selected], [ngValue], [value], and more, I have not been successful. <select class="form-control" [(ngModel)]="selectedRegion" ...

The HTML element update event was not triggered due to the excessive load of a JavaScript function

I am currently running a JavaScript function that is quite CPU intensive. To provide visual feedback to users when it starts and stops, I am attempting to display a badge on the webpage. Below is the code snippet: function updateView() { console.log(1 ...

Tips for creating an adjustable background image size

Is it possible to adjust the height of a section to match the background using CSS? Currently, the height is determined by the content within the section. CSS: .content-block { background-size: cover; background-position: center center; } HTML: &l ...

Tips on looping through a universal array and retrieving user input

My current project involves creating a news site using the Guardian API. I want to implement a search feature that allows users to input keywords and retrieve the webTitle attribute for matching elements. While I could simply insert the user input directly ...