Question

I am trying to centre my navbar, after my screen resizes to a smaller size. I have made sure that my class containing my navigation: .menu has the following

display: 
inline-block; 
margin: 0px auto;

It still doesn't centre...

However, my logo contained in the div above, has the same properties and it is able to centre when the screen resizes.

My menu HTML

<nav class="navbar">
<div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="offcanvas" data-target=".sidebar-nav">
        <span class="fa fa-bars"> </span>
    </button>
    <a href="javascript:void(0)" class="navbar-brand logo-top"> </a>
</div>
<div class="sidebar-offcanvas sidebar-nav" role="navigation">
    <ul class="menu">
        <li class="active"><a href=“#A" data-section=“A”>A</a></li>
        <li><a href=“#B" data-section=“B”>B</a></li>
        <li><a href=“#C" data-section=“C”>C</a></li>
        <li><a href=“#D" data-section=“D”>D</a></li>
        <li><a href=“#E" data-section=“E”>E</a></li>
    </ul>
</div>
</nav>

Can anybody give me some insight?

Answer 1

display: inline-block; needs text-align: center; on the parent element for it to center like you're thinking because it's an inline element.

Instead, use display: block; margin: 0px auto;. You'll also need to set the width if it's not all the way across.

Examples

centering a navbar when screen resizes

1 个答案: