Tagged: , ,

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • January 26, 2018 at 7:27 pm #903488
    Joepp

    Hi,

    I use an custom widget in the layout with an menu in it.
    But the menu does not respond responsive.
    I wants to be one column
    see attachen URL

    January 27, 2018 at 10:23 pm #903781
    Nikko

    Hey Joepp,

    I have checked your site and it’s responsive though it’s not changing it’s width since it occupies only a little space, can you post a mockup or screenshot of what you expect it to look like on mobile devices?

    Best regards,
    Nikko

    January 28, 2018 at 11:36 am #903861
    Joepp

    Hi,
    on http://dev1.joeppoulssen.nl you find an example.
    There you see an 1/4 layout element with a backgound image in it.
    In the element there is a enfold widget with a menu in it.
    When you change the screensize, the menu items are bigger than the background and 1/4 element.

    January 29, 2018 at 4:51 am #903995
    Nikko

    Hi,

    Try adding this css code in Quick CSS (located in Enfold > General Styling):

    .home #av_section_1 .flex_column.av_one_fourth {
    background-size: cover !important;
    background-position: top center !important;
}

    Hope this helps :)

    Best regards,
    Nikko

    January 29, 2018 at 12:36 pm #904235
    Joepp

    Hi Nikko,

    This works fine for the widget on the home page. But on the sample page the same widget does not work.
    is it possible to change the .home code to something general for all menu’s or if possible making a class for it.

    Regards Joep

    January 30, 2018 at 1:12 am #904557
    Nikko

    Hi,

    I would suggest adding some class name to the Custom Css Class field in the section you want to implement the code above, for example add my_section, then on Quick CSS add:

    .my_table .flex_column.av_one_fourth {
    background-size: cover !important;
    background-position: top center !important;
}

    Best regards,
    Nikko

    January 30, 2018 at 12:06 pm #904772
    Joepp

    Hi Nikko,

    That didn’t do the trick, but maybe I’m doing something wrong.

    On the page in the custom css fields of the 1/4 section I add the class “menu”
    in the custom css code under the custom styling tab I added;

    .menu .flex_column.av_one_fourth {
    background-size: cover !important;
    background-position: top center !important;
    }
    also tried
    #.menu .flex_column.av_one_fourth {
    background-size: cover !important;
    background-position: top center !important;
    }

    I think this is not the correct syntax,
    Can you give me a hint?

    Regards Joep

    January 31, 2018 at 4:57 am #905333
    Nikko

    Hi Joep,

    This code is wrong:

    #.menu .flex_column.av_one_fourth {
background-size: cover !important;
background-position: top center !important;
}

    Please remove #, it should look like:

    .menu .flex_column.av_one_fourth {
background-size: cover !important;
background-position: top center !important;
}

    Best regards,
    Nikko

    January 31, 2018 at 11:14 am #905508
    Joepp

    Hi Nikko,

    I tried that but is does not work, the menu widget is bigger as the layout area.
    But it is not possible to assign the class to the menu widget.

    I put a screenshot on the server so you can see what I mean.

    Regards Joep

    February 1, 2018 at 9:01 am #906054
    Rikard

    Hi,

    Thanks for the screenshot. You could try something like this to set a max width to the menu items:

    #menu-zij li {
  max-width:220px !important;
}

    Best regards,
    Rikard

    February 1, 2018 at 11:46 am #906235
    Joepp

    Hi Nikko and Rikard,
    Thanks, everything works fine now!

    Best regards,
    Joep

    February 1, 2018 at 2:57 pm #906304
    Nikko

    Hi,

    Glad that we could help. Thanks for using Enfold :)

    Best regards,
    Nikko

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘Menu in widget area is not responsive’ is closed to new replies.