-
AuthorPosts
-
May 7, 2021 at 10:47 am #1298908
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, 7 months ago by JantienM.
May 10, 2021 at 5:02 am #1299216Hey 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,
RikardMay 10, 2021 at 2:20 pm #1299371Hi, I did now…
May 10, 2021 at 4:14 pm #1299404Hi 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,
NikkoMay 10, 2021 at 6:10 pm #1299467Hi 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 #1299533Hi 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,
NikkoMay 11, 2021 at 9:01 am #1299597Hi 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 #1299827Hi 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,
NikkoMay 12, 2021 at 9:04 am #1299856Hi 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 #1300033Hi 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,
NikkoMay 13, 2021 at 11:26 am #1300113Hi Nikko,
The content below the header is now visible, but the header area is still fixed.
May 14, 2021 at 11:06 am #1300297Hi 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,
NikkoMay 17, 2021 at 11:57 am #1300701Hi 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 #1300718Hi 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,
NikkoMay 17, 2021 at 1:09 pm #1300724YES!!
Great, all good now.
Thanks for your help!
May 17, 2021 at 1:25 pm #1300734Hi JantienM,
We’re glad that we could help :)
Thanks for using Enfold and have a great day!Best regards,
Nikko -
AuthorPosts
- The topic ‘Add button in header using widget’ is closed to new replies.