Align text in Bootstrap navbar menu

Asked

Viewed 916 times

0

Hello, I’m not able to align on the right the clickable texts of my menu with Bootstrap.

Here is the menu code in HTML:

	<span class="menuresponsivo">
		<nav class="navbar navbar-expand-lg navbar-light bg-light bg-transparent">
			<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
				<span class="navbar-toggler-icon"></span>
			</button>
			<div class="collapse navbar-collapse" id="navbarNav">
				<ul class="navbar-nav">
					<li class="nav-item">
						<a class="nav-link" href="#" style="color:white; ">Sobre nós</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#" style="color:white; ">Serviços</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#" style="color:white; ">Contato</a>
					</li>
				</ul>
			</div>
		</nav>
	</span>

Here is the css of the span tag I created, this tag was created to define fonts, margins, etc:

.menuresponsivo{
  position: absolute;
  width: 100%;
  font-family: 'Open Sans', sans-serif;
  margin-top: 1%;
  margin-right: 2%;
  
}

And my menu is like in the image below, what I want is to change the "About Us", "Services", and the "Contact" to the right. I’ve tried using the text-align: right; but it won’t.

inserir a descrição da imagem aqui

html5 css3 twitter-bootstrap bootstrap-4

2 answers

1

if you access the page of w3shools > bootstrap > navbar, you will find an example that by adding the "navbar right" class, navigation will be right aligned as desired!

class="nav navbar-nav navbar-right"

  • I tested by adding the navbar-right in each menu class, one by one, and it didn’t work.

  • Say Igor, I was a little intrigued that it didn’t work so I saved the test on codepen and using Bootstrap 3.3.7. Isn’t that what you wanted? Look at the class of the "ul" <ul class="nav navbar-nav navbar-right">

1


Dude you can align these elements right by simply putting one margin-left:auto;, for this use the native BS class ml-auto

I put a red background just to make it easier to visualize, but you can put the style you want.

inserir a descrição da imagem aqui

Follow the image code above

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8" />
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css" />
<link rel="stylesheet" type="text/css" media="screen" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
<style>
  .menuresponsivo {
    position: absolute;
    width: 100%;
    font-family: 'Open Sans', sans-serif;
    margin-top: 1%;
    margin-right: 2%;

  }
</style>
</head>

<body>

  <header class="menuresponsivo">
    <nav class="navbar navbar-expand-lg navbar-light  bg-danger">
      <button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse ml-auto" id="navbarNav">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item ml-auto">
            <a class="nav-link" href="#" style="color:white; ">Sobre nós</a>
          </li>
          <li class="nav-item ml-auto">
            <a class="nav-link" href="#" style="color:white; ">Serviços</a>
          </li>
          <li class="nav-item ml-auto">
            <a class="nav-link" href="#" style="color:white; ">Contato</a>
          </li>
        </ul>
      </div>
    </nav>
  </header>

  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
</body>

</html>

Browser other questions tagged html5 css3 twitter-bootstrap bootstrap-4

You are not signed in. Login or sign up in order to post.