Smart-menu: Position above or under navigation menu, Colors.

[AlGur]

Please add the location, colors of the smart menu to the settings. Above or below the navigation. I added the following code to scss:

$smartmenu-bar-bgcolor: #0F6CBF; /* цвет фона полосы меню*/
$smartmenu-item-color: #000;
$smartmenu-item-bgcolor: #F8F9FA;
$smartmenu-a-color-notactive: #F8F9FA;

.theme-boost-union-smartmenu {

    .navbar {

        &.fixed-top {
            /* Added height and background color for the top header,
            z-index is added to show the top header dropdown menu above the header block */
            &.boost-union-menubar { /* boost-union-menubar class is added for the top header */
                height: 46px;
                margin-top: 61px;
                border-bottom: 0;
                background-color: $smartmenu-bar-bgcolor; /* цвет фона полосы меню*/
                z-index: 10 !important;
                /* The position of the side drawer has been adjusted slightly below to accommodate the top header. */
                ~ .drawer.drawer-left {
                    top: 0;
                }
                ~ .drawer.drawer-right {
                    top: 101px;
                }
                /* The position of the main page has been adjusted slightly below to accommodate the top header. */
                ~ #page.drawers {
                    margin-top: 10px;
                    /* The position of the drawer button to toggle has been adjusted slightly
                    below to accommodate the top header.
                    .drawer-toggles .drawer-toggler {
                        top: 110px;
                    }*/
                }
                .moremenu {
                    .more-nav {
                        li {
                            /* The card dropdown menu link position is changed to static to show the card dropdown menu
                               in full width */
                            &.card-dropdown {
                                position: static;
                            }
                            &.nav-item {
                                &:first-child {
                                    /* The position of the dropdown menu should not extend beyond the visible area of
                                       the screen */
                                    .dropdown-menu {
                                        left: 0;
                                        right: auto;
                                    }
                                }
                            }
                            a {
                                &:not(.active) {
                                    color: $smartmenu-a-color-notactive;
                                    border-bottom: 0;
                                    padding: 10px;
                                }
                                > * {
                                    cursor: pointer;
                                }
                                /* Background color added in the menubar menu link on hover */
                                &.nav-link:hover {
                                    background-color: $smartmenu-item-bgcolor;
                                    color: $smartmenu-item-color;  
                                }
                                &.nav-link:focus {
                                    background-color: $smartmenu-item-bgcolor;
                                    color: $smartmenu-item-color;  
                                    border: none;
                                }
                            }
                            /* The positions of the dropdown menu added */
                            .dropdown-menu {
                                left: auto;
                                right: 0;
                                li {
                                    width: 100%;
                                }
                                a {
                                    color: $smartmenu-item-color;
                                }
                                a:hover {
                                    color: $smartmenu-a-color-notactive;
                                }                            }
                            /* Removed the padding in the card dropdown overlay*/
                            &.dropdown.card-dropdown {
                                .card-block-wrapper .card-block a {
                                    padding: 0;
                                }
                            }
                            /* Added max-height and overflow auto for scollbar when the card item reach the dropdown
                               height */
                            &.dropdownmoremenu .dropdown-menu .dropdown-menu {
                                max-height: 300px;
                                overflow-y: auto;
                            }
                        }
                    }
                }
                + .navbar {
                    /* Margin top has been added to the Header block to ensure that it does not conflict with the top
                       header. */
                    &.fixed-top {
                        margin-top: 0px;
                        /* The position of the card dropdown block has been set to static,
                        so it will always appear under the card menu link. */
                        .moremenu .dropdown.card-dropdown {
                            position: static;
                            .dropdown-menu {
                                overflow-y: auto;
                            }
                            &:not(.card-overflow-no-wrap) .dropdown-menu {
                                max-height: calc(100vh - 300px);
                            }
                        }
                    }
                }
            }

        }

  }
}

[wiebkemueller-hsh]

Hi @AlGur! Thank you for this idea. We've had a look at it, and made a brief functional test. As this affects the smart menu, I'd like to point @stefanscholz to this, as he is the maintainer for this component of Boost Union that is currently being worked on anyway in order to optimize mobile behaviour.

• So the next steps would be, could you add a user story to this? So we can make sure to fully understand, what is behind this feature, where does is come from and discuss the use cases in order to think about possible configuration options in the theme settings.
• Secondly this would then need a PR (see documentation) to enter a possible review phase.
• There is one thing we'd like to point out - as seen in the screenshot we made from our test installation, there is a problem regarding the real estate between the h1 course title and the menu bar, this would be part of a more detailed review but maybe it already helps now.

Regards! Wiebke

[stefanscholz]

Hi @wiebkemueller-hsh , hi @AlGur ,

Having configuration options for the position and appearance of the menu bar is a good idea, and something we already have done with custom css ourselves in a few sites.

It's worth considering to also align the appearance of the menu bar to the branding of the site, even if it requires a bit more than just css, but I think that is what would constitute the best outcome without any manual configuration by the admin.

Another thing to consider is the upcoming sticky secondary navigation. Even though it's not landed yet, I think we should discuss how this should work together.

@wiebkemueller-hsh, I have just scheduled the last remaining fixes required for the smart menu fixes; once they are implemented we are happy to work on this if you want. I have a couple of ideas for the menu bar anyway from the original concept which would best be implemented together with this.

[whuml]

As discussed with the boost union editing team this is currently out of scope since the requirement canbe fulfilled with simple SCSS adding via boost union feature

Thanks for your Idea for improvement rgds Wolfgang