Home Forums Porto Template Mega Menu – changing to 2 columns

This topic contains 1 reply, has 2 voices, and was last updated by  Support 4 months ago. This post has been viewed 177 times

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #10020998

    jeffbourassa
    Participant

    Looking for how to change Mega Drop menu from 4 columns to 2 columns using only half the page rather than going across the full menu (992px).


    #10021006

    Support
    Keymaster

    Hello, thanks for your purchase.

    Please try the following code:

    1) CSS:

    @media (min-width: 991px) {
    	#header .header-nav-main nav > ul > li.dropdown-mega {
    		position: relative;
    	}
    	
    	#header .header-nav-main nav > ul > li.dropdown-mega > .dropdown-menu {
    		border-radius: 0px 4px 4px 4px;
    		left: 0;
    		right: 15px;
    		width: 450px;
    	}
    }

    2) HTML:

    <li class="dropdown dropdown-mega">
    	
    		Shortcodes
    	
    	<ul class="dropdown-menu">
    		
  • <div class="dropdown-mega-content"> <div class="row"> <div class="col-md-6"> <span class="dropdown-mega-sub-title">Shortcodes 1</span> <ul class="dropdown-mega-sub-nav">
  • Accordions
  • Toggles
  • Tabs
  • Icons
  • Icon Boxes
  • Carousels
  • Modals
  • Lightboxes
  • </div> <div class="col-md-6"> <span class="dropdown-mega-sub-title">Shortcodes 2</span> <ul class="dropdown-mega-sub-nav">
  • Buttons
  • Labels
  • Lists
  • Image Gallery
  • Image Frames
  • Testimonials
  • Blockquotes
  • Word Rotator
  • </div> </div> </div>

    3) Should look like this:

    Kind Regards,

    Jonas


Viewing 2 posts - 1 through 2 (of 2 total)