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 Website 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 you and your awesome Joomla! projects!

Try on Demo!

Custom CSS

In today's tutorial we will use only CSS.

Click on the icon Theme Configuration >> Body >> Custom Code and open CSS editor by the clicking on the button "Open Editor".

Copy CSS code below and paste into Gridbox CSS editor

.nav > li.deeper:hover > .nav-child {
    display: -webkit-flex!important;
    display: flex !important;
    justify-content: center;
    -webkit-justify-content: center;
    left: 0;
    padding: 50px;
    position: fixed;
    width: 100%;
} 

.nav > li.deeper > .nav-child > li {
    float: left;
    font-weight: bold;
    min-width: 200px;
}

.nav > li.deeper > .nav-child > li> a,
.nav > li.deeper > .nav-child > li> span {
    color: #fff !important; 
    font-size: 18px !important;
}

.nav > li.deeper > .nav-child > .deeper >.nav-child {
    animation: none !important;
    border: none !important;
    display: block;
    position: static;
}

.nav > li.deeper > .nav-child > li.deeper > span:before ,
.nav > li.deeper > .nav-child > li.deeper > a:before {
    display: none;
}

@media (max-width: 768px) {
    .com_bagrid .header .nav .deeper.parent ul.nav-child {
        display: block !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 FreeBox Theme

How to import downloaded .xml theme file you can find here: Import & Export

We also recommend that you look at our other tutorials for website navigation:

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