Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • April 7, 2019 at 9:15 pm #1088042
    webworm72

    I am using the “Full Width Sub Menu” element at the bottom of my clients website on all pages.
    I created a separate menu in Appearance/Menus and have selected that menu to use in the “Full width Sub Menu” element.
    See URL and logins in Private Section below to view live site.

    I want to implement the Styling presented below in the Enfold documentation for Fullwidth Submenu Style – 3:, primarily I just want the code to create equal spacing between the menu items as shown in the example from your website url below, scroll down to #3

    Examples of full width submenu

    Text Below from Enfold:
    =======================================================================
    Fullwidth Submenu Style – #3: The below fullwidth element has a custom CSS class name “submenu-style-3” assigned. Using custom CSS we can align the menu items to take up equal space and add a different background color to each menu item as shown in the below example.
    ================================================================================
    Please let me know what part of the code snippet I need to implement to accomplish that one styling change.

    • This topic was modified 5 years, 8 months ago by webworm72.
    April 9, 2019 at 4:36 pm #1088716
    Victoria

    Hey webworm72,

    Please try the following css:

    
#sub_menu1.av-submenu-container,
#sub_menu1.av-submenu-container .container {
background: transparent;
max-width: 100% !important;
}
#sub_menu1.av-submenu-container .av-subnav-menu {
display: flex;
justify-content: space-around;
}
#sub_menu1.av-submenu-container .av-subnav-menu > li {
flex-grow: 1;
}
#sub_menu1.av-submenu-container .av-subnav-menu > li > a {
color: #FFF;
background: transparent;
border-left-width: 0px !important;
cursor: pointer;
}
#sub_menu1.av-submenu-container .av-subnav-menu > li:nth-child(1) {
background-color: #4285f4;
}
#sub_menu1.av-submenu-container .av-subnav-menu > li:nth-child(2) {
background-color: #34a853;
}
#sub_menu1.av-submenu-container .av-subnav-menu > li:nth-child(3) {
background-color: #fbbc05;
}
#sub_menu1.av-submenu-container .av-subnav-menu > li:nth-child(4) {
background-color: #ea4335;
}

    Best regards,
    Victoria

    April 9, 2019 at 9:40 pm #1088891
    webworm72

    Hi Victoria , thanks for taking a look !

    That helped , I played around with the code and below is what i ended up with to get as close to the client mock up as possible. Just in case others might want to know ! You guys are great here !!! It looks good in all browsers Edge, IE11, Chrome, Firefox , safari

    How ever It looks a little wonky on IPhone though in portrait and landscape. any thoughts ?

    ======================================================
    #sub_menu1.av-submenu-container,
    #sub_menu1.av-submenu-container .container {
    background: transparent;
    max-width: 100% !important;
    }
    #sub_menu1.av-submenu-container .av-subnav-menu {
    display: flex;
    justify-content: space-around;
    }

    #top #sub_menu1 .av-subnav-menu > li.current_page_item {
    background-color: #75253e !important;
    border-bottom: 0px solid #75253e !important;
    padding: 15px !important;
    }
    #top #sub_menu1 .av-subnav-menu > li.current_page_item > a,#top #sub_menu1 .av-subnav-menu > li > a:hover {
    color: #fff !important;
    }
    #top .av-subnav-menu li a {
    font-weight: bold;
    font-size: 23px;
    padding: 15px 0px 15px;
    =============================================================

    • This reply was modified 5 years, 8 months ago by webworm72.
    April 12, 2019 at 6:48 pm #1090125
    Victoria

    Hi webworm72,

    Well, I think it is better to hide it on mobile, not sure it can be adjusted further.

    Best regards,
    Victoria

    April 12, 2019 at 10:26 pm #1090158
    webworm72

    Hi Victoria thanks !
    Ok so what about simply using the options in the Full Width Sub Menu and have it simply display a button to open a menu
    For some reason that function is not working see ticket #1089834

    April 14, 2019 at 11:39 am #1090582
    Victoria

    Hi webworm72,

    Normally it works like this, but with the customizations, it might not work.

    Maybe build a widget menu and show on mobile while showing this menu on big screens?

    Best regards,
    Victoria

    April 14, 2019 at 11:39 am #1090583
    Victoria

    Hi webworm72,

    Normally it works like this, but with the customizations, it might not work.

    Maybe build a widget menu and show on mobile while showing this menu on big screens?

    Best regards,
    Victoria

    April 14, 2019 at 9:27 pm #1090739
    webworm72

    That sounds good , please share with me exactly how I would do that.

    April 15, 2019 at 7:48 pm #1091070
    Victoria

    Hi webworm72,

    You can use screen options to hide this menu on small screens and add the widget with the menu that will be hidden for desktops but see on small screens.

    Best regards,
    Victoria

    April 16, 2019 at 8:06 pm #1091660
    webworm72

    thanks Vitoria I understand what your saying , and I have added a widget section with the nav menu widget , however I don’t see “Screen Options ” for for the widget element , is there any code I can use to have it show only on mobile ?

    April 17, 2019 at 2:06 pm #1092012
    Victoria

    Hi webworm72,

    I wanted to have a look but credentials did not work.

    Can you please update them?

    Best regards,
    Victoria

    April 20, 2019 at 8:08 pm #1092958
    webworm72

    thanks Victoria
    you can close this ticket

    April 21, 2019 at 5:47 pm #1093089
    Jordan Shannon

    Hi,

    If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 13 posts - 1 through 13 (of 13 total)
  • The topic ‘How to use Enfold code snippets for "Full Width Sub Menu" styling’ is closed to new replies.