Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • #1301657

    Hi,

    After adding a widget to my header area (see this thread: https://kriesi.at/support/topic/add-button-in-header-using-widget/) I noticed that the submenu is placed too high, it is placed right beneath the text now, but I want it placed below the header. Hope someone can help me establish that.

    Thanks a lot!

    #1301659

    Hi,

    Thanks for contacting us!

    Please add following code to Quick CSS field in Enfold theme options > General Styling tab

    
    .av-main-nav ul {
        top: 224%;
    }
    

    Best regards,
    Yigit

    #1301665

    Hi Yigit,
    That works partly, when I scroll to one of the submenu items the submenu disappears, so I cannot click on one of the items.

    #1301668

    Hi,

    That happens when there is a gap between parent item and submenu, cursor should remain on parent item to keep submenus open.
    Could you please replace the code with following one instead

    .av-main-nav ul {
        padding-top: 35px;
    }

    This would add top padding. Does not look as good but fixes the issue with the previous code. Could you please try with this code and let us know what you think?

    Regards,
    Yigit

    #1301675

    Hmm, I see what you mean, does not really look good indeed.

    So when i delete the css code of placing the widget on the right place, the meu does work correctly, so then there is no gap between the parent item and the sub item.

    Should we maybe change some code there? I place it here again:

    .responsive #top #header,
    .responsive #top #header #header_meta, 
    .responsive #top #header #menu-item-search a,
    .responsive #top #header a.cart_dropdown_link,
    .responsive #top #header #header_main nav .social_bookmarks,
    .responsive #top #header #header_main .inner-container .logo,
    .responsive #top #header #header_main .inner-container .main_menu,
    .responsive #top #header #header_main .inner-container .widget,
    #top #header #header_main .container.av-logo-container .inner-container {
        display: flex;
        position: relative;    
    }
    
    .responsive #top #header #header_meta {
        flex-basis: 100%;
    }
    
    #top #header #header_main .container.av-logo-container {
        height: inherit;    
        line-height: inherit;
    }
    
    #top #header #header_main .container.av-logo-container .inner-container {
        height: inherit;
        position: relative !important;
        flex-wrap: wrap;
        padding: 10px;
        justify-content: space-between;
    }
    
    .responsive #top #header {
        flex-wrap: wrap;
    }
    
    .responsive #top #header #header_main {
        flex-basis: 100%;
    }
    
    .responsive.html_header_transparency #top #wrap_all #header {
        position: absolute;
    }
    
    .html_header_sticky.html_mobile_menu_tablet #top #wrap_all #header,
    .html_header_sticky.html_header_transparency #top #wrap_all #header,
    .html_header_sticky #top #wrap_all #header {
        position: fixed;
    }
    
    .html_header_sticky #top #header_main .container,
    .html_header_sticky #top .main_menu ul:first-child>li a {
        height: inherit !important;
        line-height: inherit !important;
    }
    
    .responsive #top #header #header_main .inner-container .logo {
        order: 1;
        flex-basis: auto;
        min-width: 100px;
        max-width: 180px;
        z-index: 9;
        max-height: 80px !important;
        overflow: visible;
    }
    
    .responsive #top #header .logo,
    .responsive #top #header .logo a,
    .responsive #top #header .logo img {
        width: auto;
        height: auto;    
        align-items: center;
        align-self: center;
        justify-content: center;
    }
    
    .responsive #top #header .logo a {
        top: 86px;
    }
    
    .responsive #top #header .logo span img {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }
    
    .responsive #top #header #header_main .inner-container .main_menu {
        order: 3;
        flex-basis: auto;
        align-items: center;
        align-self: center;
        height: inherit !important;
    }
    
    #header .av-main-nav {
        display: flex;
        flex-wrap: nowrap;
    }
    
    @media only screen and (max-width: 1000px) {
        #top #header .av-main-nav>li.menu-item {
            display: none!important;
        }
        #top #header .av-burger-menu-main {
            cursor: pointer;
            display: block!important;
        }
    }
    
    @media only screen and (max-width: 767px) {
        .responsive #top .av-logo-container .avia-menu {
            display: flex!important;
            align-items: center;
        }
    }
    
    .responsive #top #header #header_main .inner-container .widget {
        order: 2;
        flex-basis: auto;
        padding: 0;
        clear: none!important;
        justify-content: center;
        align-self: center;
        align-items: center;
        z-index: 1;
    }
    
    .responsive #top #header #header_main .inner-container .widget>div {
        width: 100%;
        
    }
    
    .responsive #top #header #header_main nav .social_bookmarks {
        top: auto;
        margin-top: 0;
        align-items: center;
    }
    
    .responsive #top .av-logo-container .social_bookmarks li {
        height: inherit;
    }
    
    #top #header #header_main #menu-item-shop a.cart_dropdown_link {
        height: auto;
    }
    
    @media only screen and (max-width: 767px) {
        .responsive #top #menu-item-shop.cart_dropdown {
            display: flex;
            align-items: center;
        }
        .cart_dropdown .dropdown_widget .avia-arrow {
            display: none;
        }
    }
    
    @media only screen and (max-width: 767px) {
      .responsive #top #wrap_all #main {
        padding-top: 387px !important;
      }
    
      .responsive #top #wrap_all #header {
        position: absolute !important;
    }
    
      #top #header #header_main .container.av-logo-container .inner-container {
        display: block;
      }
    
      .responsive #top #header #header_main .inner-container .logo {
        height: auto !important;
        max-height: none !important;
      }
    
      .responsive #top #header #header_main .inner-container .logo a {
        top: 0;
      }
    
      .responsive #top #header #header_main .inner-container .main_menu {
        position: absolute;
        top: 30px;
      }
    .responsive #top #header #header_main .inner-container .widget {
        padding-top: 12px;
        margin-bottom: -8px;
    }
    }
    #1301677

    Hi,

    I think it would be a lot easier to add your button as a new menu item instead of using a widget and then placing it between logo and main menu using CSS.

    If you could please post temporary admin logins here privately, I could temporarily disable the widget in header area and re-create it using menu item :)

    Best regards,
    Yigit

    #1301680

    Ok!

    #1301681

    Hi,

    Login credentials did not work for me. Could you please check them once again? :)

    Best regards,
    Yigit

    #1301683

    Sorry, I didn’t hit save button. Does it work now?

    By the way, I added the css code of the widget in header in the css field of the Customizer (instead of in the Quick CSS field).

    #1301685

    Hi,

    – I removed the code from Customizer (you can find it here as well – https://pastebin.com/j9Yj3wKM)
    – Disabled header widget code in Functions.php file of your child theme
    – Added a new menu item to your menu and chose to display it as button
    – Went to Enfold theme options > Advanced Styling and adjusted button menu item colors
    – Added following code to bottom of Quick CSS field

    #menu-item-61 .avia-menu-text {
        border-left: none;
    }
    #menu-item-8182 {
        right: 100px;
    }
    @media only screen and (max-width: 1200px) {
    #top #header .av-main-nav > li > a {
        font-size: 15px !important;
    }}
    @media only screen and (max-width: 1055px) { 
    #menu-item-8182 {
        right: 30px;
    }}

    Please review your website :)

    Best regards,
    Yigit

    #1301689

    Wow, thanks Yigit. This works fine for now.

    I was planning to add a animated gif in future (instead of a button), but for now this is ok. Can I add a gif in future using this method?

    #1301691

    Hi,

    Yes, that would work as well. You would need to insert it using HTML IMG tag into navigation label field – https://www.w3schools.com/tags/tag_img.asp :)

    Best regards,
    Yigit

    #1301692

    Another thing: on mobile the button is now only visible in the menu, when it was a widget it was visible beneath the logo. Can you make that happen?

    #1301695

    Hi,

    I enabled header widget once and chose to display it only on mobile and hid menu item by adding following code to bottom of Quick CSS field

    #top #wrap_all #av-burger-menu-ul li.menu-item-8182 {
        display: none;
    }
    
    #header .widget {
        line-height: 10px;
    }
    
    @media only screen and (min-width: 1025px) {
    #header .widget {
        display: none;
    }}
    @media only screen and (max-width: 1025px) and (min-width: 768px) {
    #header .widget {
        left: 250px;
    }}

    Please review your website :)

    Regards,
    Yigit

    #1301698

    Great!

    Thanks for your help!

    Have a nice weekend!

    #1301704

    Hi,

    You are welcome! You too have a nice weekend :)

    Best regards,
    Yigit

Viewing 16 posts - 1 through 16 (of 16 total)
  • The topic ‘Submenu placed too high’ is closed to new replies.