Steps for placing a menu link at the far right edge of the menu

I'm looking to customize my NAVBAR by adding a Donate Link Menu on the right side, next to the search icon. Can anyone help with this simple task? Thank you in advance!

Here is the link to the website: www.clihelp.org

Below is the menu code for my NAVBAR. Feel free to ask if more code is needed.

    <div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <nav class="navbar navbar-default" role="navigation">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" 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="<?php echo $config['serv_url'];?>">clihelp <sup>beta</sup></a>
                </div>
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <?php
                    $Show->show_navbar_menu();
                    ?>
                    <ul class="nav navbar-nav navbar-right">
                        <form class="navbar-form navbar-left" role="search" method="POST" action="<?= $config['serv_url'];?>">
                            <div class="input-group">
                                <div class="input-group-btn search-panel">
                                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                        <span id="search_concept">Filter by</span> <span class="caret"></span>
                                    </button>
                                    <?php 
                                    $Show->filter_menu();
                                    ?>
                                </div>
                                <input type="hidden" name="search_param" value="all" id="search_param">
                                <input type="hidden" name="os_id" >         
                                <input type="text" class="form-control" name="q" placeholder="Search term...">
                                <span class="input-group-btn" id="search-wrapper">
                                    <button class="btn btn-default" type="submit" id="search-button" disabled><span class="glyphicon glyphicon-search"></span></button>
                                </span>
                            </div>
                        </form>
			<li><a href="#">Donate</a></li> <!-- Added Donate Link -->
                    </ul>
                </div>
            </nav>
        </div>
    </div>
</div>

Answer №1

Give this a try:

<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" 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="<?php echo $config['serv_url'];?>">clihelp <sup>beta</sup></a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<?php
$Show->show_navbar_menu();
?>
<ul class="nav navbar-nav navbar-right">
<form class="navbar-form navbar-left" role="search" method="POST" action="<?= $config['serv_url'];?>">
<div class="input-group">
<div class="input-group-btn search-panel">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span id="search_concept">Filter by</span> <span class="caret"></span>
</button>
<?php 
$Show->filter_menu();
?>
</div>
<input type="hidden" name="search_param" value="all" id="search_param">
<input type="hidden" name="os_id" >         
<input type="text" class="form-control" name="q" placeholder="Search term...">
<span class="input-group-btn" id="search-wrapper">
<button class="btn btn-default" type="submit" id="search-button" disabled><span class="glyphicon glyphicon-search"></span></button>
</span>
</div>
</form>
<li><a href="http://www.google.com">Go to Link</a></li>
</ul>
</div>
</nav>
</div>
</div>
</div>

Answer №2

update your HTML code

<ul class="nav navbar-nav navbar-right">
  <li>
<form class="navbar-form navbar-left" role="search" method="POST" action="<?= $config['serv_url'];?>">
<div class="input-group">
<div class="input-group-btn search-panel">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span id="search_concept">Filter by</span> <span class="caret"></span>
</button>
<?php 
$Show->filter_menu();
?>
</div>
<input type="hidden" name="search_param" value="all" id="search_param">
<input type="hidden" name="os_id" >         
<input type="text" class="form-control" name="q" placeholder="Search term...">
<span class="input-group-btn" id="search-wrapper">
<button class="btn btn-default" type="submit" id="search-button" disabled><span class="glyphicon glyphicon-search"></span></button>
</span>
</div>
</form>
    </li>
  <li><a href="#">Donate Link</a></li>
</ul>

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

Learn how to use jQuery to dynamically insert a table inside a div element in HTML, specifically for jQuery

Currently, I am attempting to incorporate HTML code through JQuery Ajax. I possess an HTML form (jQuery mobile) where data gets sent to a PHP file upon clicking the submit button using JQuery Ajax. The PHP file then responds with JSON data structured thi ...

Tips for customizing CSS for the ValidatorCallout Extender in an ajax tool

I am currently attempting to implement the ValidatorCallout Extender feature from the asp.net Ajax website. However, I am struggling with customizing the CSS for the popup validator. ...

My preference is for the flex box to expand in width (sideways) without increasing in height (up and down)

Is there a way for flex items to expand in width but only in height when necessary? I enjoy using flexbox, but I find it frustrating that all flex items in a row grow to the same height even when there isn't enough content to fill them, resulting in a ...

Incorporating HTML within PHP

