Archived topic

How to vertically align floated right navigation to the bottom

4 replies · Started by Chux on June 10, 2020

Viewing posts 1–5 of 5

June 10, 2020 at 8:51 pm #1322970

Hi,

Question-1:
I have my navigation floated right and a site logo (no title) ... but I find that the navigation seems to line up with the top of the logo instead of the baseline of the logo. I don't use a secondary navigation.

How can I align the floated right primary navigation to the bottom ?

Question-2:
I played around with navigation as header, and I like it. However, it squeezed down the logo to a size too small, and I find no way to resize the logo to a bigger size. Playing around with the navigation item width doesn't seem to have any effect on the logo's size

If I can get this sorted, I might prefer it as a solution to the alignment I am seeing in question-1.

Thanks.

June 11, 2020 at 1:34 am #1323183

Hi there,

Option 1 requires some CSS like so:

@media(min-width: 769px) {
    .inside-header {
        display: flex;
        align-items: flex-end;
    }
    .site-logo {
        margin-right: auto;
    }
}

Option 2 - navigation as header, the size of the logo is defined by the Menu Item Height in Customizer > Layout > Primary Navigation.

June 13, 2020 at 10:23 pm #1326970

Thank you so very much. Sorry for the belated response ... been travelling.

I did try the navigation as header option, but adjusting the menu item height never changed it in a way I found satisfactory.

June 13, 2020 at 10:28 pm #1326973

Thanks again

June 14, 2020 at 6:08 am #1327280

You're welcome

This archived topic is closed to new replies.

Start building better websites today.