Navbar Menu placement

user_8661994 0
Viewed 460

I'm using a Bootstrap navbar and have customised it but when the responsive size moves to mobile the burger menu opens on the left side but I would like it on the right. Can anyone help?

http://stajniazkopyta.x10host.com/test.html

Html -

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/navbar.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lobster">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Caveat">
    <title>Stajnia Z Zopyta</title>
    <style>body {background-color: black;}</style>
</head>
<body>

    <nav class="navbar navbar-expand-sm navbar-dark bg-none">
            <button class="navbar-toggler navbar-toggler-right" 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>
                <a class="navbar-brand" href="#">Navbar</a>

                  <div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
                    <ul class="nav navbar-nav navbar-right">
                      <li class="nav-item active">
                        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                      </li>
                                    <li class="nav-item active nav-link-camps">
                                        <a class="nav-link" href="#">Camps</a>
                                    </li>
                                    <li class="nav-item active nav-link-sales">
                                        <a class="nav-link" href="#">Sales</a>
                                    </li>
                                    <li class="nav-item active nav-link-gallery">
                                        <a class="nav-link" href="#">Gallery</a>
                                    </li>
                                    <li class="nav-item active nav-link-contact">
                                        <a class="nav-link" href="#">Contact</a>
                                    </li>
                    </ul>

                  </div>
            </nav>

        <script src="js/jquery.min.js"></script>
        <script src="js/popper.min.js"></script>
        <script src="js/bootstrap.min.js"></script>        
    </body>
</html>

Css - 

.navbar{
    border-bottom: $lobster-yellow 3px solid;
}
bootstrap-4 css html
1 Answers

Just change the order of the navbar-brand and collapse button. In Bootstrap V4 for navbar, they have used display: flex; property. By using this content may align like a table-cell. When the device size below 768px, collapse menu gets visible, so the content aligns in order.

Another way is to apply flex-direction: row-reverse; to the navbar when it is below 768px using Media Queries. By this method, you are not needed to change the order from your code, which is in your question.

My Suggestion

My suggestion is to re-order the HTML lines as I give in the Updated Code. Because we don't need to add custom CSS to override the default Bootstrap framework.

Your Code

//Collapse Button

<button class="navbar-toggler navbar-toggler-right" 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>

//Nav brand
  <a class="navbar-brand" href="#">Navbar</a>

Updated Code

//Nav brand
      <a class="navbar-brand" href="#">Navbar</a>

//Collapse Button
<button class="navbar-toggler navbar-toggler-right" 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>

Image For Reference

I have changed the order of <code>button</code> and <code>a</code> tag

user_57463010
Related