Create a Full Width Sub Menu in Qode Bridge Theme

If you want your secondary drop down menus to be full width, but you still want the drop down menu content to align with the parent item in the main navigation, we can fake a full-width menu by using the before and after selector to extend the sub-menu.

.second:before { 
    content: ''; 
    width: 300%; 
    height: 100%; 
    position: absolute; 
    right: 100%; 
    top: 0; 
    background-color: #003462;
}

.second:after { 
    content: ''; 
    width: 300%; 
    height: 100%;  
    position: absolute;  
    left: 100%; 
    top: 0; 
    background-color: #003462; 
}

Replace the background colour in the css here to match the background colour of your sub-menus.

 

 

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *