CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Kyle Schmelzer
Kyle Schmelzer

Reputation: 153

I cant override the bootstrap in nav bar

I found a few other posts, but either the bootstrap code is outdated or im not implementing it incorrectly.

Simply put, i want the "bombers hockey" to sit on the left, and the links to be on the right of the nav bar. HTML -

* {
  margin: 0;
  padding: 0;
  border: none;
}

img {
  max-width: 100%;
}

ul li .navbar-right {
  float: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>

<body>
  <div class="container">
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <a class="navbar-brand" href="index.html">Bombers Hockey</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 mr-auto">
          <li class="nav-item active">
            <a class="nav-link navbar-right" href="index.html">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link navbar-right" href="sched.html">Schedule</a>
          </li>
          <li class="nav-item">
            <a class="nav-link navbar-right" href="stats.html">Stats</a>
          </li>
          <li class="nav-item">
            <a class="nav-link navbar-right" href="pics.html">Pictures</a>
          </li>
        </ul>
      </div>
    </nav>
    <div class="container">
      <img src="pics/jerseys.jpg">
    </div>
  </div>
</body>

I tried targeting it multiple ways. li, ul, .navbar-right, pull-right, ul li a, etc. nothing moves those links.

Upvotes: 0

Views: 466

Answers (2)

Phani Kumar M
Phani Kumar M

Reputation: 4590

You just need to change the class mr-auto to ml-auto w-100 justify-content-end to the ul element and that should align the links to the right. Other than that, there is no change to the HTML markup which you have written.

Hope the below code helps (PS: Didn't notice that you are using Bootstrap 4 beta in my earlier response)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>

<style type="text/css">
	* {
		margin: 0;
		padding: 0;
		border: none;
	}

	img { max-width: 100%; }
</style>

<div class="container">
	<nav class="navbar navbar-expand-lg navbar-light bg-light">
		<a class="navbar-brand" href="index.html">Bombers Hockey</a>
		<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown"
			aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
			<span class="navbar-toggler-icon"></span>
		</button>
		<div id="navbarNavDropdown" class="navbar-collapse collapse">
			<ul class="nav navbar-nav ml-auto w-100 justify-content-end">
				<li class="nav-item active">
					<a class="nav-link navbar-right" href="index.html">Home <span class="sr-only">(current)</span></a>
				</li>
				<li class="nav-item">
					<a class="nav-link navbar-right" href="sched.html">Schedule</a>
				</li>
				<li class="nav-item">
					<a class="nav-link navbar-right" href="stats.html">Stats</a>
				</li>
				<li class="nav-item">
					<a class="nav-link navbar-right" href="pics.html">Pictures</a>
				</li>
			</ul>
		</div>
	</nav>
</div>

Upvotes: 1

ankita patel
ankita patel

Reputation: 4251

Please check in full page snippet code.

* {
  margin: 0;
  padding: 0;
  border: none;
}

img {
  max-width: 100%;
}

.navbar .navbar-collapse {  
  flex-basis: auto;
}
@media screen and (max-width:991px){
.navbar .navbar-collapse {
  flex-basis: 100%;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>


<body>
  <div class="container">
    <nav class="navbar navbar-expand-lg navbar-light bg-light justify-content-between">
      <a class="navbar-brand" href="index.html">Bombers Hockey</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 mr-auto">
          <li class="nav-item active">
            <a class="nav-link navbar-right" href="index.html">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link navbar-right" href="sched.html">Schedule</a>
          </li>
          <li class="nav-item">
            <a class="nav-link navbar-right" href="stats.html">Stats</a>
          </li>
          <li class="nav-item">
            <a class="nav-link navbar-right" href="pics.html">Pictures</a>
          </li>
        </ul>
      </div>
    </nav>
    <div class="container">
      <img src="pics/jerseys.jpg">
    </div>
  </div>
</body>

Upvotes: 1

Related Questions