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

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;
}
}

Thanks Yigit, That works perfect!

Hi Nikko,

Yes! That worked, thanks a lot!

Just one more question: on mobile I’d like a little bit more whitespace above the button (in the widget), where in the code do I change this?

Hi Nikko,

Almost there! The logo appears correctly now.

But now the logo and header are fixed, this is not what I want on mobile, it needs to scroll up. Also, the text is still not completely visible, it is cut off even more now. You can check it on mobile: http://www.fronikboerderij.nl.

Thanks for your help!

Hi Niko,

That worked for normal screen, but on mobile the logo is not appearing like it should anymore. It is overlapping the text. Before I added this code, the logo was completely visible in the top bar. Can you help me with this?

Thanks!

Okay, I wil look into that. Thanks for your help so far!

See private link

Thanks that worked for the title, what do I use for the excerpt? Thanks!

Hi Yigit,

That’s a very simple solution! Thanks!

And I see now it already says that, next to the option “Use first slides caption as permanent caption”. I didn’t see that earlier. Sorry about that!

• This reply was modified 3 years, 10 months ago by JantienM.

Yes you can close this topic!

Hi Victoria,

I just did, but they say its a design issue… I think probably it’s a matter of adjusting a css code, but I don’t know which one. I hope you guys can help me with this issue, since payments are failed right now, thanks a lot!

No, it has to do with the menu swapper I think.

Because on de the shop site, the hamburger does appear.

When I select main menu instead of secundairy menu on the live homepage, the hamburger does appear. I was wondering if it’s possible to make two main menus to work around this issue?

Ah yes of course, thanks, that worked.