Tagged: 

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • January 25, 2024 at 10:15 am #1431987
    Bernd

    Hi,

    I am looking for a solution to align the menu-items in header at the bottom instead of center.

    The suggested solutions with CSS (line-height or padding-top) in other similar topics aren’t very useful, if you use a shrinking header. Because as soon as you scroll, the menu-items are moving out from the header. And they are back again in the header as soon as the “header-scrolled” class is added.

    Is there a solution to modify the JS, which adjust the line-height of the menu-items while scrolling with the shrinking header?

    Regards,
    Bernd

    January 26, 2024 at 4:37 am #1432088
    Nikko

    Hi Bernd,

    Have you tried changing Menu And Logo Position to Logo Left, Menu below? in Enfold > Header > Header Layout.
    That setup should not hide the menu items when you scroll down the page.

    Best regards,
    Nikko

    January 26, 2024 at 1:22 pm #1432130
    Guenni007

    can your try in quick css:

    @media screen and (min-width:1226px) {  
  #top #header .av-main-nav > li > a {
    line-height: unset !important;
    height: unset !important;
  }
  #top div.avia-menu {
    height: 100%;
  }
  #top #avia-menu {
    position: relative;
    top: calc(100% - 35px)
  }
}
    January 26, 2024 at 2:38 pm #1432138
    Bernd

    Hi Nikko
    Yes, but that’s not what I was looking for ;-)
    Regards
    Bernd

    January 26, 2024 at 2:39 pm #1432139
    Bernd

    Hi Guenni007
    Thanks a lot. This works :-)
    This topic can be closed.
    Regards
    Bernd

    January 26, 2024 at 4:14 pm #1432156
    Rikard

    Hi,

    Thanks for the update, we’ll close this thread for now then. Please open a new thread if you should have any further questions or problems.

    Best regards,
    Rikard

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Align Menu on the bottom of header instead of center’ is closed to new replies.