Support » Theme: Untitled » How to align nav menu to bottom?

  • Resolved pyspilf

    (@pyspilf)


    I have modified the site title font and size to 1.5em, and now the menu items to the right are out of vertical alignment with respect to the title.

    I have been trying various combinations of css to align the menu items to the bottom of the masthead but I can’t. I managed to change color and font, but not vertical alignment…

    Any assistance would be greatly appreciated.

    The site is http://perceptualview.com

    Thanks!

    Reply

Viewing 5 replies - 1 through 5 (of 5 total)
  • Updated original post as per email request, to include site url.

    Moderator Kathryn

    (@zoonini)

    Automattic Happiness Engineer

    Try something like this:

    .main-navigation a {
         margin-top: 15px;
    }

    On a large screen, that looks like this:

    Perceptual View World Through A Lens 1

    You can adjust the value as you like.

    Kathryn,

    thanks a lot, that worked. What a simple solution 🙂

    I hadn’t thought of that, was trying to get vertical-align to work… just for learning purposes, any idea why it wasn’t working?

    Cheers!

    Moderator Kathryn

    (@zoonini)

    Automattic Happiness Engineer

    Glad that did the trick!

    just for learning purposes, any idea why it wasn’t working?

    “The vertical-align CSS property specifies the vertical alignment of an inline or table-cell box.”

    https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align

    … but the element main-navigation a is neither inline nor table-cell, it’s set as a block-level element in the original stylesheet:

    .main-navigation a {
        color: #999;
        display: block;
        font-size: 0.6em;
        font-weight: bold;
        padding: 9px 0;
        text-decoration: none;
    }

    Great, point noted, thanks!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘How to align nav menu to bottom?’ is closed to new replies.