Tagged: , ,

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • March 28, 2016 at 6:38 pm #603987
    millertimesites

    Hey guys, loving enfold on a new site I’m working on but had a question on the full width submenu.

    How can I change the text on the mobile toggle from “Menu” to a custom value like “Food Menu”.
    Hear is the page in question as an example http://www.chevysminnesota.com/menu/entree-combos/

    Also how can I add a couple px of padding to the background color of each menu item so it isn’t so tight to the text?

    Thanks a ton
    Jon

    March 29, 2016 at 2:32 am #604204
    Josue

    Hey!

    Try adding this code to the Quick CSS:

    #top .av-current-placeholder{
    font-size: 0 !important;
}
#top .av-current-placeholder:after {
    content: "Food Menu";
    font-size: 14px;
}

.responsive #top .av-menu-mobile-active .av-subnav-menu > li > a {
    padding: 10px 10%;
    font-size: 14px;
}

    Cheers! 
    Josue

    April 27, 2016 at 7:56 pm #623316
    millertimesites

    Josue,

    You are the man, it worked perfect.
    Too bad the widget doesn’t have a spot to edit the toggle text built in when you edit it.
    Either way it is working great now.

    thank you

    April 27, 2016 at 7:58 pm #623317
    millertimesites

    nevermind, found a problem.
    it is actually making the full width submenu act strangely in desktop mode.
    Is isn’t letting it go to the full width of the container anymore and is smushing it inward.

    http://www.chevysminnesota.com/menu/classics/

    Thanks for helping

    April 27, 2016 at 8:05 pm #623323
    millertimesites

    Example of how it was before:

    How it is now:

    April 28, 2016 at 1:43 pm #623700
    Josue

    Try reducing the amount of horizontal padding here:

    .responsive #top .av-menu-mobile-active .av-subnav-menu > li > a {
    padding: 6px 10%;
    font-size: 14px;
}
    May 1, 2016 at 3:09 pm #625334
    millertimesites

    Thanks for your reply, that did not fix the issue.

    On the items with more than 1 word seem to be affected.
    It just isn’t letting the Full Width Submenu take up the entire container width after changing the responsive toggle text.

    Thanks
    Jon

    May 3, 2016 at 12:51 pm #626373
    Andy

    Hi,

    I checked your website and it seems that it’s fine now, as it appears like in your screenshot. So could you fix it?

    Best regards,
    Andy

    May 3, 2016 at 4:34 pm #626609
    millertimesites

    Andy,

    In all browsers it has cut the width of the Full Width Submenu by about 30% and it isn’t filling up the width of it’s container.

    In Firefox it handles it by shrinking the text down enough to all be on one line, however, in other browsers it has a bad time handling items with more than 1 word and turns them into 2 lines as in the second screenshot. If you notice on the 1st screen shot the text is larger, all on one line, and the Submenu takes up the entire container width.

    does that make sense?
    Thanks
    Jon

    May 4, 2016 at 9:56 am #627012
    Andy

    Hi,

    this is what I see:

    View post on imgur.com


    which seems totally fine to me. I can’t see any issues at all. What exactly do you want to change? can you highlight using screenshots the problems you see please?

    Best regards,
    Andy

    December 13, 2017 at 12:14 pm #888280
    philthebass

    Hi,
    I have a similar problem.
    After adding the updated CSS 

    /*Add 'Course Menu' text to sub menu*/

#top .av-current-placeholder{
    font-size: 0 !important;
}
#top .av-current-placeholder:after {
    content: "Course Menu";
    font-size: 14px;
}

.responsive #top .av-menu-mobile-active .av-subnav-menu > li > a {
    padding: 6px 10%;
    font-size: 14px;
}

    my desktop version doesn’t display correctly
    https://screencast.com/t/DnEcONJgoJ
    and neither does the mobile sub menu
    https://screencast.com/t/nu4oOGcyKm
    https://screencast.com/t/drASuwrmH

    Here are the “before” states
    https://screencast.com/t/X7n1rgY2
    https://screencast.com/t/L4TpxziMBzW

    I’ve tried tweaking the padding but can’t get it right. Any suggestions would be greatly appreciated.

    Thanks

    Phil

    December 13, 2017 at 12:19 pm #888282
    philthebass

    Quick update, by cutting back the code to just use

    #top .av-current-placeholder{
    font-size: 0 !important;
}
#top .av-current-placeholder:after {
    content: "Course Menu";
    font-size: 14px;
}

    It works nicely.

    Still trying to figure out the alignment though

    https://screencast.com/t/lbBH92Olvg

    Thanks

    Phil

    December 13, 2017 at 4:09 pm #888403
    Victoria

    Hi Phil,

    What do you mean alignment wrong? It is supposed to be there. Where do you want to move it?
    Could you please attach a mockup of what you’re trying to achieve?

    Best regards,
    Victoria

    December 13, 2017 at 4:13 pm #888407
    philthebass

    Hi Victoria,

    I managed to sort it out by setting vertical-align: middle;

    /*Add ‘Course Menu’ text to sub menu*/

    #top .course-menu .av-current-placeholder{
    font-size: 0 !important;
    }
    #top .course-menu .av-current-placeholder:after {
    content: “Course Menu”;
    font-size: 14px;
    vertical-align: middle;
    }

    Is there anyway I can target page IDs?

    With thanks

    Regards

    Phil

    December 13, 2017 at 4:48 pm #888443
    Victoria

    Hi Phil,

    Page ids are used as a class for the body tag
    Image 2017-12-13 at 16.48.05.png

    Best regards,
    Victoria

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