Highlighted

Navigation Bar Help

New Here ,
Mar 08, 2020

Copy link to clipboard

Copied

nav bar help.JPG

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!

 

Topics

How to

Views

155

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Navigation Bar Help

New Here ,
Mar 08, 2020

Copy link to clipboard

Copied

nav bar help.JPG

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!

 

Topics

How to

Views

156

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Adobe Community Professional ,
Mar 08, 2020

Copy link to clipboard

Copied

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, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
LEGEND ,
Mar 08, 2020

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Adobe Community Professional ,
Mar 08, 2020

Copy link to clipboard

Copied

A centered navbar with Bootstrap.

 

image.png

 

<!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, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...