Forum Replies Created

Viewing 15 replies - 46 through 60 (of 73 total)
  • Thread Starter W2014

    (@w2014)

    i figured out why, there is a conflict with jquery tools. but the problem is, i need the tools also…
    if i disable the jquery tools, it works…

    Thread Starter W2014

    (@w2014)

    Actually, the bug is new in the Version 4.3.10.1, the old Version behaved like it should. So i would not advice anyone to install the new Version. I have the old Version 4.3.10 on another site and everything is ok. So I downgraded to 4.3.10.

    Thread Starter W2014

    (@w2014)

    ok i got it, in case someone wants to know it. just ad this to the menu theme css ( i wanted the width=140px ):

    #{$wrap} #{$menu} > li.mega-menu-item {
      width: 140px;
    }

    so, my css looks like this now, because i want rounded corners for the flyout menu and all looks perfect:

    #{$wrap} #{$menu} {
        /** Custom styles should be added below this line **/
    }
    #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-flyout ul.mega-sub-menu {
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;
    }
    
    #{$wrap} #{$menu} > li.mega-menu-item {
      width: 140px;
    }
    #{$wrap} {
        clear: both;
    }
    Thread Starter W2014

    (@w2014)

    i thank you for the incredible support, now everything works as expected, my css now:

    #{$wrap} #{$menu} {
        > li.mega-menu-item:first-child > a,
        > li.mega-menu-item:first-child > a:hover {
              border-radius: 10px 0 0 0;
        }
    
        > li.mega-menu-item:last-child > a,
        > li.mega-menu-item:last-child > a:hover {
              border-radius: 0 10px 0 0;
        }
        li.mega-menu-item {
     width: $flyout_width;
    
    }
    li.mega-current-menu-item a {
     background: #da3555!important;
    }
    }

    i hope, everything is optimized, anyway it is less code then before, thanks to the new version. anyway, just a remark:

    This point:

    “Rounded Corners
    Set rounded corners for flyout menus. Rounded corners will be applied to all flyout menu levels.”

    …means actually, that only the bottom corners of the sub-menu is rounded…so it is a bit confusing.

    Thread Starter W2014

    (@w2014)

    Hallo Tom,

    i sent you the link through your site form, because my site is not public yet.
    or tell me an e-mail i can send you the link to.

    thanx

    you can make your new menu in the template -> frontpage.php, page.php…

    <div id="menu2">
    <?php
     // my navigation menu2.
        wp_nav_menu( array(
    		'theme_location' => 'primary',
    	) );
    ?>
    </div>

    and position in style.css

    #menu2 {
    position: absolute;
    /*width: 900px; this should be deleted*/
    height: 25px;
    z-index: 1000;
    margin: 0px auto auto 200px;
    top: 60px;
    …etc
    }

    Thread Starter W2014

    (@w2014)

    it work, a nice workaround also for the admin area…
    i had a problem with the menu-div, it had a width also, so i had the menu on 2 rows…

    but now it works…

    thanks

    Thread Starter W2014

    (@w2014)

    i tried many things, it is really not possible to make all menu items same size in px? that would be a huge disadvantage…
    does anyone know a solution for this?

    thanks

    Thread Starter W2014

    (@w2014)

    i solved it the following way, just for info:

    #{$wrap} #{$menu} {
        /** Custom styles should be added below this line **/
    
       li.mega-menu-item:first-child a{
            @include border-radius($container_border_radius_top_left, 0, 0, 0);
    
        }
       li.mega-menu-item:last-child a {
            @include border-radius(0, $container_border_radius_top_right, 0, 0);
    
        }
    
        ul.mega-sub-menu li.mega-menu-item:first-child {
            @include border-radius(0, 0, 0, 0);
        }
        ul.mega-sub-menu li.mega-menu-item:first-child a {
            @include border-radius(0, 0, 0, 0);
        }
        ul.mega-sub-menu li.mega-menu-item:last-child {
            @include border-radius(0, 0, 10px, 10px);
        }
    
        ul.mega-sub-menu li.mega-menu-item:last-child  a {
            @include border-radius(0, 0, 10px, 10px);
    
        }
    
      li.mega-current-menu-ancestor, li.mega-current-menu-ancestor a:hover, ul.mega-sub-menu li.mega-current-menu-item a{
            background: red!important;
    
      }
      li.mega-current-menu-item:first-child a {
            @include border-radius($container_border_radius_top_left, 0, 0, 0);
            background: red;
      }
      li.mega-current-menu-item:last-child a {
            @include border-radius(0, $container_border_radius_top_right, 0, 0);
            background: red;
      }
    }
    
    #{$wrap} {
        clear: both;
    }

    actually, this is something that every menu should have:

    – current menu highlighted, including the submenu. it is nothing special.
    – also the rounded corners, at the top ends of the menu and at the bottom of the submenu.

    !tom, you could think about including this option in the admin area…

    thanks anyway, a nice plugin…
    if someone has a better or optimized idea…

    Thread Starter W2014

    (@w2014)

    i close this topic as resolved

    Thread Starter W2014

    (@w2014)

    Hallo, thanks for the reply, it worked for the ancestor with:

    li.mega-current-menu-ancestor

    but i want also the submenu to be highlighted, when it shows up. how can i highlight also the submenu? i mean, i want it to stay highlighted, when i slide the submenu again. i tried with li.li.mega-current-menu a and it did not worked…

    hier is my menu:

    <div id="menu1">
      <div id="mega-menu-wrap-primary-2" class="mega-menu-wrap"><input type="checkbox" id="mega-menu-toggle-primary-2" class="mega-menu-toggle">
    							<label for="mega-menu-toggle-primary-2"></label><ul id="mega-menu-primary-2" class="mega-menu mega-menu-horizontal mega-no-js" data-event="hover" data-effect="slide"><li class='mega-menu-item mega-menu-item-type-custom mega-menu-item-object-custom mega-menu-item-home mega-menu-item-10 mega-align-bottom-left mega-menu-flyout' id='mega-menu-item-10'><a href="http://www.xxxxxx.com/web/">Home</a></li>
    <li class='mega-menu-item mega-menu-item-type-custom mega-menu-item-object-custom mega-current-menu-ancestor mega-current-menu-parent mega-menu-item-has-children mega-menu-item-23 mega-align-bottom-left mega-menu-flyout' id='mega-menu-item-23'><a href="#">About us</a>
    <ul class="mega-sub-menu">
    	<li class='mega-menu-item mega-menu-item-type-post_type mega-menu-item-object-page mega-current-menu-item mega-page_item mega-page-item-16 mega-current_page_item mega-menu-item-26' id='mega-menu-item-26'><a href="http://www.xxxxxx.com/web/?page_id=16">Team</a></li>
    	<li class='mega-menu-item mega-menu-item-type-post_type mega-menu-item-object-page mega-menu-item-25' id='mega-menu-item-25'><a href="http://www.xxxxxx.com/web/?page_id=19">Menu2</a></li>
    	<li class='mega-menu-item mega-menu-item-type-post_type mega-menu-item-object-page mega-menu-item-24' id='mega-menu-item-24'><a href="http://www.xxxxxx.com/web/?page_id=21">Menu3</a></li>
    </ul>
    </li>
    <li class='mega-menu-item mega-menu-item-type-custom mega-menu-item-object-custom mega-menu-item-has-children mega-menu-item-45 mega-align-bottom-left mega-menu-flyout' id='mega-menu-item-45'><a href="#">Menu4</a>
    <ul class="mega-sub-menu">
    	<li class='mega-menu-item mega-menu-item-type-post_type mega-menu-item-object-page mega-menu-item-53' id='mega-menu-item-53'><a href="http://www.xxxxxx.com/web/?page_id=27">Submenu1</a></li>
    	<li class='mega-menu-item mega-menu-item-type-post_type mega-menu-item-object-page mega-menu-item-52' id='mega-menu-item-52'><a href="http://www.xxxxxx.com/web/?page_id=29">Submenu2</a></li>
    	<li class='mega-menu-item mega-menu-item-type-post_type mega-menu-item-object-page mega-menu-item-51' id='mega-menu-item-51'><a href="http://www.xxxxxx.com/web/?page_id=31">Submenu3</a></li>
    
    </ul>
    </li>
    <li class='mega-menu-item mega-menu-item-type-post_type mega-menu-item-object-page mega-menu-item-54 mega-align-bottom-left mega-menu-flyout' id='mega-menu-item-54'><a href="http://www.xxxxxx.com/web/?page_id=43">Contact</a></li>
    </ul></div></div>
    Thread Starter W2014

    (@w2014)

    ok…i got a solution…i don’t know if there is a better way, but this works as i want, i added this into the custom CSS section of the menu theme:

    #{$wrap} #{$menu} {
    /** Custom styles should be added below this line **/

    /** my style **/

    li.mega-menu-item:first-child a {
    @include border-radius($container_border_radius_top_left, 0, 0, 0);
    }
    li.mega-menu-item:last-child a {
    @include border-radius(0, $container_border_radius_top_right, 0, 0);
    }

    ul.mega-sub-menu li.mega-menu-item:first-child {
    @include border-radius(0, 0, 0, 0);
    }
    ul.mega-sub-menu li.mega-menu-item:first-child a {
    @include border-radius(0, 0, 0, 0);
    }
    ul.mega-sub-menu li.mega-menu-item:last-child {
    @include border-radius(0, 0, 10px, 10px);
    }
    ul.mega-sub-menu li.mega-menu-item:last-child a {
    @include border-radius(0, 0, 10px, 10px);
    }
    }

    Thread Starter W2014

    (@w2014)

    Hallo Tom,

    you can see the site on this link

    on the first page you can see the menu and the green reference menu, how it should look like…especially the submenu. so, the main menu -> top left-right round. and submenu -> bottom left-right round(only the last child).

    Thanks, Alex

    you have to make a new css-position into the theme css if you do not want to choose a position already defined.
    then you have to register that in the function.php and finally to implement it into the page.php …

    like a new css-position:

    new_div {
    position: absolute;
    top: …
    }

    Thread Starter W2014

    (@w2014)

    now i have the problem, that also the submenu has the rounded corners at first child top left and last child top right. the rounded corners of the submenu should be only last-child bottom right and left…

    so top left corner(i.e) main menu should be like: ⌠
    and bottom right submenu corner should look like: ⌡

    thankx for support…

Viewing 15 replies - 46 through 60 (of 73 total)