Archived topic

Vertical alignment of the menu

7 replies · Started by Raul on January 19, 2021

Viewing posts 1–8 of 8

January 19, 2021 at 12:34 am #1624556

Hi
My logo is in the left, the primary navigation (menu) in the right side and they are both vertical aligned in the middle. This is correct and it was supposed to look good. The problem is that my logo is a bit different and that's why I would need the menu to not be aligned in the middle but in the bottom.
How could I set the vertical alignment of the menu?
Thank you!

January 19, 2021 at 2:18 am #1624643

Hi there,

can you share a link to your site where i can see the layout ?

January 19, 2021 at 2:44 am #1624676

Here is the website: https://yeclar.ro/
It's under construction now.

January 19, 2021 at 3:49 am #1624760

Try this CSS:

@media(min-width: 769px) {
    .main-navigation .inside-navigation .main-nav>ul li a {
        line-height: 1em;
        padding-top: 50px;
        padding-bottom: 12px;
    }
}

So what its doing - the line-height of your menu items is set to 80px.
This CSS overwrites that height, first our new line-height 1em which is 18px ( the menu font size ), and then we just top and bottom padding to make up the difference in height ie. 18px + 50px + 12px = 80px.

Adjust the top and bottom padding to adjust the menu text vertical position.

January 19, 2021 at 4:44 am #1624805

Thank you very much! That works. Could you please be so kind and give me the CSS line for the sticky header too?

January 19, 2021 at 7:02 am #1625109

Updated the CSS above - it will apply to the normal and sticky nav now.

January 20, 2021 at 5:08 am #1626155

Thank you very much. Fantastic theme and support!

January 20, 2021 at 5:10 am #1626161

Glad to be of help!

This archived topic is closed to new replies.

Start building better websites today.