Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #497963

    Hello!

    I have a couple support questions related to navigation menus. Here’s what I am having trouble with and hope you can help with some CSS tips. I will be utilizing two menu bars as opposed to a dropdown menu.

    The top menu bar is created using the built-in Enfold Mega Menu. The bottom menu bar is the Fullwidth Sub Menu element.

    Here’s the scope:

    1. User first clicks on “Page One” in the top menu. I’d like the arrow to be white instead of blue, bigger in size and to appear on the bottom menu, facing down instead of up.

    If the user clicks on “Page Two”, the arrow should appear underneath it, etc. The arrow should also be centered proportionally under the selected top menu item.

    Now it looks like this:

    This is the look I’d like to achieve:

    2. User now clicks on Sub Page 1 in the bottom menu and the arrow now disappears on the top menu. Is it possible to inherit the arrow from the top menu or add in the bottom menu?

    I’d also like Sub Page 1 to be underlined to let the user know that they’re currently on that page. What’s the code to underline a Fullwidth Sub Menu item?

    Now it looks like this:

    This is the look I’d like to achieve:

    3. Regarding the arrow, it doesn’t matter to me whether the CSS code you provide is for the top menu, bottom menu or both. Whatever works to achieve the look I am going for will work.

    4. This is the Custom CSS I currently have:

    
    .header_color .main_menu ul:first-child > li > a { color: #0e72ba; } 
    /* color of main menu items */
    
    .header_color .main_menu ul:first-child > li a:hover { color: #f79322; } 
    /* hover state of main menu items */
    
    .header_color .main_menu ul:first-child > li.current-menu-item > a, 
    
    .header_color .main_menu ul:first-child > li.current_page_item > a { color: #0e72ba; } 
    /* color of active menu item */
    
    .avia-menu-fx .avia-arrow-wrap { visibility: visible; }
    span.avia-menu-fx { background-color: transparent!important; }
    .avia-menu-fx {-webkit-transition: none!important; transition: none!important;}
    

    Thank you in advance for your help.

    Vic

    #498032

    Hey Vic!

    Everything is possible, but that would need a lot of work to be done.

    You can contact one of our Customization Contractors, who will help you out with the process.
    http://kriesi.at/contact/customization

    Let us know if we could do anything else, regarding our theme

    Regards,
    Basilis

    #498047

    Thanks, Basilis. I will contact the customization contractors like you suggested.

Viewing 3 posts - 1 through 3 (of 3 total)
  • The topic ‘Customizing the look of Mega Menu and Fullwidth Sub Menu’ is closed to new replies.