How to align nav menu to bottom?

  • Resolved pyspilf

    (@pyspilf)


    9 years, 5 months ago

    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 https://perceptualview.com

    Thanks!

    Reply

Viewing 5 replies - 1 through 5 (of 5 total)
  • Thread Starter pyspilf

    (@pyspilf)

    Updated original post as per email request, to include site url.

    Moderator Kathryn Presner

    (@zoonini)

    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.

    Thread Starter pyspilf

    (@pyspilf)

    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 Presner

    (@zoonini)

    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;
}
    Thread Starter pyspilf

    (@pyspilf)

    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.