Image on the header / special menu

Hi guys,

I would like to understand with your help how to create / reproduce a special menu exactly like this, by inserting icons to the left of the text (link to the page). I know you are pro with CSS. 😎


Do I have to upload the icons to the icons section or are pngs okay?

Below is the link https://albaequipment.senapestudio.com/

Thanks for your valuable support!

Comments

  • Hi,

    For a view like this, it would be best to use the Mega Menu.

    You can read more about it under the following link:

    https://support.muffingroup.com/documentation/mega-menu/

    Moreover, it would be best to use the SVG extension for this icon type.

    However, I suggest waiting for a little because we are currently working on Header and Mega Menu builder, where you can create such layouts with our BeBuilder, fast and without needing custom CSS codes.


    Best regards

  • Thx guys, but we can't wait now.

    I will definitely try your Mega Menu builder in the future.


    Can you kindly give us the CSS code?


    Thanks for your valuable support!

  • Please, use the following CSS:

    .mfn-megamenu{
       border-radius: 20px;
    }
    .mfn-megamenu .menu-item span{
       font-weight: bold;
    }
    .mfn-megamenu .menu-item:not(:last-child) a{
       border-right: solid #ccc 2px!important;
    }
    

    To put the icon before the text you need to add a <img> tag in front of the menu title.

    Thanks

  • Fantastic thx!

    Now I would like to understand how:

    1) remove that thin pre-set horizontal line

    2) separate / detach the menu from the 20 / 40px header

    3) how to set the maximum size of the icons


    Thanks for your valuable support! 🤩

  • 1)

    #Top_bar .menu li ul li a{
       border-bottom: none!important;
    }
    

    2)

    .mfn-megamenu-parent::after{
       content: ''!important;
       display: block!important;
       height: 40px!important;
    }
    

    3) You can set that directly in the <img> tag by adding width value.

    Thanks

  • THX! 🙏

    We are almost there! 🎉

    1) how to horizontally align icons and text?


    2) how to prevent the text from wrapping? That it is forcibly on the same line

    3) finally I would like to know how to invert the color of the text, so dark gray #222222 and yellow on hover #FFC629


    As always thanks for your valuable support! 🤩

  • We hope you succeed without too much work. 🙏

  • edited July 2022

    4) ... also in the mobile version the vertical separating lines at right should not appear


  • 1)

    .mfn-megamenu .menu-item img{
       vertical-align: middle;
    }
    

    2) You should decrease the font size a little.

    In the developer tools (F12) I decreased it by one px, and the icon and text fit in a single row.

    3)

    .mfn-megamenu .menu-item a span{
       color: #222;
    }
    .mfn-megamenu .menu-item:hover a span{
       color: #FFC629;
    }
    

    Thanks

  • edited July 2022

    THX!

    1) How can decrease the font size of magamenu?

    2) How can we make the space of the various pages in the megamenu adaptable? At the moment the size is predefined for each page, it would be ideal to make it adaptable to the text.


    3) In the mobile version the vertical separating lines at right should not appear


    4) the search icon has dropped can you tell me how to get it back to its place?


    Thx! 🙏

  • 2) Mega Menu font size is the same as the Content.

    If you want to change the Mega Menu font size only you can add the font-size attribute to the code responsible for color.

    4) Put the code for the right border inside the media queries, like this:

    @media only screen and (min-width:767px){
       .mfn-megamenu .menu-item:not(:last-child) a{
          border-right: solid #ccc 2px;
       }
    }
    

    Thanks

  • thx!


    the search icon has dropped can you tell me how to get it back to its place?


  • We hope you succeed without too much work. 🙏

  • This CSS is affecting that:

    .mfn-megamenu-parent::after{
       content: ''!important;
       display: block!important;
       height: 40px!important;
    }
    

    If you remove it, the search icon will get back to the correct position, but your menu will not have space below the menu item and I do not see any other option to move it down.


    Best regards

  • edited July 2022

    Are you saying it's not an option to exclude the search icon from that code rule? No other option?

  • Maybe with some more advanced CSS, it would be possible, but I do not see any other solutions for it.


    Best regards

  • edited July 2022

    Hy guys,

    we will need to keep the same special menu of the products also in the other languages ...


    Can you give us CSS code? 🤩


    Here the link 👉️ https://albaequipment.senapestudio.com

    Thanks for your support!

  • When you create a Mega Menu for the primary language, it should be automatically styled by the CSS you have for the primary language.


    Best regards

  • edited July 2022

    Ok but why works only with the italian language?

  • Please send us WordPress dashboard access privately thru the contact form, which is on the right side at http://themeforest.net/user/muffingroup#contact and we will check what might be the reason.

    Notice!

    Please attach a link to this forum discussion.

    Thanks

  • You did not check the option to activate the mega menu for other languages.

    I have opened your other versions of the menu, checked it, and it is working.


    Best regards

  • 🤦‍♂️🤷‍♂️


    Thx!

Sign In or Register to comment.