How to Make Full Width Submenu with Joomla Website Builder Gridbox

How to Make FullWidth Sub Menu with Joomla Website Builder Gridbox.

Hey! today we have a new tutorial for Joomla Page Builder Gridbox in which we want to show you how to change the default view of the submenu and make it Fullwidth.

Website Navigation is a very important element of the website. We are sure, that this tutorial "How to Make Full Width Sub Menu " will be very useful for your awesome Joomla! projects!

Demo - Full Width Sub Menu

Custom CSS

In today's tutorial we will use only CSS. Open Gridbox CSS Editor.

Gridbox CSS Editor

Copy CSS code below and paste into Gridbox CSS editor

@media (min-width: 769px){
    .ba-item-main-menu .nav > li.deeper:hover > .nav-child {
        box-sizing: border-box;
        display: -webkit-flex!important;
        display: flex !important;
        justify-content: center;
        -webkit-justify-content: center;
        left: 0;
        padding: 50px !important;
        position: fixed;
        width: 100% !important;
    }
 
    .ba-item-main-menu .nav > li.deeper > .nav-child > li {
        float: left;
        font-weight: bold;
        min-width: 200px;
    }
 
    .ba-item-main-menu .nav > li.deeper > .nav-child > .deeper >.nav-child {
        animation: none !important;
        -webkit-animation: none !important;
        border: none !important;
        box-shadow: none !important;
        display: block;
        position: static;
    }
 
    .ba-item-main-menu .nav > li.deeper > .nav-child > li.deeper > span:before ,
    .ba-item-main-menu .nav > li.deeper > .nav-child > li.deeper > a:before {
        display: none;
    }
   
    .nav > li.deeper > .nav-child > li> a,
    .nav > li.deeper > .nav-child > li> span {
        color: #fff !important;
        font-size: 18px !important;
    }

    .ba-item-main-menu .nav > li.deeper > .nav-child > li> a,
    .ba-item-main-menu .nav > li.deeper > .nav-child > li> span {
         font-size: 24px !important;
    }
 
    .nav > li.deeper > .nav-child > li> a> i,
    .nav > li.deeper > .nav-child > li> span> i {
        display: none !important;
    }
   
    .gridbox .ba-item-main-menu .nav > li.deeper:hover > .nav-child {
        left: 50px;
        width: calc(100vw - 117px) !important;
        width: -webkit-calc(100vw - 117px) !important;
    }
}



And as always you can download FreeBox Theme with Full Width Menu from the Demo.

Demo - How to Make Full Width Sub Menu with Joomla Website Builder Gridbox.

Download Demo Page

If you have any questions, please feel free to ask, we are always happy to help you.