Controlling layout of menus

richnyc30

I'm using BLOCKK template. I created only on level of menu for several different template styles.
I would like to control the spacing of the menus, especially when it wraps around for narrower screens.
I looked at Inspect and couldn't really understand how you formatted the menus with CSS and HTML.
Obviously I would want to c

control the layout in the 2 images.

dominic

Hi richnyc30,
You can add the following CSS code to your site:

@media (max-width: 1251px) {
     .t4-header-right {
           display: none;
      }
      .t4-megamenu-wrap {
           flex: 0 0 88.666667%;
            max-width: 100%;
    }
    .t4-logo-header {
             flex: 0 0 11.666667%;
      }
}

If you still face this issue, you can send me the admin account for further checking.

richnyc30

I placed the code you sent in Custom.css. Is this correct? I tried changed the max-
width and nothing seemed to happen.
I think the menu items got closer together but I'm not sure.
I still have the problem of when the menu has two rows too far apart. How can I adjust that?

dominic

Hi richnyc30,
The previous code is for the main site. I have checked this link: j4/index.php/beginners
And see that your menu item is very long. It is tough to fit many screens. In this case, you can add the following code:

@media (min-width: 1200px) {
.t4-logo-header {
    flex: 0 0 10.666667%;
}

.t4-megamenu-wrap {
    flex: 0 0 86.666667%;
    max-width: 86%;
}
.t4-header-right {
    flex: 0 0 5.666667%;
}
}

You should select the Extra Screen(XL) for the Menu Breakpoint.

richnyc30

I p[laced the new code in Custom.css.
It moved the menu to the right.
I am more concerned about the distance between the first line of the menu and the second line as in the screen capture above. My laptop couldn't show everything on the first line, so having the two lines with little line to line distance as possible would be better.
It looks like the logo image in the upper left corner has something to do with the vertical spacing of the menu. Can that be made a "Block" to avoid the large vertical spacing?

richnyc30

What is the best doc for Menu Break Point?

dominic

Hi richnyc30,
You can use the following CSS code:

.header-default {
    padding: 20px 32px;
}
.t4-megamenu > .navbar-nav > li > a, .t4-megamenu > .navbar-nav > li > .nav-link {
    padding: 0; 
}

About the navigation, you can find the document guide here: https://www.joomlart.com/documentation/t4-framework/navigation-settings