CODEWITHSUNDEEP
htmlcssweb-deployment
wizard
wizard

Reputation: 49

How can i make the navbar menu options to move in the right side?

Kindly help and let me know where am i making the mistake as i can not make the options in the navbar go into the right side. Here i am sharing the code.

<div>
        <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top" style="padding-left: 40px; padding-right: 40px;">
            
            <div style="float: left;">
                <a class="navbar-brand" href="homePage.php">Job Portal</a>
            </div>
            
            <div class="topnav-right" style="float: right;">
                <a href="homePage.php">
                    <button class="btn btn-outline-success" type="button" >
                        Home
                    </button>
                </a>
                
                <a href="signinPageOfJobSeekers.php">   
                    <button class="btn btn-outline-success" type="button">
                        Sign In or Sign up
                    </button>
                </a>    

                <button class="btn btn-outline-success" type="button">
                    Contact Us
                </button>

                <?php if(!empty($_SESSION['userName'])){ ?>
                        <a href="logOut.php">
                            <button class="btn btn-outline-success" type="button">
                                Log Out
                            </button>
                        </a>
                
                <?php   } ?>

            </div>
                
        </nav>

    </div>

Upvotes: 1

Views: 217

Answers (2)

Georgi B. Nikolov
Georgi B. Nikolov

Reputation: 998

Your code is not enough to give you a perfect solution. However, here is my shot:

I assume that the wrapper container <div> ... </div> you have spans 100% of the viewport width? If this is the case, you can add the following style attribute:

<div style="display: flex; justify-content: flex-end;">
   <nav>
      // rest of the HTML code in your example
   </nav>
</div>

Of course, for a cleaner solution, instead of adding an inline style attribute, you can add a CSS class and style it in a separate stylesheet file or style tag in your document <head>:

<div class="nav-wrapper">
   <nav>
      // rest of the HTML code in your example
   </nav>
</div>

and then in your CSS declarations

.navWrapper {
  display: flex;
  justify-content: flex-end;
}

Alternative solution

If you are okay with your navigation overlapping the rest of the page content, you can always position: fix it. This way it would be taken out of the document flow and overlayed on top of the other HTML elements on your page. Here is the CSS needed:

.nav-wrapper {
  position: fixed;
  top: 0px;
  right: 0px;
  z-index: 999; // <- increase this value if any elements are on top of your nav
}

Upvotes: 2

ekrenzin
ekrenzin

Reputation: 407

Have you considered using a flex box? https://www.youtube.com/watch?v=K74l26pE4YA Flex box is super useful for things like positioning and layout of items in a list. Check out some of the ways you can justify content: https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content

Also, each individual, item can be aligned with align-self.

It's a fairly powerful way or organizing content. We can't see all of your css at the time of answering this question, but I'd take a look at the first video if you aren't already using a flexbox or to see how it works if you have a bug with one. It might work for you in this case!

Upvotes: 1

Related Questions