Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • May 21, 2021 at 3:43 pm #1301657
    JantienM

    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!

    May 21, 2021 at 3:51 pm #1301659
    Yigit

    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

    May 21, 2021 at 3:55 pm #1301665
    JantienM

    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.

    May 21, 2021 at 4:19 pm #1301668
    Yigit

    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

    May 21, 2021 at 4:40 pm #1301675
    JantienM

    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;
}
}
    May 21, 2021 at 4:46 pm #1301677
    Yigit

    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

    May 21, 2021 at 4:49 pm #1301680
    JantienM

    Ok!

    May 21, 2021 at 4:50 pm #1301681
    Yigit

    Hi,

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

    Best regards,
    Yigit

    May 21, 2021 at 4:53 pm #1301683
    JantienM

    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).

    May 21, 2021 at 5:16 pm #1301685
    Yigit

    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

    May 21, 2021 at 5:20 pm #1301689
    JantienM

    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?

    May 21, 2021 at 5:26 pm #1301691
    Yigit

    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

    May 21, 2021 at 5:27 pm #1301692
    JantienM

    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?

    May 21, 2021 at 6:01 pm #1301695
    Yigit

    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

    May 21, 2021 at 6:17 pm #1301698
    JantienM

    Great!

    Thanks for your help!

    Have a nice weekend!

    May 21, 2021 at 7:34 pm #1301704
    Yigit

    Hi,

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

    Best regards,
    Yigit

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