Reposition the navbar nav to the top right corner of my website using Boostrap

I'm completely new to this subject.

Currently, I've been following an online tutorial on HTML/CSS/Bootstrap.

One thing I want to do is move the navbar to the top right of the page, like what you see in the image below. I manually added a mockup of how I expect it to look:

https://i.sstatic.net/Qd7cA.jpg

However, instead of appearing on the right side where I want it, it's actually showing up on the left, right above the content as shown...

After doing some research on my own, I found that in order to fix it, I need to add the following code:

 <ul class="navbar-nav mr-auto">

Inside the existing code:

  <ul class="navbar-nav">

But for some reason, it's not working. Any idea what could be causing the issue?

Here is the code snippet I am currently using:

 * {
        margin: 0;
        padding: 0;
    }
    
    body {
        font-family: sans-serif;
    }
    
    #nav-bar {
        position: sticky;
        top: 0;
        z-index: 10;
    }
    
    <!-- Rest of the CSS code and HTML structure follows -->

htmlcssbootstrap-4layoutfrontend

Answer №1

to resolve that issue I must include mr-auto

In reality, the correct approach is to adjust the left margin to auto in order to utilize all available space and shift the content completely to the right. However, with Bootstrap 5, "Horizontal direction specific variables, utilities, and mixins have all been renamed to use logical properties like those found in flexbox layouts—e.g., start and end instead of left and right.

Therefore, you should utilize the class ms-auto to set margin-start: auto

<ul class="navbar-nav ms-auto">


* {
        margin: 0;
        padding: 0;
    }
    
    body {
        font-family: sans-serif;
    }
    
    #nav-bar {
        position: sticky;
        top: 0;
        z-index: 10;
    }
    
    .navbar {
         background-image: linear-gradient(to right, #a517ba, #5f1782);
        padding: 0 !important;
        /* Remove flex-direction: column; */
    }
    
    .navbar-brand img {
        height: 40px;
        padding-left: 20px;
    }
    
    .navbar-brand li {
        padding: 0 10px;
    }
    
    .navbar-brand li a {
        color: #FFD166 !important;
        font-weight: 600;
        text-align: left;
    }
    
    .fa-bars {
        color: #FFD166;
        font-size: 30px !important;
    }
    
    .navbar-toggler {
        outline: none !important;
    }
    
    #banner {
       background-image: linear-gradient(to right, #a517ba, #5f1782);
       color: #fff;
       padding-top: 5%;
    }
    
    .promo-title {
      font-size: 40px;
      font-weight: 600;
      margin-top: 100px;
    }
    
    .play-btn {
     width: 45px;
     margin: 20px;
    }
    
    #banner a {
     color: #fff;
     text-decoration: none;
    }
<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>Nome</title>
        <link rel="stylesheet" href="style.css">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8fede0e0fbfcfbfdeeffcfbaa1bfa1bd">[email protected]</a>/dist/css/bootstrap.min.css">
        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8eece1e1fafdfafceffecebaa0bea0be">[email protected]</a>/dist/js/bootstrap.min.js"></script>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6d0b0203190c1a081e020008400b1f08082d5b435f435c">[email protected]</a>/css/fontawesome.min.css">
    </head>
    
    <body>
    
        <section id="nav-bar">
            <nav class="navbar navbar-expand-lg navbar-light" style="background-color: #EFEFEF;">
                <div class="container-fluid">
                    <a class="navbar-brand" href="#"><img src="https://picsum.photos/400"></a>
                    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
                        aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                        <i class="fa fa-bars"></i>
                    </button>
                    <div class="collapse navbar-collapse" id="navbarNav">
                        <ul class="navbar-nav ms-auto">
                            <li class="nav-item">
                                <a class="nav-link" href="#" style="color: #FFD166;">HOME</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#" style="color: #FFD166;">SERVICES</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#" style="color: #FFD166;">ABOUT US</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#" style="color: #FFD166;">TESTIMONIALS</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#" style="color: #FFD166;">CONTACT</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>
        </section>
    
        <section id="banner">
            <div class="container">
                <div class="row">
                    <div class="col-md-6"></div>
    
                    <p class="promo-title">Esercizio Luglio 2023</p>
                    <p>Check the tutorials</p>
                    <a href="#"><img src="https://picsum.photos/400" class="play-btn">Watch Tutorials</a>
                    <div class="col-md-6 text-center">
                        
                        <img src="https://picsum.photos/400" class="image-fluid" style="width: 200px; float: left; margin-right: 20px;">
                    </div>
    
                </div>
            </div>
    
    
        </section>
    
    </body>
    
    </html>

