Center primary menu under site title

  • Resolved humancomputer

    (@humancomputer)


    7 years, 10 months ago

    Hi,

    How do I center the primary menu underneath the site title? I have figured out how to center it by looking in past forum posts (below), but am having trouble placing it below the site title.

    Code for centering site title:

    @media all and (min-width: 50em) {

  .menu-primary-container {
    text-align: center;
  }
  .menu-primary {
    float: none;
  }
}

    Can you help?

    Thank you!

Viewing 6 replies - 1 through 6 (of 6 total)

  • @humancomputer

    Please share a kink to your site

    Thread Starter humancomputer

    (@humancomputer)

    https://www.mindscribe.org

    • This reply was modified 7 years, 10 months ago by humancomputer.
    Theme Author Ben Sibley

    (@bensibley)

    Thanks for the link!

    In order to move the menu after the site title, the HTML in the header.php file needs to be reordered. This can be done with a “child theme.”

    I’ve put together a child theme for you that will do this. You can click here to download it. The apex-child.zip file can be uploaded via the Appearance menu just like a regular theme, and once activated, the menu will show below the site title.

    Thread Starter humancomputer

    (@humancomputer)

    Thank you, I appreciate it!

    The centering looks good, though now the body of the page is not centered with the title and menu. The home page itself has a centered text and centered image, so I think this misalignment is derived from the child theme. Let me know if there is anything I can do to fix this.

    And next, I would like to minimize the whitespace between the site title and the site menu, as it is currently significant.

    Finally, thank you for the child theme!

    Thread Starter humancomputer

    (@humancomputer)

    Fixed the alignment issue by re-customizing the layout (didn’t immediately realize that uploading the child theme would overwrite the customizations I had previously made to the parent theme.

    Thank you!

    Theme Author Ben Sibley

    (@bensibley)

    You’re welcome! Sorry for not mentioning the settings change with the new theme.

    This code will cut the space between the logo and menu in half:

    #title-container {
  margin-bottom: 1.5em;
}

    If you’d like to further reduce the space, you can change the “1.5em” value to “0”.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Center primary menu under site title’ is closed to new replies.