Viewing 22 posts - 1 through 22 (of 22 total)
  • Author
    Posts
  • #1124597

    Hi,
    I am working on the mega menu, see it for the BLOG https://www.ninserviziogratuito.co.uk/blog

    I tried to explain all in the screenshot https://www.screencast.com/t/S45BHP2fnyF2

    7 categories in 2 lines, the second line are only 3, how do I align them on the left?
    add border around at the sides of each category. A short border. Borders are already there, I just would like to make thicker and different color
    Making sub-links and category titles bold (only for mega menu)

    thanks,
    Marco

    #1125168

    Hey Marco,

    Thanks for providing the screenshot.
    Can you try adding this css code in Quick CSS, located in Enfold > General Styling:

    #top #header .avia_mega_div > .sub-menu > li {
        max-width: 25% !important;
        display: inline-block;
    }
    
    #header .mega_menu_title, 
    #header .avia_mega_div .avia-menu-text {
        font-weight: bold;
    }
    

    Hope it helps.

    Best regards,
    Nikko

    #1125176

    Hi Nikko,
    thanks, it worked partially.

    The alignment of the 3 categories on the second line is now on the left, but how do I obtain bold links (only the links in the mega menu) and how I make the dividers thicker?

    thanks
    Marco

    #1125186

    can you try this to see if it fits your needs – we had to use the flex model to style it:

    #top #header .avia_mega_div {
        max-height: calc(100vh - 200px);
        overflow: auto !important;
    }
    
    #top #header .avia_mega_div > .sub-menu {
      display: flex;
      align-items: stretch;
      justify-content: flex-start;
    }
    
    #header .avia_mega_div .units {
      border-right: 4px solid #010660 ;
    }
    
    #header .avia_mega_div .avia_mega_menu_columns_first {
      padding-left: 15px;
      border-left: 4px solid #010660;
    }
    
    #header .avia_mega_div .avia_mega_menu_columns_last {
      border-right: 4px solid #010660;
    }
    • the max-height is necessary for example for ipad – that mega menu is scrollable inside.
    • the stretch makes the columns inside the same height – so the borders can have the same length
    • if you don’t liike the left border on first row and right border on last element – get rid of the last two rules

    hope that it looks this way then:
    (Purchase code hidden if logged out) -17-56-04.jpg”>(Purchase code hidden if logged out) -17-56-04.jpg” alt=”” />

    #1125192

    by the way – if this is the mega menu for your blog – each item got his own featured image ?

    you can have infront of each mega-menu li your featured image
    see here on a test page: https://webers-testseite.de/lepper/
    look to “Was wir bieten” Mega Menu

    it is a code from ismael that works perfectly – see here:
    (Purchase code hidden if logged out)(Purchase code hidden if logged out) -featured-image/#post-688912″>https://kriesi.at/support/topic/ (Purchase code hidden if logged out)(Purchase code hidden if logged out) -featured-image/#post-688912

    after you only have to style these little images ! : .main_menu .avia_mega_div .attachment-thumbnail.size-thumbnail.wp-post-image
    on that line : if ($args->menu->name != 'Main Menu') return $sorted_menu_objects; you must enter the name of your main menu

    #1125727

    Guenni,
    wow, you coming from the heaven :-)

    thank you a lot.

    See the screenshot please https://www.screencast.com/t/3DbkXvI6Jp5
    A few things do not work.
    – For example, the boxes in top line are not aligned with the boxes in bottom line
    – How do I get the middle line between top and bottom same as the borders at the sides?
    – Notice the right border, is nor linear, has a little recess. Do you know why? (YOU WILL NOT SEE THAT NOW BECAUSE I MADE THE BORDERS ONLY 1PX)
    – How do I change individually the size of the TITLE and the size of the Sub-links? I can change it but they both change. I would like to give them different sizes.
    – How do I change the size of the mega menu container so that I do not need to scroll on desktop?
    – How do I change the size of the bullets points? In this case triangles?
    – Pics on mega menu, I loe this idea. I tried the code and changed the title menu. but I cannot obtain the pics. Any idea?

    By the way great great job :-) very happy
    Marco

    #1125896

    can you first add this:

    #top #header .avia_mega_div > .sub-menu > li {
        flex: 0 1 25%;
    }
    
    #header .mega_menu_title {
        font-size: 22px !important;
    }
    
    .avia_mega_div .avia-bullet {
      margin-top: 9px;
      border-top: 6px solid transparent !important;
      border-bottom: 6px solid transparent !important;
      border-left: 6px solid #010660;
    }

    then we will see how to go on …

    #1125912

    that rule here:

    #top #header .avia_mega_div {
        max-height: calc(100vh - 200px);
        overflow: auto !important;
    }

    is for scrollable mega menu.
    If the height of the mega div is more than the screen-height the overflow is on .
    you can play a bit with the value 200px 50px seems to be enough

    #1125940

    it is hard to style a border-top width – means you can not influence it without making changes to ul itself.
    but we can get rid of that little border top (dashed) and insert between these rows a html that we can style. Even a custom hr of enfold would be possible.

    so to get rid of dashed border:

    #top #header .avia_mega_div > .sub-menu.avia_mega_hr {
    	border-top: none;
    }

    put this to child-theme functions.php:

    function insert_mega_div_separator() { 
    ?>
    <script>
    (function($){
    $('<div style="margin-top:20px; margin-bottom:20px;" class="hr hr-custom hr-center"><span class="hr-inner  (Purchase code hidden if logged out) " style=" width:90%; border-color:#010660;"><span class="hr-inner-style"></span></span></div>').insertBefore('.avia_mega_hr');
    })(jQuery);
    </script>
    <?php
    }
    add_action('wp_footer', 'insert_mega_div_separator');

    you see here that you can have influence via width 90% etc

    Result:

    (Purchase code hidden if logged out) -13-23-00.jpg”>(Purchase code hidden if logged out) -13-23-00.jpg” alt=”” />

    #1125996

    – Pics on mega menu, I loe this idea. I tried the code and changed the title menu. but I cannot obtain the pics. Any idea?

    Hi Guenni,
    first post all ok, changed according to your code and everything worked.

    Second post:
    1) I actually do not need the scrolling bar. What I would need is that the mega manu scrolls down with the page. If I scroll down the page the mega menu has to stay above. By doing this I will not need the scrolling bar within the mega menu. Here you have an example of what I am trying to get
    https://sos-wp.it/blog/ Put the cursor of the mouse on the blog above

    2) Separator is fine, how do I make 1px ? Margin bottom and top, even if I change them, I cannot make it closer. I would like to make the container a bit smaller leaving less spaces (right top left bottom)

    3) I can hide the left bar but not the right bar with this (see below the code used to hide it)

    #header .avia_mega_div .avia_mega_menu_columns_last {
    border-right: 1px solid #010660;
    }

    4) there is something that hid the hover of the triangle / bullet point:
    this is the code used but it is not working anymore and I could not identify why.
    #top #header .avia_mega_div li a:hover .avia-bullet {
    border-color: #009CE1;
    }

    Last think (number 5) would be the images in the menu a small image before each sub link

    Again, thank you :-)

    Marco

    #1126013

    Hi again,
    number 2) this is how I would like to have it https://www.screencast.com/t/B5TrV7q9

    Thanks
    Marco

    #1126039

    on insertion into functions.php : replace it with:

    function insert_mega_div_separator() { 
    ?>
    <script>
    (function($){
    $('<div style="margin-bottom:10px;" class="hr hr-custom hr-center"><span class="hr-inner  (Purchase code hidden if logged out) " style=" width:80%; border-color:#010660;"><span class="hr-inner-style"></span></span></div>').insertBefore('.avia_mega_hr');
    })(jQuery);
    </script>
    <?php
    }
    add_action('wp_footer', 'insert_mega_div_separator');

    this has influence to the lines – add or change the existing rules to:

    #top #header .avia_mega_div > .sub-menu {
    padding: 20px 30px 10px;
    }
    
    .hr-custom .hr-inner. (Purchase code hidden if logged out)  {
        border-top-width: 1px;
    }
    
    #header .avia_mega_div :not(.avia_mega_hr) .avia_mega_menu_columns_last {
        border-right: none !important;
    }

    Well, I almost had to help with that, didn’t I? ;)
    now i’m out sorry – the next patient is already waiting.

    btw: chrome on pc got the advantage that you can let the dropdown menus open when exploring them with a shortcut
    believe it is F8

    Safari on Mac did the trick without shortcut.

    #1126041

    on 1)

    1) I actually do not need the scrolling bar. What I would need is that the mega manu scrolls down with the page. If I scroll down the page the mega menu has to stay above. By doing this I will not need the scrolling bar within the mega menu. Here you have an example of what I am trying to get
    https://sos-wp.it/blog/ Put the cursor of the mouse on the blog above

    you decided to have a sticky header – if this not the case ( like on your example page) the mega menu scrolls out .

    #1126063

    Super,
    thanks Guenni :-)

    #1126076

    Nothing,
    I cannot figure it out. For some reason the internal bars have disappeared leaving space to the dotted ones. I checked everything that you gave me, nothing, I cannot find where the mistake is. I also inspected the code and I can see the code of the dotted lines, but I cannot overwrite it with your instruction.
    2019-08-08_2329

    And the code used it he one you gave me
    /* barra verticale tra categorie NOT WORKING WHY?? */
    #header .avia_mega_div .units {
    border-right: 1px solid #010660;
    }

    Why?

    #1126110

    this was the screenshot you gave me as you would like tlo have it:
    my comment :

    this has influence to the lines – add or change the existing rules to:

    add new rules gave to you – change existing ones gave to you!

        ⇒         your last screencast

    so all have right border – except the first row last column
    where is that rule gone:

    #header .avia_mega_div .units {
      border-right: 1px solid #010660 ;
    }

    On your screen there are no left lines to the first Columns

    /* Nascondere per nascondere barra sinistra delle categorie OK */
    #header .avia_mega_div .avia_mega_menu_columns_first {
        padding-left: 15px;
        border-left: none;
    }

    so you don’t like the border on the upper row right side – where is the new rule with the :not instruction:

    #header .avia_mega_div :not(.avia_mega_hr) .avia_mega_menu_columns_last {
        border-right: none !important;
    }
    #1126301

    Hi,
    I solved it, my error was using —————————- without thinking that even those dashes could be causing errors. I put them between /* */ and the middles lines have appeared again :-)

    One only last thing. How do I align the bullets to the writing? Bullets (triangles) appear slightly downer than writing https://www.screencast.com/t/buyFJ41vN

    Amazing job

    thank you Guenni

    • This reply was modified 1 week, 6 days ago by  marcoabis81.
    • This reply was modified 1 week, 6 days ago by  marcoabis81.
    #1126381

    what do you think of those rules above could handle bullets ?

    .avia_mega_div .avia-bullet {
      …
    }

    the border top, bottom, left creates that triangle (old trick to have a triangle in pure css)
    but maybe the margin-top ? change your child-theme rule to

    /* Size bullets mega menu ok */
    .avia_mega_div .avia-bullet {
      margin-top: 6px;
      border-top: 6px solid transparent !important;
      border-bottom: 6px solid transparent !important;
      border-left: 6px solid #6e6d75;
    }

    didn’t you like to get rid of outer lines ?

    /* Nascondere per nascondere barra sinistra delle categorie OK */
    #header .avia_mega_div .avia_mega_menu_columns_first {
        padding-left: 15px;
        border-left: none;
    }
    
    /* Nascondi per nascondere la barra di destra delle categorie solo in alto OK */
    #header .avia_mega_div :not(.avia_mega_hr) .avia_mega_menu_columns_last {
        border-right: none !important;
    }

    then it will look like this
    (Purchase code hidden if logged out) -07-33-49.jpg”>(Purchase code hidden if logged out) -07-33-49.jpg” alt=”” />

    #1127724

    Hi,
    how can I align bullets and post title?
    2019-08-09_1702

    Thanks

    #1128682

    Hi Marco,

    Try adding this css code:

    #top .avia_mega_div .avia-bullet {
        margin-top: 6px;
    }

    Best regards,
    Nikko

    #1128730

    Super, I am done with mega menu for now.

    Thank you Nikko :-)

    #1128791

    Hi Marco,

    We’re glad that we could help :)
    Thanks for using Enfold and have a great day!

    Best regards,
    Nikko

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

The topic ‘Mega Menu layout’ is closed to new replies.