Do not manage to modify menu layout the way I want

How To
1

I am new to Bricks and building a website locally. What I am trying to achieve is to redo the menu behavior like on https://psychotherapie-kukowski.de, that means making a bottom border appear on hover. I have tried to get along but do not manage to. Can anyone help?
Plus: I would like to increase the margin of the submenu box with respect to the top menu.

2

Hey @Laic :slight_smile:

if you´re talking about the underline of the menu items, you can achieve that with some Custom CSS:

@media screen and (min-width: 768px) {
  .main-menu{
    position: relative;
    text-decoration: none;
  }

  .main-menu::before{
    content: "";
    position: absolute;
    display: block;
    width: 100%;
    height: 1px;
    bottom: 0;
    left: 0;
    background-color: var(--bricks-color-epxofb);
    transform: scaleX(0);
    transition: transform 0.3s ease;
  }

  .main-menu:hover::before{
    transform: scaleX(1);
  }
}

Simply put that in the Custom CSS of a class you can then assign to each nav-link. At least that´s what I did for one of my clients websites. The effect is exactly the same like on the website you shared.
If you want to make the active menu link keep that underline, you can use this code:

@media screen and (min-width: 768px) {
  nav ul li a {
    position: relative;
    text-decoration: none;
  }

  nav ul li a::before {
    content: "";
    position: absolute;
    display: block;
    width: 100%;
    height: 1px;
    bottom: 0;
    left: 0;
    background-color: var(--bricks-color-epxofb);
    transform: scaleX(0);
    transition: transform 0.3s ease;
  }

  nav ul li a:hover::before,
  nav ul li a[aria-current="page"]::before {
    transform: scaleX(1);
  }
}

About the margin of the submenu box:

Can you add some padding-bottom to the t “Top Level” element? Or does that lead to some unwanted results?

padding-submenu
padding-submenu1167Ă—726 34.4 KB

Otherwise you could also add some Custom CSS to the “Nav Menu” element (or whatever menu element you´re using):

%root% .sub-menu{
  margin-top: 50px;
}

I hope that helps :slight_smile:

3

Hi Solana, Thanlks a lot for the CSS code. But to be honest, I do not know where exactly to put it. I tried to add it to the CSS section of the menu and to Design → Customizer → Additional CSS, but both did not work.

Regarding the submenu box, increasing the bottom padding of the top level element only increases the height of the whole header.

4

Sorry for the late response! I must have missed the notification about your new post…

So, what I did was this:

  1. (This is my menu structure):

    menu structure
    menu structure368Ă—584 15.7 KB

  2. Create a class and assign that class to each Nav link:
    create class
    (my class name is a bit irritating cause I called it “.main-menu” even though something like “.main-menu-item” would be more descriptive :slight_smile:

  3. While the class is active, assign the following CSS to the “Custom CSS” of the Nav Link:

@media screen and (min-width: 768px) {
  .main-menu{
    position: relative;
    text-decoration: none;
  }

  .main-menu::before{
    content: "";
    position: absolute;
    display: block;
    width: 100%;
    height: 1px;
    bottom: 0;
    left: 0;
    background-color: var(--bricks-color-epxofb);
    transform: scaleX(0);
    transition: transform 0.3s ease;
  }

  .main-menu:hover::before{
    transform: scaleX(1);
  }
}

That´s it :slight_smile: Let me know if that works for you.

And about the “margin of the submenu box”:

When you hover over one top-menu-item it assigns a class “open” to the

  • . That makes the sub-menu visible. When you select the “Nav Menu” and then go to “CSS” → “Custom CSS” of that “Nav Menu”, it should be enough to use this CSS:

    %root% .sub-menu{
  margin-top: 50px;
}

    Change that value, depending on how much space you want between the main-menu and the sub-menu :slight_smile: