How to position menu on the right side using bootstrap

Hello everyone, as a newbie I have been struggling to align my navigation menu to the right while keeping the logo on the left side. I have tried multiple approaches without success. Currently, I am working with Bootstrap 4.7 and using the navbar code in HTML. I have experimented with various codes such as ms-auto, ml-auto, and justify-content-end in the ul class, but none of them seem to work. Could someone kindly assist me in resolving this issue? I have attached an image for reference https://i.sstatic.net/OpvWI.png.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>

    <!-- bootstrap -->
    <link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css">

    <!-- custom css -->
    <link rel="stylesheet" href="assets/css/style.css">

</head>
<body>
    <header>
        <div class="container-fluid grey">
            <div class="row">

                <div class="container pink">
                    <div class="row">

                        <div class="head-top pt-2">

                            <div class="col-md-6 pt-5">
                                <div class="logo">
                                    <img src="assets/images/logo.png" class="logo">

                                </div>
                            </div>


                            <div class="col-md-6 green">
                                <nav class="navbar navbar-expand-lg">

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

                                        <li class="nav-item">
                                            <a class="nav-link active" href="#">Active</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" href="#">Link</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" href="#">Link</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" href="#">Contact</a>
                                        </li>

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

                        </div>

                    </div>
                </div>


            </div>
        </div>
    </header>




    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" ></script>

    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8eece1e1fafdfafceffecebaa0b8a0be">[email protected]</a>/dist/js/bootstrap.bundle.min.js" ></script>
</body>
</html>


*{
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}

.logo{
    width: 50px;
}

.menu-icon{
    width: 30px;
}

.grey{
    background-color: #8B8B8B;
}

.pink{
    background-color: #EC8CBE;
}
.green{
    background-color: #65D790;
}

Answer №1

It seems like you may be unsure about how to structure the rows and columns in your navbar, so I decided to start fresh with a clean version of Bootstrap's 4.6.0 navbar.

If you prefer the menu items to align on the left side, simply switch the margin class on the unordered list from mr-auto to ml-auto.

Additionally, it is recommended to apply the active class to the list item rather than the link itself.

