center align menus

Forum|Forum|3 years ago
August 5, 2022
3 replies
758 views

Dear all,

I want to align the horizontal menu in the centre of the header. Please help.

Kindly find the link below. Screenshot attached.

https://pastebin.com/embed_iframe/CAJrywnu

Thanks in advance.

This topic has been closed for replies.

Correct answer osgood_

@Roopavathy wrote:

I want to align the horizontal menu in the centre of the header. Please help.

Just add 'w-100' to the ul tag:

<ul class="navbar-nav mr-auto d-flex justify-content-center w-100">

O

osgood_Correct answer

Legend

@Roopavathy wrote:

I want to align the horizontal menu in the centre of the header. Please help.

Just add 'w-100' to the ul tag:

<ul class="navbar-nav mr-auto d-flex justify-content-center w-100">

RoopavathyAuthor

Known Participant

Thank you very much. And it looks good. This is what exactly I needed. Screenshot attached.

Nancy OShea

Community Expert

Navbar and Header are two separate elements. Two block-level elements can't occupy the same space at the same time. Decide which element you want on top.

Meanwhile, I put this together with Navbar/Search on top.

Mobile

Desktop

Code:

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

<!--Bootstrap 4.5 on CDN-->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" type="text/css">

<style>
.bg-primary {background-color:#38578c !important;}

header h1 {
font-family:fantasy, copperplate, papyrus; 
font-size:1.5rem;
}
</style>
</head>

<body class="bg-primary" style="padding-top:66px">

<nav class="navbar fixed-top navbar-expand-lg navbar-dark">
<a class="navbar-brand" href="#"><img src="images/bhc-logo.png" alt="logo" width="75" height="10"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent1" aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent1">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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="#" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown1">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-info my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<!--end navbar-->

<header class="container-fluid text-light">
<div class="row">

<div class="col-md-9">
<h1 class="p-1">BISHOP HEBER COLLEGE (Autonomous)</h1>
</div>

<div class="col-md-3">
<p class="p-1">Tiruchirappalli - 620017.</p>
</div>
</div>
</header>

<main class="container bg-light my-3 p-5">
<div class="row">
<div class="col-md-4">
<img class="img-fluid" src="https://dummyimage.com/600x300.jpg" alt="Placeholder">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam omnis voluptatem perferendis, unde consequuntur in natus error iste libero ea ipsam facilis nostrum mollitia modi quis ad labore aliquid esse! An ordinary
</p>
<p class="text-center">
<a href="https://example.com" class="btn-secondary btn-lg">Secondary</a>
</p>
</div>
<div class="col-md-4">
<img class="img-fluid" src="https://dummyimage.com/600x300.jpg" alt="Placeholder">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam omnis voluptatem perferendis, unde consequuntur in natus error iste libero ea ipsam facilis nostrum mollitia modi quis ad labore aliquid esse! An ordinary</p>
<p class="text-center">
<a href="https://example.com" class="btn-secondary btn-lg">Secondary</a>
</p>
</div>
<div class="col-md-4">
<img class="img-fluid" src="https://dummyimage.com/600x300.jpg" alt="Placeholder">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam omnis voluptatem perferendis, unde consequuntur in natus error iste libero ea ipsam facilis nostrum mollitia modi quis ad labore aliquid esse! An ordinary</p>
<p class="text-center">
<a href="https://example.com" class="btn-secondary btn-lg">Secondary</a>
</p>
</div>
</div>
</main>
<hr>
<footer class="container-fluid text-center text-light p-4">
<p>Some footer text here...</p>
</footer>

<!--Supporting scripts: first jQuery, then popper, then Bootstrap JS, etc...-->
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</body>
</html>

Hope that helps.

Nancy O'Shea— Product User & Community Expert