Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • May 7, 2021 at 10:47 am #1298908
    JantienM

    Hi,

    I used this link http://kriesi.at/documentation/enfold/adding-a-widget-area-to-the-header/ to add a widget to my header. This works, but I’m having trouble positioning the widget. I tried using CSS as described on this documentation page: https://kriesi.at/documentation/enfold/example-of-logo-left-widget-center-menu-right/#toggle-id-2

    The widget stays at the left though, I used this CSS code:

    .responsive #top #header #header_main .inner-container .widget {
    order: 3;
    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%;
    line-height: 14px;
    padding: 0 10px;
    background: gold;
}

    Can you help me placing it centered between logo and menu? And also styling the button? Beacause the golden background is also not visible right now.

    Extra info: I changed the file “avia-snippet-sticky-header.js”, to acclomplish the following as described in this thread: https://kriesi.at/support/topic/shrinking-logo-but-not-header/

    • This topic was modified 3 years, 6 months ago by JantienM.
    May 10, 2021 at 5:02 am #1299216
    Rikard

    Hey JantienM,

    I can’t see the widget on your actual site, could you add it back so that we can inspect it please?

    Best regards,
    Rikard

    May 10, 2021 at 2:20 pm #1299371
    JantienM

    Hi, I did now…

    May 10, 2021 at 4:14 pm #1299404
    Nikko

    Hi JantienM,

    Please try to replace the code you posted above with this one:

    .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%;
    line-height: 14px;
    padding: 0 10px;
    background: gold;
}

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

    Hope it helps.

    Best regards,
    Nikko

    May 10, 2021 at 6:10 pm #1299467
    JantienM

    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!

    May 11, 2021 at 5:20 am #1299533
    Nikko

    Hi JantienM ,

    Can you try adding this CSS code as well to fix it for mobile:

    @media only screen and (max-width: 767px) {
  .responsive #top #header #header_main .inner-container .logo {
    overflow: hidden;
  }

  .responsive #top #header .logo a {
    max-height: 200px !important;
    top: 65px;
  }

  .responsive #top #header .logo img {
    max-height: 200px !important;
  }
}

    Best regards,
    Nikko

    May 11, 2021 at 9:01 am #1299597
    JantienM

    Hi Nikko,

    I added the code. The logo is better now, but only the top of the logo is visible. I want the whole logo to be visible. It also looks a bit squeesed. I added an image of how I want the logo to appear in private content.

    I also see that the top of the introduction text is partly placed under the header, this way it is not completely visible.

    Thanks again!

    May 12, 2021 at 6:11 am #1299827
    Nikko

    Hi JantienM,

    Thanks for providing the screenshot, please remove the last code I gave and replace it with:

    @media only screen and (max-width: 767px) {
  #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;
  }
}

    Best regards,
    Nikko

    May 12, 2021 at 9:04 am #1299856
    JantienM

    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!

    May 13, 2021 at 7:09 am #1300033
    Nikko

    Hi JantienM,

    Can you try to replace the last code I gave:

    @media only screen and (max-width: 767px) {
  #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;
  }
}

    to:

    @media only screen and (max-width: 767px) {
  .responsive #top #wrap_all #main {
    padding-top: 387px !important;
  }

  .responsive #top #header.header-scrolled .logo, 
  .responsive #top #header.header-scrolled .logo a, 
  .responsive #top #header.header-scrolled .logo img {
    max-height: 100px !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;
  }
}

    I hope this helps.

    Best regards,
    Nikko

    May 13, 2021 at 11:26 am #1300113
    JantienM

    Hi Nikko,

    The content below the header is now visible, but the header area is still fixed.

    May 14, 2021 at 11:06 am #1300297
    Nikko

    Hi JantienM,

    I see, can you try to remove this code from the last code I gave:

    .responsive #top #header.header-scrolled .logo, 
  .responsive #top #header.header-scrolled .logo a, 
  .responsive #top #header.header-scrolled .logo img {
    max-height: 100px !important;
  }

    And replace it with:

    .responsive #top #wrap_all #header {
    position: absolute !important;
}

    Best regards,
    Nikko

    May 17, 2021 at 11:57 am #1300701
    JantienM

    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?

    May 17, 2021 at 12:54 pm #1300718
    Nikko

    Hi JantienM,

    Please add this code just below the last code I gave (which should be inside the media query):

    .responsive #top #header #header_main .inner-container .widget {
    padding-top: 12px;
    margin-bottom: -8px;
}

    Best regards,
    Nikko

    May 17, 2021 at 1:09 pm #1300724
    JantienM

    YES!!

    Great, all good now.

    Thanks for your help!

    May 17, 2021 at 1:25 pm #1300734
    Nikko

    Hi JantienM,

    We’re glad that we could help :)
    Thanks for using Enfold and have a great day!

    Best regards,
    Nikko

  • Author
    Posts
Viewing 16 posts - 1 through 16 (of 16 total)
  • The topic ‘Add button in header using widget’ is closed to new replies.