Answer №2

Give This a Shot:


    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>Nome</title>
        <link rel="stylesheet" href="style.css">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="94f6fbfbe0e7e0e6f5e4d4a1baa4baa6">[email protected]</a>/dist/css/bootstrap.min.css">
        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b9dbd6d6cdcacdcbd8c9f98d97899789">[email protected]</a>/dist/js/bootstrap.min.js"></script>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f0969f9e84918795839f9d95dd96829595b0c6dec2dec1">[email protected]</a>/css/fontawesome.min.css">
    </head>
    
    <body>
    
        <section id="nav-bar">
            <nav class="navbar navbar-expand-lg navbar-light" style="background-color: #EFEFEF;">
                <div class="container-fluid">
                    <a class="navbar-brand" href="#"><img src="images/logo.png"></a>
                    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
                        aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                        <i class="fa fa-bars"></i>
                    </button>
                    <div class="collapse navbar-collapse justify-content-end" id="navbarNav">
                        <ul class="navbar-nav mr-auto">
                            <li class="nav-item">
                                <a class="nav-link" href="#" style="color: #FFD166;">HOME</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#" style="color: #FFD166;">SERVICES</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#" style="color: #FFD166;">ABOUT US</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#" style="color: #FFD166;">TESTIMONIALS</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#" style="color: #FFD166;">CONTACT</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>
        </section>
    
        <section id="banner">
            <div class="container">
                <div class="row">
                    <div class="col-md-6"></div>
    
                    <p class="promo-title">Exercise July 2023</p>
                    <p>Explore the tutorials</p>
                    <a href="#"><img src="images/play.png" class="play-btn">Watch Tutorials</a>
                    <div class="col-md-6 text-center">
                        
                        <img src="images/home2.png" class="image-fluid" style="width: 200px; float: left; margin-right: 20px;">
                    </div>
    
                </div>
            </div>
    
    
        </section>
    
    </body>
    
    </html>

Analyzing the Situation:

Given that your navbar elements were arranged in a flexbox, I tactically included justify-content-end to the container of the flexbox holding them.

In-depth Insight: https://getbootstrap.com/docs/4.0/utilities/flex/#justify-content

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

The width of the flexbox child item is too narrow for the content it contains

I am facing an issue with the Flexbox child element not aligning correctly with the content width. Here is the code snippet: https://i.sstatic.net/jtCnSuhF.png .pw-event-options { -webkit-box-flex: 0; -webkit-flex: 0 0 280px; -moz-box-flex: 0; ...

htmlcssflexbox

Creating a consistent height for Bootstrap 5 Carousel items with varying sizes

I am currently utilizing Bootstrap 5 carousel to display a collection of user-uploaded images that vary in height and width. I am seeking to create a carousel with responsive height and scaled/filled images. Below is the HTML + CSS code snippet I am using ...

htmlcsscarouselbootstrap-5

Achieving vertical alignment and stretching of subchild within a flexbox element

I am in the process of creating a mobile navigation menu using Flexbox. It will be a vertical menu that occupies 100% of the available height, with the navigation items evenly spaced and taking up the entire height. The structure I am using is ul>li> ...

htmlcssflexbox

In landscape mode on Safari for iOS, the final item in a vertical flexbox may be cut off

Describing my app: It is structured as a 3-row flexbox column. <div class="app" style="display: -webkit-flex; -webkit-flex-direction: column; -webkit-justify-content: space-around;"> <div class="question-header" style="-webkit-flex: 0 0 0;"&g ...

htmlioscsssafariflexbox

The process of making an image fill an entire div using Html and CSS

What is the best way to make an image fill an entire div using Html and CSS? ...

htmlcssmobile-website

What is the best way to prevent content from spilling over into the div on the right

I'm having trouble with a two column div where the text in the left column is overflowing into the right column. How can I prevent this? http://example.com <div id="wrapper-industry"> <div id="wrapper-form"> <div id="form_row"> ...

