The Future of Joomla Website Builder Gridbox. What to Expect? Read More

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; 
    font-size: 18px;
}

.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;
}



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.