Align menu right in bootstrap

0
votes

I'm newbie. I tried to move nav to the right and logo must stay in left side. I dont why I tried all ways. i am using bootstrap 4.7 and 4.7 nav bar code in html. I tried all code. e.g: ms-auto, ml-auto, justify-content-end in ul class, but still cann't success. Help me to sort out this problem. Please check attached screenshot.

<!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">

                                    <!-- <a class="navbar-brand" href="#"><img src="assets/images/logo.png" class="logo"></a> -->

                                    <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>
                                <!-- <img src="assets/images/menu.png" class="menu-icon"> -->
                            </div>





                            <!-- head-top -->
                        </div>

                    </div>
                    <!-- container -->
                </div>


            </div>
            <!-- container-fluid -->
        </div>
    </header>




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

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/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;
}
2
htmlcssbootstrap-4

2 Answers

1
votes

It’s not clear what you were trying to do with the rows and columns for your navbar, so I started with a clean copy of Bootstrap’s 4.6.0 navbar.

If you want the menu items to be on the left, change the margin class on the unordered list from mr-auto to ml-auto.

And it’s best to put the active class on the list item, not the link.

.bg-pink {
    background-color: #EC8CBE;
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/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 used a container-lg for the nav content so the logo and menu won't continue to spread out on larger screens.

1
votes

As I understand it, you want the menu all the way to the right - next to the logo, but sticking to the right side? Right?

Well, I achieved this by putting the following css into the style.css file:

.pt-2 {
    display: flex;
}

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

The menu will be a bit above the height level of the logo, but you can play around with that if you want. Either raise the logo a little, or push down the menu.

If you wanna push down the menu using margin, i found that

margin-top: 42px;

was the right amount of pixels.

Hope it helped.