Skip to main content
Roopavathy
Roopavathy
Known Participant
August 5, 2022
Answered

center align menus

  • 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">

     

     

    3 replies

    O
    osgood_Correct answer
    Legend
    August 10, 2022
    @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">

     

     

    Roopavathy
    RoopavathyAuthor
    Known Participant
    August 12, 2022

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

     

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    August 5, 2022

    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
    BenPleysier
    Community Expert
    BenPleysierCommunity Expert
    Community Expert
    August 10, 2022
    quote

    Two block-level elements can't occupy the same space at the same time.


    By @Nancy OShea

     

    As in 

    DIV container

        DIV row

            DIV column

                H1

                P

    Are you implying that this is not possible?

    Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    August 10, 2022

    What people ask for isn't always what they need or want. Did anyone look at @Roopavathy's code or the code he posted in a previous topic?  It doesn't work because he doesn't use Bootstrap structure as intended.

     

    You can certainly nest <div> tags inside other <div> tags but they will NOT line up in a single row on mobile devices.

     

    To keep things simple, I treated <navbar and <header> as two stacked elements.  It works within the context of what was asked previously.  And the OP can reverse <navbar> & <header> order if desired. It still works.

     

    Nancy O'Shea— Product User & Community Expert
      Liam Dilley
      Liam Dilley
      Inspiring
      August 5, 2022

      Have you got a link to it or put up on a service the CSS as well please. Bit hard with just the HTML.

      But centering the navbar boostrap can be..

      http://jsfiddle.net/bdd9U/2/

      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices