Navigation Bar Help

Report · Mar 08, 2020

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!

Report · Mar 08, 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}

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

</header>

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

</footer>

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Mar 08, 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 & 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>

</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.

Report · Mar 08, 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 & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Adobe Community

Navigation Bar Help