Search code examples
csscentercentering

I am trying to center align the menu

I am a newbie in CSS. I am learning by playing with the code of a WordPress theme. Last time I posted this issue but I contracted covid and was hospitalized for more than two weeks. I have deleted the old question and broken the initial question into two parts. This is the first part. enter image description here

To remove the Site-Name on the left side. I used display: none.

<div id="header-left">
    
    <div id="hgroup" class="logo-disable">
        <h1 id="site-title">
            <a href="https://wp-themes.com/catch-kathmandu/" title="Catch Kathmandu" rel="home">Catch Kathmandu</a>
        </h1>
        <h2 id="site-description"> Catch Kathmandu Theme is a fully responsive WordPress theme that looks elegant on any devices.</h2>
    </div><!-- #hgroup -->
</div>


#header-left {
-webkit-text-size-adjust: 100%;
color: #404040;
line-height: 1.8;
text-rendering: optimizeLegibility;
word-wrap: break-word;
border: 0;
font-family: inherit;
font-size: 100%;
font-style: inherit;
font-weight: inherit;
margin: 0;
outline: 0;
padding: 0;
vertical-align: baseline;
float: left;
max-width: 100%;
display: none;
}

To center-align the menu on the right side.

<div id="header-right" class="header-sidebar widget-area">
                    <aside class="widget widget_nav_menu">
                        <div id="primary-menu-wrapper" class="menu-wrapper">
        <div class="menu-toggle-wrapper">
            <button id="menu-toggle" class="menu-toggle" aria-controls="main-menu" aria-expanded="false"><span class="menu-label">Menu</span></button>
        </div><!-- .menu-toggle-wrapper -->

        <div class="menu-inside-wrapper">
            <nav id="site-navigation" class="main-navigation" role="navigation" aria-label="Primary Menu" aria-expanded="false">
            <ul id="menu-primary-items" class="menu nav-menu"><li class="current-menu-item"><a href="https://wp-themes.com/catch-kathmandu/">Home</a></li><li class="page_item page-item-2"><a href="https://wp-themes.com/catch-kathmandu/?page_id=2">About</a></li><li class="page_item page-item-182"><a href="https://wp-themes.com/catch-kathmandu/?page_id=182">Home</a></li><li class="page_item page-item-46 page_item_has_children" aria-haspopup="true"><a href="https://wp-themes.com/catch-kathmandu/?page_id=46">Parent Page</a><button class="dropdown-toggle" aria-expanded="false"><span class="screen-reader-text">expand child menu</span></button><ul class="children"><li class="page_item page-item-49"><a href="https://wp-themes.com/catch-kathmandu/?page_id=49">Sub-page</a></li></ul></li></ul>                </nav><!-- .main-navigation -->
        </div>


#header-right {
-webkit-text-size-adjust: 100%;
color: #404040;
line-height: 1.8;
text-rendering: optimizeLegibility;
word-wrap: break-word;
border: 0;
font-family: inherit;
font-size: 100%;
font-style: inherit;
font-weight: inherit;
margin: 0;
outline: 0;
padding: 0;
vertical-align: baseline;
padding-top: 50px;
float: right;
margin-right: 33%;
}

I reached my center alignment by reducing the margin-right from 50% then to 33%. Though the sweet spot is between 32% to 33%.

I also tried center-align the menu with pixels(margin-right :400px).

The difference between both methods is visible when I reduce the screen size. 33% mostly remains center-align but the px changes the position of the menu, as the screen changes.

Is there any other way I could center the menu?

Solution

  • There are many ways to center items depending on their block type.

    You can use display flex on the parent and then add a justify-content: center to center the children items on the page horizontally, see flex axis - in basic concepts of flex for more info.

    Then you can use flex property on the children and can add a number to that property to tell CSS how much of the parents width that child will take up.

    For example if I set both to child elements to flex: 1 they will take up 50%, if there were three child elements all with a flex: 1, they would then take up 33% of their parents width. I can also place a percentage on the flex property as well => .header set flex: 60% and .nav-parent set flex: 40%, they will then take up their set percentages of the parents width.

    Furthermore I can add display: flex properties to the child elements as well to further center their contents, as I have done on the .menu class which is a child of the .nav-parent. These can then be further align and centered using the axis centering properties for flex, justify-content and align-items. The good thing is that these properties are dynamic in that they scale to fit browser sizes as well.

    .nav-section {
  display: flex;
  justify-content: center;
  font-family: sans-serif;
  align-items: center;
  padding: 1rem;
}

.header h1 {  
  line-height: 1px;
}

.header {  
  flex: 60%;
}

.nav-parent {
  flex: 40%;
}

.header span {
  font-size: .8rem;
  font-weight: 100;
  font-style: italic;
}

ul li {
  list-style: none;
}

ul li ~ li {
  margin-left: .5rem;
}

.btn {
  flex: 1;
  padding: .5rem 0;
  text-align: center;
}

.menu {
  display: flex;
  justify-content: center;
  color: #555;
  font-size: .8rem; 
}

.active {
  background: skyblue;
}
    <div class="nav-section">
  <div class="header">
    <h1>Catch Kathmandu</h1>
    <span>Catch Kathmandu Theme is a fully responsive WordPress theme that looks elegant on any device.</span>
  </div>
  <div class="nav-parent">
    <ul class="menu">
      <li class="home active btn">Home</li>
      <li class="about btn">About</li>
      <li class="contact btn">Contact</li>
      <li class="parent btn">Page</li>
    </ul>
  </div>

</div>