csshtml

is it possible to create cells within the <td> tag?

My table contains the following data: No Name Product Type Num of Units 1 ADA B112 3 Pcs 2 ADA B253 1 Pcs 3 ADA K23 6 Pcs 4 DUZK l1 10 Pcs 5 DUZK l5 10 Pcs 6 Naro NX 1 Pcs The SQL query I'm using is: $query = "SELECT *, GROUP_C ...

phphtmlsqlhtml-table

Creating a custom HTML table layout with both variable and fixed column widths, along with grouping headers

Is there a way to format an HTML table so that it appears like this: <- full page width -> <-20px->< dynamic ><-20px->< dynamic > +------------------+-------------------+ ¦ A ¦ B ...

htmlcsshtml-table

Wordpress form entry process

I've been tasked with redesigning a website for a client using Wordpress. The form submission was working flawlessly on the old static site, but it's now encountering issues in Wordpress. Within the php file in my theme's backend, I have th ...

formspostbootstrap-4

Adjusting the text size within the graphdracula library

I recently implemented a cool feature in my asp.net mvc4 application by adding a treeview using the graphdracula jQuery library. Here is a snippet of the code I used: <html> <head> <script type="text/javascript" src="~/Content/Scripts ...

jqueryasp.net.netcssasp.net-mvc-4

Utilizing jQuery to attach events to dynamically generated elements

I have a scenario where I am uploading multiple images and inserting them into specific div elements. These divs should toggle a class when clicked. Should I include the part of code that adds the onclick event inside the ajax success function? Your help i ...

javascriptjqueryhtmlajax

Button background must be grayscale, while the text should remain unaffected

I have a variety of buttons with different background images. My goal is to apply a grayscale filter to the backgrounds by default and remove the filter on hover, without affecting the color of the button text. Currently, when I apply the grayscale filter ...

cssbuttontextbackgroundgrayscale

Troubleshooting the problem of fast rotation and scrolling of text in the middle but slow movement at the end with

Currently, I am utilizing the jquery animate function for animating text while also aiming to rotate the text if a specific degree is passed. In order to achieve this, I have implemented the following code snippet: var leftCss = "-"+$('#mydiv'). ...

javascriptjqueryioscssanimation

Using HTML and CSS to implement a broadened perspective for a specific design

https://i.stack.imgur.com/ckQHa.png Hello, I am facing an issue with a UX design that is optimized for 1200px resolution width. However, when the HTML is loaded in a browser on a larger window resolution, there is a 200px gap on the right side. How can I ...

htmlcssreactjs

Accessing html form elements using jQuery

I'm having trouble extracting a form using jQuery and haven't been able to find a solution. I've tried several examples, but none of them display the form tags along with their attributes. Here is a sample fiddle that I've created: Sam ...

javascriptjqueryhtml

What is the best way to test the output of HTML code in a unit test scenario

I am new to web development and testing, taking it slow. I have a website with a button that reveals information when clicked. How can I create a test case to ensure that the displayed output is correct? I need to verify that the text appears on the scre ...

javascripthtmlreactjsunit-testingjestjs

"Error occurred: Unable to execute bgColor as a function" on HTML select onchange event

I am having an issue with my HTML switch that has an onchange tag triggering the JavaScript function bgColor with the argument this. However, every time I attempt to use this, I receive an error message: Uncaught TypeError: bgColor is not a function. Can a ...

javascriptjqueryhtml

The functionality of Laravel registration is currently being disrupted by hidden fields

Recently, I started using Laravel and encountered a problem with my registration form. In the form, there is a select dropdown refer here that contains two options - Faculty and Student. When a user selects Student, fields for grade and section should be ...

javascriptphphtmlcsslaravel

Designing a div with a proportional size amidst elements of fixed dimensions

I need help figuring out how to create a dynamically sized div based on the browser's height. I'm not sure where to start or how to approach this problem. The layout I have in mind includes a 50px high header, followed by the dynamic div and the ...

csshtml

What is the best way to include a parameter in the current URL in Django using Paginator?

After setting up a page to display database data, I added a paginator and a search bar to my website. When a user searches for something, the URL changes to include the search query like this: .../search/?q=xyz However, when paginating the search results ...

javascripthtmljquerydjangopagination