Tagged: , , , ,

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • July 17, 2015 at 5:05 pm #475063
    WEBIGAMI

    Hi team,

    1) I need to know how to hide the dotted borders in the testimonial grid. Marked red in the screenshot:

    It’s on my website http://www.webigami.de/#kunden

    2) How can I make the first layer of a mega menu clickable on smartphones?

    Now, I have a mega menu with 4 columns WITHOUT headlines (empty headline element in the menu). On a smartphone, the menu wants to open the column’s headline which it can’t cause there is none. Through that, the user is unable to reach the submenu items in this column. Please see the screenshots of the draft on http://www.webigami.de/autocrib :


    Thanks and cheers,
    Jan

    July 19, 2015 at 3:16 pm #475390
    Ismael

    Hey Jan!

    Thank you for using Enfold.

    1.) Use this to remove the border of the testimonial:

    .avia-testimonial {
  border-bottom: none;
}

    2.) Try to show the sub menus by default. Go to Enfold > Header > Mobile Menu panel then disable the Hide Mobile Menu Submenu Items.

    Cheers!
    Ismael

    July 20, 2015 at 2:29 pm #475821
    WEBIGAMI

    Hi Ismael,

    thank you so far!

    1) The VERTICAL border in the middle/center between the columns stays. Which code do I need to add?

    2) I know about that option. But the client wants the submenus being hidden on mobile devices and let his users go diretcly to “Products” and not the submenus. Is there a way to use a second menu for mobiles? Or another solution?

    Thanks and cheers,
    Jan :)

    July 21, 2015 at 12:49 am #476231
    Ismael

    Hey!

    1.) Replace the code with this:

    .avia-testimonial {
  border: 0;
}

    2.) Add another “Products” menu item right beside the default one, don’t set it as a mega menu. You can use a custom link or just simply add the products page. We can use css to hide this menu item on desktop then show it on mobile device.

    Regards,
    Ismael

    July 21, 2015 at 2:16 pm #476495
    WEBIGAMI

    Hi Ismael,

    great, thank you! :)

    1) It worked, but the dotted lines are coming back in responsive mode (resize the browser to test it).

    2) I added a new Products menu item next to the mega menu (right to it). What CSS do I have to add to show the new one only on mobile and the old one only on desktops?

    Thanks and cheers,
    Jan :)

    July 21, 2015 at 2:29 pm #476501
    Yigit

    Hi!

    1- Please use the code as following 

    .avia-testimonial { border: none !important; }

    2- You can right click on Chrome or Firefox to inspect elements to find menu item ID’s http://i.imgur.com/HyPTCRg.jpg
    and then add following code to Quick CSS 

    @media only screen and (max-width: 990px) { 
#menu-item-59 { display: none !important; }}
@media only screen and (min-width: 990px) {
#menu-item-25 { display: none !important; }}

    Regards,
    Yigit

    July 21, 2015 at 3:45 pm #476568
    WEBIGAMI

    Hi Yigit and Ismael,

    A W E S O M E ! Everything is as it supposed to be now.

    I really appreciate your great support every single time.

    Thank you :)

    Jan

    July 21, 2015 at 3:51 pm #476575
    Yigit

    Hey!

    You are welcome Jan, we are always happy to help :)

    Cheers!
    Yigit

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.