Kitestudio Support
  • Hire Us
  • PinkMart Pro
  • Tata Pro
  • login
  • Register
Login | Register
×

Login

Log In
Lost Password?

Community Forums

How can i change mega menu to full width ?

  • 4 years, 4 months ago root
    Keymaster

    I want to pull up mega menu left and right side.
    How can i do that?
    Do you have any suggestion for mega menu full width?

    4 years, 4 months ago root
    Keymaster

    Hi mate, there is no option for this style right now
    You need to handle it with custom CSS

    if you need any customization functionality please contact kiteStudio Agency :

    Agency

    Regards

    4 years, 4 months ago root
    Keymaster

    Hello again
    I want to edit the JavaScript file. Which application or library I will convert the file I edited to min.js.
    The code I want to change

     /*-----------------------------------------------------------------------------------*/
      /*  Navigation
      /*-----------------------------------------------------------------------------------*/
    
            nav: function () {
    
                var self = this;
    
                if (self.windowWidth <= 1140)
                    return;
    
                var $checkFixed = self.$ktheader.attr("data-fixed"); // Check menu fixed option is enable (1) or disable (0)
    
                var $menuItem = $('.navigation > ul li.menu-item-has-children');
    
                $menuItem.each(function () {
    
                    var $menuWrapper = $(this).find('.menu-item-wrapper'),
                        $secondlevelItems = $menuWrapper.find('> ul > li'),
                        $rightOffset = 0;//store the offset of megamenu from right side of screen
    
                    if ($(this).hasClass('mega-menu-parent')) {
                        $menuWrapper.find('.special-last-child').closest('.menu-item-wrapper').addClass('has-special-last-child');
    
                        $menuWrapper.width($secondlevelItems.length * $secondlevelItems.eq(0).outerWidth());
                        $menuWrapper.height($menuWrapper.find('> ul').height());
                        $menuWrapper.css('margin-left', '');//Reset margin-left to calculate correct position
                        var $rightOffset = self.windowWidth - ($menuWrapper.offset().left + $menuWrapper.outerWidth());
                        if ($rightOffset < 0) {
                            $menuWrapper.css('margin-left', $rightOffset); // cause mega menu be in window 
                        }
                        if ($menuWrapper.parents('.catmenu').length != 0) {
                            if ($menuWrapper.find('> ul').height() < $('nav.catmenu').height()) {
                                $menuWrapper.height($('.category-menu-container').height() - 40);
                                $menuWrapper.find('li.has-bg').height($('.category-menu-container').height() - 40);
                            }
                        }
                    }
                    else {
                        var $subMenuWidth = $(this).find('> ul').eq(0).outerWidth();
                        var $rightOffset = self.windowWidth - ($(this).offset().left + $subMenuWidth);
                        if ($rightOffset < $subMenuWidth) {
                            $(this).addClass('left-submenus');
                        }
                    }
                    if ($(this).parents('.catmenu').length != 0) {
                        var $menu_height = $(this).parents('.catmenu').siblings('.allcats').width();
                        if (self.windowWidth > 1140) {
                            var $left = parseInt($menu_height) + parseInt($(this).parents('.catmenu').siblings('.allcats').css('marginLeft').replace('px', ''));
                            if ( $('body').hasClass('rtl') ) {
                                $menuWrapper.css('right', $left);
                            } else {
                                $menuWrapper.css('left', $left);
                            }
                            if (!$(this).hasClass('mega-menu-parent') && $(this).parents('.mega-menu-parent').length == 0)
                                if ( $('body').hasClass('rtl') ) {
                                    $(this).find('> ul.sub-menu').css('right', $left);
                                } else {
                                    $(this).find('> ul.sub-menu').css('left', $left);
                                }
                        }
                    }
                });
    
Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

Recent Topics

  • installation problem – Pinkmart Theme
  • Support With email
  • Edición del header
  • all demo pages are not import.
  • Products are not showing on mobile view

Recent Comments

    Search Forums

    Recent Topics

    • installation problem – Pinkmart Theme
    • Support With email
    • Edición del header
    • all demo pages are not import.
    • Products are not showing on mobile view

    Recent Replies

    • all demo pages are not import.
    • Edición del header
    • Need double click to see product detail page
    • Need double click to see product detail page
    • List Layout
    • Most popular topics
    • Topics with no replies

    KiteStudio Team

    We take great care to make sure that we respond to all questions within 1 business day.

    You can also contact us via
    help.kitestudio@gmail.com

    Getting Support

    • teta Documentation
    • teta changelogs
    • Pinkmart Changelogs
    • Video tutorials
    • Register
    • Login