broken alignment of right-aligned Bootstrap navbar

I need help with displaying a navbar on my webpage. I want the right side of the navbar to show different elements based on whether the user is logged in or not. If the user is not logged in, it should display "Login" and "Register," and if they are logged in, it should display "Hi, >username<" and "Logout." Currently, my code only works for when the user is not logged in. After they log in, the right part shows: Hi, Logout

username<

Can someone please assist me with this?

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
      </button>
    </div>

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li><a href="member.php?lang=en">English</a></li>
        <li><a href="member.php?lang=zh">中文</a></li>
        <li><a href="<?php echo lnkIndex; ?>"><img alt="KnowSG.com" src="images/knowsg_icon.png" style="height:20px"/></a></li>
    </ul>
    <ul class="nav navbar-nav navbar-right">
      <?php
        if(isset($_SESSION["valid_user"])) {
          $msg = "<li>Hi, <a href=\"".lnkMember."\">".$_SESSION["valid_user"]."</a></li><li><a href=\"".lnkLogout."\">".strLogout."</a></li>";
          echo $msg;
        }
        else {
          echo "<li><a href=\"".lnkLogin."\">".strLogin."</a></li><li><a href=\"".lnkRegister."\">".strRegistr."</a></li>";
        }
      ?>
    </ul>
  </div>
</div>
</nav>

Answer №1

To properly structure your navigation bar, you should include a <p class="navbar-text"> within each <li> element. Here's an example:

<ul class="nav navbar-nav navbar-right">
    <li>
        <p class="navbar-text">
            Hello, <a href="/foo.php" class="navbar-link">USER</a>
        <p>
    </li>
    <li><a href="/bar.php">Log out</a></li>
</ul>

(Note: The use of navbar-link is optional and only affects the color of the username)

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

How can AngularJS utilize variables from an external JavaScript <script> file within an HTML document?

As someone unfamiliar with AngularJS, I have a simple inquiry regarding the subject. The code on my page begins by defining an app and controller: <script> var isisApp = angular.module('isisApp', []); isisApp.controller('Acco ...

Remove any unnecessary white space and new lines from the HTML code

Is there a way to remove double whitespaces and new lines from my HTML output without altering the ones within textarea and pre tags using PHP? ...

Enhance Material-UI's SwipeableDrawer by incorporating a clickable handle

Is there a way to include a clickable handle in a material ui SwipeableDrawer? Something similar to what's shown on Google Maps here: Google Maps button.css position: absolute; top: 100px; left: -50px; width: 50px; height: 100px; z-index: 10000; // ...

Display the Ajax response in a designated div

I am facing an issue with my ajax code. It doesn't print any output, but when I use alert() to print the output, it shows up fine. $(".grp-ans").each(function(e){ $.ajax({ type: 'POST', url: 'show-answ ...

The battle between "this" in HTML and AngularJS ng-model

We have been working on updating an old ColdFusion application that utilized "this" with a formatting function: <td>$<input type="text" name="txtTaxProration" id="txtTaxProration" value="0.00" alt="Tax Proration" onblur="dollarBlur(this);">< ...

Improper CSS styling leading to incorrect image size

I've got this awesome parallax image on my website (the majestic nature one) Here's how the page looks normally But sadly, it's not properly sized. When I check in Chrome dev tools, it appears like the image below, which is how I want it to ...

The POST method is failing to collect data from the form

Currently in the process of learning Web Design with HTML, PHP, and Javascript, I have taken on the challenge of creating my own website called MySite.html. Within this site, there is a sign-in screen that utilizes the POST method to send data to a file na ...

What is the method for creating a beveled text effect using CSS?

Is there a CSS-only method to achieve a beveled text effect? https://i.sstatic.net/s4Wlw.png Just to clarify, I'm seeking a way to make text appear thick with a beveled style rather than using something like text-shadow which simply extends the font ...

Steps for positioning an element to the left and center of a div

I'm having trouble aligning my two elements in a simple horizontal menu to the middle left. I want them to have a margin of 5px on the left and right sides. Here is a screenshot and CSS style: https://i.stack.imgur.com/vzO5D.png .body_clr { wid ...

Repeating percentages displayed in a progress bar

I created a responsive progress bar, but the progress values are repeating. I only want the central value to be displayed. Any suggestions on how to fix this issue? DEMO <div id="tab1"> <dx-data-grid class="tableTask" [dataSource]="datas" ...

Tips for making a hide and reveal FAQ section

Currently working on creating a FAQ page for my website, I ran into a challenge. My goal is to have a setup where clicking on a question will reveal the answer while hiding any previously open answers. So far, I have managed to achieve this functionality p ...

Printing SQL output from console.log into HTML with rows and columns can be achieved by following these steps

Here is the sample HTML code I have, which prints the data in a proper table format: redshiftClient.query('SELECT top 10 * FROM table') .then(function (data) { console.log(data); var mail = { from: '******@ou ...

Ways to resolve the issue of the search icon adapting to the selected value of the dropdown menu

Take a look at this. <!DOCTYPE html> <html lang="en"> <head> <!--REQUIRED META TAGS--> <meta charset="utf-8"/> <meta name="viewport" content="width=device-widt ...

What is the best way to align the content of a <ul> in the center while keeping the text left-aligned and setting a max-width

UPDATE: Including an image for better visualization: [![Check out the image link][1]][1] To understand more clearly, refer to this fiddle: https://jsfiddle.net/c7jazc9z/2/ Currently, I have a list with items aligned to the left. The goal is to center th ...

Unconventional border effect while hovering over image within navigation container of Bootstrap

Whenever I hover over the image inside the navigation bar, there is a strange white/gray border that appears. It's quite annoying. Does anyone know how to remove this border? Here is the code snippet causing the issue: <ul class ...

Type in "Date" and select a date using your mobile device

Hey, does anyone know a good solution for adding placeholder text to an input with type="date"? I'm looking for a way to utilize the phone's built-in date selection feature on a website, rather than having users manually enter dates using the ke ...

NodeJS instructs open(html) to execute first before any other code is executed

I am evaluating whether nodeJS is a suitable solution for a project I am working on during my internship. To summarize: I need the basicNode.js file to wait until the open('./basic.html') command has completely opened the browser and loaded its c ...

Reducing Image Size in JavaScript Made Easy

I need help with a project where I want the image to shrink every time it's clicked until it disappears completely. I'm struggling to achieve this, can someone assist me? Here is the HTML code I have: <html lang="en" dir="l ...

Scroll the div back to the top when the form is submitted

I have set up a form in a pop-up using Bootstrap modal. The form is quite long, so after submission, the message appears at the top of the form. However, I want it to scroll to the top when the user submits the form so they can easily see the message. Is ...

Row within table extending beyond boundaries of parent div table

Is there a way to make a table row wider than its parent table? I want the button at the bottom to extend beyond the borders of the table. https://i.sstatic.net/VH0HP.png Do I need to abandon the table styling to achieve this effect? Check out this JsF ...