Skip to main content
K
krogers0032
Participant
March 8, 2020
Question

Navigation Bar Help

  • March 8, 2020
  • 3 replies
  • 338 views

I am creating a website for school. I am having the hardest time with the navigation bar. I am trying to center all of the links. You can see in each box, they are left aligned. I have tried everything in the CSS designer to move them, but nothing seems to work! Please help!

 

Also, while I'm on the link topic, how do I create a seperate set of styling for other links on my page? When I try to link an image and a title to the image, it uses the same styling format as the navigation bar links. 

 

Any help with this would be amazing! Thanks in advance!

 

This topic has been closed for replies.

3 replies

Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
March 8, 2020

A centered navbar with Bootstrap.

 

 

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap 4 Centered Navbar</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>

<body>
<header class="text-center">
<h1>My Awesome Website</h1>
<h3>Some Pithy Slogan</h3>
</header>
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mynavbar" aria-controls="mynavbar" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
<div class="collapse navbar-collapse justify-content-md-center" id="mynavbar">
<ul class="navbar-nav">
<li class="nav-item active"> <a class="nav-link" href="#">Centered nav <span class="sr-only">(current)</span></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="#">Link</a> </li>
<li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="https://example.com" id="mydropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="mydropdown"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div>
</li>
</ul>
</div>
</nav>


<!--Supporting scripts. First jQuery, then popper, then Bootstrap JS--> 

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>
Nancy O'Shea— Product User & Community Expert
O
osgood_
Legend
March 8, 2020

Hi, posting images does not provide enough information for any of the contributors here to give you any real advice. The answer lies within your code.

 

The example code below may help:

 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Navigation</title>
<style>
.main-nav {
display: flex;
justify-content: center;
background-color: #465ec0;
font-family: helvetica, sans-serif;
font-size: 14px;
}
.main-nav li {
list-style: none;
}
.main-nav li a {
display: block;
padding: 20px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
color: #c7d4e5;
}
.main-nav li a:hover {
background-color: #c7d4e5;
color: #465ec0;
}
</style>
</head>
<body>
<nav>
<ul class="main-nav">
<li><a href="#">Home</a></li>
<li><a href="#">Why Rescue</a></li>
<li><a href="#">Shelters &amp; Rescues</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
</body>
</html>

 

 

 

In reference to your second point about creating different link styles - you would give the container the links are in a class name and 'specifically target' the links within that container.

 

Example:

 

<div class="container1">

 

<!-- your links go here -->

 

</div>

 

 

 

<div class="container2">

 

<!-- your links go here -->

 

</div>

 

 

Then you would use css to 'target' the links in each specific container

 

.container1 a {

color: white;

background-color: red;

}

 

.container2 a {

color: yellow;

background-color: purple

}

 

You can give your containers any class name you like.

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    March 8, 2020

    1. Please show us your HTML and CSS code for the menu. 

     

    2. Be more specific with CSS selector names.  For example, links inside the header and footer could be expressed in your CSS like this.

     

    header a {color:blue}

    footer a {color: yellow}

     

    <header>

    <a href="#">Header link</a>

    </header>

     

    <footer>

    <a href="#">Footer link</a>

    </footer>

     

    Nancy O'Shea— Product User & Community Expert
    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices