Archived topic

Main Menu positioning + wpml

5 replies · Started by Matthias on June 30, 2022

Viewing posts 1–6 of 6

June 30, 2022 at 3:41 am #2269005

Hi there,

i couldnt find any settings to adjust the top/bottom positioning of the main menu (nor a solution by searching this forum.

Currently/by default the menu is aligned in the middle of the header - same as the logo.
Is there a way to position the menu entries more to the bottom/lower ?

I designed (thx to your help) a language switcher with wpml. Is there a way to position that switcher on top of the menu (right aligned) - and maybe use a font 2-4px smaller?

Something like:
--------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------
Logo----------------------------------------------------------------------EN|DE|ES---
Logo-------------------------------------------------------------------------------------------
Logo--------------------MenuEntry1 MenuEntry2 Menuentry3---
--------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------

June 30, 2022 at 4:20 am #2269032

Hi there,

1. You can add this CSS:

@media(min-width: 769px) {
    nav.main-navigation .inside-navigation {
        align-items: flex-end;
    }
}

1.1 Then adjust the Desktop Menu Item Line Height in Customizer > Layout > Primary Navigation.

2. With your current set-up, no. As it would require absolute positioning of menu items, and that would break your design.

June 30, 2022 at 7:45 am #2269200

ok thx - you cant have it all.

then another solution:
how can i add some more space between the menu and the language switcher?
And: can i use a different (smaller) font size for the switcher?

June 30, 2022 at 10:10 am #2269510

how can i add some more space between the menu and the language switcher?

You can add this:

@media (min-width: 769px) {
    li#menu-item-wpml-ls-24-en {
        padding-left: 30px;
    }
}

And: can i use a different (smaller) font size for the switcher?

YES.

Try this:

li.wpml-ls-item a {
    font-size: 14px;
}

July 4, 2022 at 1:35 am #2272399

thx a lot - looks good that way.

July 4, 2022 at 9:48 am #2272951

You are welcome :)

This archived topic is closed to new replies.

Start building better websites today.