I'm struggling with the following issue: after this, I end up with a blank page. Here is the code snippet in question: I am attempting to use HTML within PHP and then PHP again within HTML. The rest of the code is functioning correctly. If I replace & ...

Tips for passing a timestamp to a Postgresql DB using a Button in a Form instead of a traditional rails time_select box

I am currently developing a CAD App in Rails 4 with Ruby 2. The goal is to provide users with a button on the screen to log an on-scene time and clear scene time, especially since most users will be using touch screen computers. Instead of using the defaul ...

The issue with Framer motion's whileInView is that it does not animate the element when it is within the viewport in Next.js

In my current Next.js 14 project with the App Router, I decided to play around with animations using Framer Motion. One specific feature I wanted to implement was animating text elements into view as they enter the viewport. The idea is for the text to gra ...

Adjust the size of the images in the Bootstrap navbar brand to make them resizable and move them

After some online research, I discovered a method to create a two-row Bootstrap navbar with the navbar-brand on its own row: <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBn ...

Display a color picker within an HTML div with fixed positioning to prevent scrolling within the element

Within a div, I have text boxes that trigger a color picker to be displayed when clicked. Currently, the color picker appears at the bottom of the text box, but I would like it to be positioned on the left or top without requiring scrolling. Can anyone a ...

Is there a way to right-align the labels and input fields simultaneously?

Is there a way to line up the labels and inputs on the right side so they all appear in the same row? .radioContainer{ width: fit-content; margin: 5px; margin-top: 20px; background-color: aqua; padding-bottom: 25px; } <div class=" ...

Images that adapt to various sizes while maintaining a consistent visual hierarchy

Hey there, I'm struggling to achieve the same row size of images as shown in the example. However, when I adjust the window size, the larger images become smaller than the columns on the left. This has been a challenge for me and I haven't found ...

Here is a guide on determining the date variance in PHP by leveraging jQuery

I have been attempting to use the jQuery change function to calculate the variance between two dates, but I am encountering a problem as the code seems to be running smoothly without returning any results... <input type="text" name="datte1" class="form ...

Tips on eliminating the blue color from a hyperlink within a button

Currently, I am in the process of designing an HTML email template. I have included a green button in the template and now need to eliminate the blue color from the hyperlink within the button. I have exhaustively tried different solutions such as using ! ...

Enhance VideoJS using custom Ionic icons in a NextJS environment

I'm creating a platform for video content and I want to enhance the VideoJS player by incorporating icons from the Ionic set. However, as I typically use the <ion-icon/> tag to insert icons on my pages, I had to individually specify each icon&ap ...

jQuery method for implementing alternating row colors that are not sequential

Starting from scratch here. I've fetched a table from a remote server where odd rows are white and even rows are grey. Some rows have been hidden: $("td").filter(function(){ return $(this).text()=='R1';}).text('Row1'); //white $(" ...

The issue of an HTML button positioned on top of an image not remaining fixed when the browser window is resized

After mastering the art of placing an html form element on top of an image, I am now facing the challenge of making sure that the button remains intact even when I resize the window. For a reference, please visit: Note: Despite its simplicity, I acknowle ...

Comparison of the "Proposed Recommendation" versus the "Candidate Recommendation"

In a recent piece about HTML5, it was mentioned that the Proposed Recommendation date is set for 2022, while the Candidate Recommendation date is from 2012. I'm curious to understand the distinction between the "Proposed Recommendation" and the "Cand ...

The table's pagination displays above, thanks to Tailwindcss

I'm facing an issue where the pagination is showing up above the table, but I was expecting it to be displayed after the table. It would be ideal if the pagination appeared right after the table when adding multiple rows. Check this link for more inf ...

Challenges encountered when redirecting users with a combination of javascript and php

I have a login form that triggers a JavaScript function upon submission. This function calls a PHP page to process the input. The issue I'm facing is with how the redirections are displayed based on the user's role type. It attempts to display t ...

Having trouble getting rounded-lg and rounded-md to work properly with Tailwind CSS - any ideas why?

I'm currently working with Next.js version 14.2.4 and tailwindcss version 3.4.1, and I've encountered an issue where rounded-lg and rounded-md classes are not applying any border radius. Oddly enough, other classes like rounded-xl and just rounde ...

Open the PDF document in a stylish jQuery popup like fancybox or a similar plugin

Can a PDF file be loaded in a popup? I understand that some browsers may require Adobe Reader to view PDFs, but Chrome has its own built-in PDF viewer. ...