Is there a way for me to adjust my navbar menu items so they are aligned to the right

Currently, I'm designing a navbar and I'm facing an issue with aligning a specific part to the right side:

Here is the current setup I have:

Moreover, the collapsible navbar feature seems to be malfunctioning. When I try to shrink the screen, the collapse button appears but nothing happens upon clicking it. Here is a link to my codebase: Codebase

Answer №1

Check out this demonstration using Bootstrap, I hope it proves useful:

.test {
    color: white;
    margin-left: 10px;
}
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
 <div id="app" class="container-fluid">
    <nav class="navbar navbar-expand-md navbar-light bg-dark">
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav mr-auto">
            <h1 class="test" href="#">Funds.</h1>
            </ul>
            <ul class="navbar-nav">
             <li class="nav-item">
                    <a class="test" href="#">Use funds for business </a>
                </li>
                <li class="nav-item">
                    <a class="test" href="#">Pricing</a>
                </li>
                <li class="nav-item">
                    <a class="test" href="#">Legal stuff</a>
                </li>
            </ul>
        </div>
    </nav>
</div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

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

Ways to display scrollbar even when inner container lacks fixed height within a fixed position outer container

I am trying to display a scrollbar in an inner container without specifying a fixed height, while the outer container has a fixed position. However, I am encountering an issue where setting a fixed height for the innerContainer results in content being hid ...

It appears that the font path specified in the @fontface css is not functioning properly

In my directory named project, I have subdirectories named html, assets, and javascript. The assets directory contains fonts and css directories. Within the css directory, there is a CSS file called typography.css. The fonts directory contains all the font ...

Struggling to incorporate JSON data and javascript functions into an HTML file

I've been struggling to create a feed from a json link and display it in separate divs within an html document. Despite multiple attempts with different approaches for three different newspaper sources, I have not been successful. I'm hoping som ...

What is the secret to keeping a hover effect active?

As I hover over the buttons in my stack, a text box appears on the right side. The intention is for this text box to act as a scroll box, but it disappears when I move my mouse to scroll because it needs to be continuously hovered upon to stay active. To ...

What is the best way to save JavaScript array information in a database?

Currently working on developing an ecommerce website. My goal is to have two select tags, where the options in the second tag are dynamically populated based on the selection made in the first tag. For example, if "Electronics" is chosen in the first tag f ...

What is the best way to align product cards side by side instead of stacking them on separate lines?

I am currently working on a mock-up website for a school project. For this project, I am developing a products page where I intend to showcase the items available for sale. Although I managed to successfully copy a template from w3schools, my challenge lie ...

Choosing multiple options in a select tag leads to an error

I am facing an issue with my array and select multiple fields. I want all the select options to be automatically selected using the array ID when the file is loaded. Here is my array: Array( [0] => 3 [1] => 5 [2] => 9 ) This is what my select ...

Can simply adding Bootstrap CDN make a website responsive?

Is Bootstrap truly self-sufficient when it comes to responsive design, or do custom webpages utilizing Bootstrap require additional responsive instructions? If I incorporate the Bootstrap CDN and utilize its built-in components, can I assume the webpage ...

Removing Bootstrap Styles in Angular Single Page Applications

Currently, I am in the process of customizing the styles for an ASP.Net Core 2.2 Angular SPA. Upon examination, I noticed that a specific file webpack:///./node_modules/bootstrap/scss/_reboot.scss is being generated at runtime. To take control of the styl ...

Alpha 4.0.3 Bootstrap Carousel with Shadow

Hello there, I've been tinkering with the bootstrap website and I'm looking to add an inset shadow effect to the carousel. Here's a snippet of the HTML: <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"& ...

Div with sidebar that sticks

I am currently working on setting up a website with a sticky sidebar. If you would like to see the page, click this link: On a specific subpage of the site, I am attempting to make an image Validator sticky, but unfortunately, it's not functioning a ...

Steps for including a header and footer with page numbers in an HTML page without disrupting the rest of the content when printing

When I print a page with a table that spans multiple pages, I want to ensure that my header and footer are included on every page. The code I've tried so far has treated the entire content as one continuous page. How can I achieve this? ...

What is the best way to give this CSS button a "highlight" effect when it is clicked using either CSS3 or JavaScript?

In the HTML page, I have two buttons implemented with the following code: <!-- Button for WIFI projects: --> <a title="WIFI" href="javascript: void(0)" id="showWifi_${item.index}" class="showWifi"> <div class="news_box news_box_01 hvr-u ...

Switching Bootstrap Navbar Active State with JavaScript

I have encountered an issue with using the "active" class on my navbar navigation items in Bootstrap 4. When I click on the links, the active state does not switch as intended. I have tried incorporating JavaScript solutions from similar questions but have ...

Steps for generating a div, link, and image that links to another image using Javascript

Hey there, I have a cool picture to share with you! <img src="cards.png" id="img"> <!--CARD PICTURE--> Check out what I want to do with it: <div class="container_img"> <img src="cards.png" id="img"> <!--CARD PICTURE--> ...

Setting a fixed row height for Material-UI tables in ReactJS, even when the content is long

I'm currently working on a listing component using the material UI table in ReactJS. Within this table, I have a ResumeUrl field that can span over 3 or 4 lines, but I need to limit it to just 2 lines with the rest of the content being represented by ...

Using an image as an onclick trigger for a JavaScript function

I am working on a registration page as part of my university project where users can create an account and store their information in a MySQL database. One feature I'm implementing is the ability for users to select an avatar picture. Below is the co ...

What could be the reason for Selenium refusing to accept dynamic variables in this specific function?

What is the reason for the difference in behavior between these two code snippets? monday_div = driver.find_element(By.XPATH, '//*[@id="GXPMonday"]') And why does this one not work as expected? weekdays = ['Monday', 'Tue ...

having difficulty retrieving the initial selected value of a dropdown using selenium

Situation 1: On the screen, there are two fields named district and territory. Some users have a default value already selected in these fields, with the drop down disabled. Below is the code snippet for reference. <select id="abcd" name="xyz" clas ...

"Use jQuery to select all the cells in a row except for the

I found a visually appealing table layout that looks like this : https://i.stack.imgur.com/oRxYP.png What caught my attention is how clicking on a row selects the entire row. Take the example in the image above, where the second row is highlighted upon s ...