.bg-pink {
    background-color: #EC8CBE;
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6f0d00001b1c1b1b1e0c0d07130317">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5e3c31312a2d2a2c3f2e0e7e3e7fb34253125">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>


<nav class="navbar navbar-expand-lg navbar-light bg-pink">
    <div class="container-lg">
        <a class="navbar-brand" href="#"><img src="https://via.placeholder.com/60x40.png" class="logo"></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Active</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Contact</a>
                </li>
            </ul>

        </div>
    </div>
</nav>

I opted for using a container-lg for the nav content to ensure that the logo and menu don't stretch out too far on larger screens.

Answer №2

If you're looking to align the menu all the way to the right, next to the logo but sticking to the right side, I can help with that.

To achieve this effect, you can add the following CSS code snippet to your style.css file:

.pt-2 {
    display: flex;
}

.navbar-expand-lg {
    justify-content: flex-end;
}

Keep in mind that the menu might be slightly above the height of the logo. You can adjust this by either raising the logo or pushing down the menu.

If you decide to push down the menu using margins, I recommend using:

margin-top: 42px;

I hope this information proves helpful for you.

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

Resizable dimensions for the dark mode switch

My latest project involves creating a toggle button for switching between light and dark themes using CSS, HTML, and JavaScript: id("theme-btn").addEventListener("change", function() { if (this.checked) { qs(".box").setAttribute('style', ...

Is it possible to scroll only a portion of a div element without relying on absolute positioning and when the

HTML: <div class="block"> <div class="header">Some text</div> <div class="content"> <p> Unique content goes here. </p> <p> More unique content for demonstration ...

What makes Django forms the better choice over HTML forms?

Greetings! As a beginner in the world of Django, I am currently struggling to grasp the concept of Django forms. I find myself questioning the utility of Django forms when we already have the option to use HTML forms. Can someone please clarify this for ...

Using the PUT method in Node.js to set the ID

Need help with setting ID value from frontend apiRoutes.put('/intake', function(req, res) { Intake.findById({id, function(err, intake) { if (err) res.send(err); check : true; intake.save(function(err) { ...

What's the best way to add margin or padding to an SVG image within a v-app-bar

Seeking assistance with a seemingly simple question that can help enhance my understanding as I dive into using vue/vuetify for a new front end project. I am starting fresh and utilizing v-app-bar. Below is a snippet from my app.vue file: <template> ...

Every click will nudge the square to the right

I have a square that should move 100px to the right when clicked, but on the next click it moves back to the left. How can I resolve this issue? On JSFiddle, the code works fine. However, when I try to run it in Chrome, I get an error message: Cannot re ...

The JavaScript code is failing to retrieve the longitude and latitude of the location on a mobile browser

I am having an issue with my Javascript code not properly retrieving the longitude and latitude from the mobile Chrome browser. While this code works fine on laptop or desktop browsers, it seems to be failing on mobile devices: <script> if (nav ...

Include IE-specific stylesheet code in your Angular application (version 1.2)

I would like to implement conditional IE CSS for IE8 and IE9 in my Angular application. The approach I took was to add the specific CSS files directly in the index file as shown below: <!-- Application main stylesheet --> <link href="styles/them ...

The mat-table fails to populate with data retrieved from the rest service

I have successfully fetched an array from my REST service and displayed some information from the response on the page. However, I am facing issues populating my mat-table and I'm unsure of the cause. The mat-table was functioning properly in the past ...

Here is a helpful guide on updating dropdown values in real time by retrieving data from an SQL database

This feature allows users to select a package category from a dropdown menu. For example, selecting "Unifi" will display only Unifi packages, while selecting "Streamyx" will show only Streamyx packages. However, if I first select Unifi and then change to S ...

The background of the wrapper div refuses to expand beyond the original size of the browser window

I'm currently in the process of developing a website, focusing on establishing the fundamental structure of my design to facilitate the addition of content and allow for the dynamic expansion of the div based on the length of the content. Nevertheless ...

Unexpected behavior observed when animating CSS transform in IE

I am currently facing an issue with a CSS animation on my website that animates an arrow back and forth. The animation is working perfectly on all browsers except for Internet Explorer, where there seems to be a glitch causing the Y position of the arrow t ...

Is there a way to wrap the "#+ATTR_HTML" tags around the preview output of the "#+RESULTS" Source Block in Org-mode for Emacs?

Using plantuml in org works fine for me. However, I am looking to enhance it by automatically inserting some HTML tags just before the #+RESULTS output tag. This will help achieve a more visually appealing HTML output effect. Here's an example of my ...

Having trouble properly refreshing Bootstrap scrollspy that is spying on the <body> element

I've been looking at a post on Bootstrap's scrollspy component (found here). In my code, I initialize a new scrollspy to track the body element using: $("body").scrollspy({ offset: 25 }); As my code progresses, I make AJAX requests that add or ...

Refresh choices for the user interface selection menu

I've successfully mastered the art of redefining options for Webix ui.richselect/ui.combo. The technique involves: richselect.getList().clearAll(); richselect.getList().parse(options_data) Now, I'm facing a challenge with changing options fo ...

Converting JSP email text into HTML format with Spring's formatting features

Currently, I am working on implementing an email service using Spring. Users have the ability to input the email subject and body in a form and send the email successfully. However, there is an issue where line breaks and tabs entered by the user are not b ...

Place a drop-down menu inside the input box

Struggling with this issue, I've come across various messy solutions, but I'm determined to find a cleaner one. What I'm looking for is an input field that includes a dropdown selection on the left side. This is essentially what I have in m ...

Guide on retrieving HTML content from a URL and showing it in a div

I'm trying to retrieve the content of a URL and display it within a DIV element, but I'm struggling to achieve the desired result. Below is the code I'm using: index.js fetch('https://github.com/') .then(res => res.text()) ...

Explore our product gallery with just a simple hover

I am looking to design a product list page with a mouseover gallery similar to the one showcased on [this page][1]. I attempted to use a vertical carousel like the one illustrated in this Fiddle, but unfortunately, it does not function like Zalando and jc ...

Guide on transferring control from a successful jQuery event to an HTML form

I am currently using the following jQuery code to validate user details. $.ajax({ type: "POST", url: "Login", data:'uname='+encodeURIComponent(uname)+'&'+'pass='+encodeURIComponent(pass), ...