Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • September 4, 2019 at 11:01 am #1133763
    KatrienW

    Hiya team Enfold

    I’m currently working on a new client project who needs a website for an equestrian center. They asked me to create a kind of ‘floating’ or ‘detached’ menu, and showed me the website in the private content as an example. Is it possible to achieve this with Enfold?

    As you can see on the example website, the menu overlaps the content of the pages, whereas with Enfold the menu is always at the top of the page, followed by your content. I know that I can choose the Transparent menu option, but since that’s not really like the example I would call that plan B.

    Thanks in advance!

    PS: The menu can also be sticky (like on the example website) when you scroll down.

    September 4, 2019 at 8:32 pm #1134074
    Victoria

    Hey KatrienW,

    Well, yes in Enfold, it’s the Transparent menu option that you can use or look for a plugin that makes such a menu.

    Best regards,
    Victoria

    September 5, 2019 at 11:27 am #1134330
    KatrienW

    Hi Victoria, do you happen to know such a plugin? I found several menu plugins, but I’m not sure if they can achieve the result I’m aiming for and I don’t really have time for trial and error. The transparent menu is able to put the menu items over content indeed. But is there a way to give the menu items a kind of ‘boxed’ look? You know, a colored ‘box’ behind each item so that it kind of looks like the example site?

    September 6, 2019 at 6:47 pm #1135065
    Victoria

    Hi KatrienW,

    Could you please give us a link to your website, we need more context to be able to help you.

    Best regards,
    Victoria

    September 10, 2019 at 1:39 pm #1136531
    KatrienW

    Hi Victoria

    Sure, check the link in the private content. :)

    September 10, 2019 at 7:47 pm #1136742
    Victoria

    Hi KatrienW,

    Please try this code, but it needs to be adjusted further

    
.av-main-nav-wrap ul {
    display: block;
    min-height: 150px;
    background-color: #fff;
}

    Best regards,
    Victoria

    September 11, 2019 at 8:26 am #1136924
    KatrienW

    Hi Victoria

    Great, it’s getting there. Some changes I’d still need would be:
    – Is there a way to put the logo in the block as well?
    – And can you also make the block disappear when you scroll down? When you scroll down now the block still shows and I’d love for it to go away as soon as the transparent menu transforms into the normal menu.

    Thanks again!

    September 11, 2019 at 7:14 pm #1137207
    Victoria

    Hi KatrienW,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
#top #header .inner-container {
      background-color: #fff;
}
#top #header.header-scrolled .inner-container,
#top #header.header-scrolled-full .inner-container {
      background-color: transparent;
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    September 12, 2019 at 10:25 am #1137447
    KatrienW

    Thanks Victoria, that’s perfect!

    September 12, 2019 at 9:42 pm #1137670
    Jordan Shannon

    Hi,

    I’m glad this was resolved. If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Floating/detached main menu’ is closed to new replies.