-
Search Results
-
I’d like to add social media icons and links to the footer, but I don’t see any widget or any way to do that. I see the Social Profiles option, but I don’t see how I can access icons to display them.
Topic: Header Widget settings
Hi, Im desperately trying to achieve a header like the attached – https://ibb.co/yh0xrVj
Im pretty close – http://hamiltonmercer-co-uk.stackstaging.com/
I’d like to place the ‘Header Widget area’ where the social icons are and float the logo left.Currently have ‘logo centred, menu below’ but of course happy to change this.
Can anyone point me to the right CSS to achieve this?
Many thanks in advance
ToddTopic: Social Icons in Big Footer
Is there a possibility to show the social icons in the footer in a widget and not in the socket?
Hi,
to customize the header, I followed the instructions given here: https://kriesi.at/documentation/enfold/header/ and finally here: https://kriesi.at/documentation/enfold/example-of-logo-left-widgets-right-menu-below/Like recommended, I Use the setting “Logo left, Menu right”.
But the menu is now above the logo and widgets and both widgets are not aligned to the right side: https://ibb.co/vPm6T74
Custom CSS (only background color modifications were made):
/************************************ Logo left, Widget center, widget right, menu above ************************************* CSS Settings: » Initiate Flexbox » Topbar » Header » Logo » Menu » Widget » Social icons » Search » Cart icon ***********************************/ /*-------------------------------- » Initiate Flexbox --------------------------------*/ /* Header */ .responsive #top #header, /* Top bar */ .responsive #top #header #header_meta, /* Search icon */ .responsive #top #header #menu-item-search a, /* Cart icon */ .responsive #top #header a.cart_dropdown_link, /* Social icon */ .responsive #top #header #header_main nav .social_bookmarks, /* Logo */ .responsive #top #header #header_main .inner-container .logo, /* Main menu, cart and social icons */ .responsive #top #header #header_main .inner-container .main_menu, /* Widgets */ .responsive #top #header #header_main .inner-container .widget:nth-child(3), .responsive #top #header #header_main .inner-container .widget:nth-child(4), /* Header inner container */ #top #header #header_main .container.av-logo-container .inner-container { display: flex; position: relative; } /*-------------------------------- » Topbar --------------------------------*/ /* Top bar */ .responsive #top #header #header_meta { flex-basis: 100%; } /*-------------------------------- » Header --------------------------------*/ /* Height outer container */ #top #header #header_main .container.av-logo-container { /* Do not change height here */ /* Auto height: Header takes the height of the contents */ height: inherit; line-height: inherit; } /* Header inner container */ #top #header #header_main .container.av-logo-container .inner-container { /* Define header height here */ height: inherit; position: relative !important; flex-wrap: wrap; /* Define header padding */ padding: 10px; justify-content: space-between; } /* Wrappers --------------------------------*/ /* Main header ( logo, menu, widgets ) and topbar */ .responsive #top #header { flex-wrap: wrap; } /* Logo, Menu, Social Icons and Widgets. */ .responsive #top #header #header_main { flex-basis: 100%; } /* Transparent header --------------------------------*/ .responsive.html_header_transparency #top #wrap_all #header { position: absolute; } @media only screen and (max-width: 767px) { .responsive.html_header_transparency #top #wrap_all #main { /* Define padding value for transparent header in mobile */ /*padding-top: 315px !important; */ } } /* Fixed header --------------------------------*/ .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; } /* Main content padding value should be same as the fixed header height. */ .html_header_sticky:not(.html_header_transparency) #top #wrap_all #main, .html_header_sticky #top #wrap_all #main { /* Define padding only if sticky header is active */ /*padding-top: 262px ; */ } @media only screen and (max-width: 767px) { .html_header_sticky #top #wrap_all #main { /* Define padding value for sticky header on mobile */ /*padding-top: 315px !important; */ } } /*-------------------------------- » Logo --------------------------------*/ /* Logo */ .responsive #top #header #header_main .inner-container .logo { order: 2; flex-basis: 33%; /*width: auto;*/ /* Define scalable min width of the logo on small screens */ min-width: 100px; z-index: 9; /* Define scalable max width of the logo on big screens */ /* Logo width: (auto | 100% | px ); Set auto to display the uploaded image size */ max-width: 180px; } /* Logo image size */ .responsive #top #header .logo, .responsive #top #header .logo a, .responsive #top #header .logo img { width: auto; /* Height specification is not required. It is proportional to the max width of the logo */ height: auto; align-items: center; align-self: center; justify-content: center; } /* Vertically center transparency logo */ .responsive #top #header .logo span img { position: absolute; top: 50%; transform: translateY(-50%); } /*-------------------------------- » Menu --------------------------------*/ /* Menu outer container: Menu with siblings cart and social icons */ .responsive #top #header #header_main .inner-container .main_menu { order: 1; /* Define menu width */ flex-basis: 100%; align-items: center; align-self: center; height: inherit !important; justify-content: center; margin-bottom: 20px; } /* Navigation */ #header .av-main-nav { display: flex; flex-wrap: nowrap; } /* Activate burger menu */ @media only screen and (max-width: 1100px) { #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) { /* Mobile menu position fix */ .responsive #top .av-logo-container .avia-menu { display: flex!important; align-items: center; } } /* Mega menu submenu position fix */ .responsive #top #header .avia_mega_div { /* Define megamenu submenu top value */ /* top: 300px; position: fixed; left: 50%; transform: translateX(-50%);*/ } /*-------------------------------- » Widget --------------------------------*/ /* Widgets */ .responsive #top #header #header_main .inner-container .widget { flex-basis: auto; padding: 0; clear: none!important; justify-content: center; align-self: center; align-items: center; z-index: 1; margin: 0 10px; } .responsive #top #header #header_main .inner-container .widget>div { width: 100%; line-height: 14px; padding: 0 10px; } /* Widgets areas */ .responsive #top #header #header_main .inner-container .widget:nth-child(3){ order: 3; flex-basis: 33%; } .responsive #top #header #header_main .inner-container .widget:nth-child(4){ order: 4; flex-basis: 33%; } /*-------------------------------- » Social icons --------------------------------*/ /* Flex support and position fix */ .responsive #top #header #header_main nav .social_bookmarks { top: auto; margin-top: 0; align-items: center; } /* Inherit height for flex alignment */ .responsive #top .av-logo-container .social_bookmarks li { height: inherit; } /*-------------------------------- » Search --------------------------------*/ /* Your styles here */ /*-------------------------------- » Cart --------------------------------*/ /* Cart position fix */ #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; } }Hello,
I have been trying this for a few days but I can’t find a solution. Maybe someone can help me…
I am working on this website : https://hellobijoute.com/
My client asked me to use .svg files made by him as social icons.
So i chose to use an HTML widget in the header of the website :<a href="https://hellobijoute.com/contact/"> <img alt="contact" src="https://hellobijoute.com/wp-content/uploads/2019/07/CONTACT.svg" /> </a>Then i used this to make the icon appear on the right part of the header :
#custom_html-4 { position: absolute; top: 15%; right:10%; transform: translate(55%, -45%); z-index: 999; }Now i have two issues :
-1-
It does the job when i open the page on Firefox.
But on Chrome it dosen’t show the picture. On Edge it show a bigger picture.-2-
When i try to add another picture (to have a second link to another page, Instgram actually) the pictures are displayed on top of one another or not at all.Could someone help me please ?
Topic: Add second widget in header
Hi
I’ve tried different options based on articles you have about adding widgets to headers.
I already have a header widget with a text widget for an h1 custom title “SilviaFindings, Canada”.
The second widget I want to add is the WooCommerce Predictive Search widget and position it at the end of the secondary menu just before the social media icons. I need help to figure this layout/positioning issue because no matter what I try, the search box/icon is always in the center of the header.Much appreciate any help you can give me.
Thanks
LyseTopic: Center widget in column
Hello,
I am pulling my hair out and I know this has got to be a very simple fix. I have a widget (social icons) that I would like centered in a single column. I have searched and tried multiple combinations of custom CSS snippets and have not been able to get it centered. The URL is int he private content and it is the section under the Follow Us on Social Media heading. It is the row of social media icons.
Thank you for your help.
I think this would be a fairly easy and highly appreciated add-on.
So.. Just a widget that displays the social media profiles from the theme settings.. maybe with a setting for icon size
As it is now I have to do this manually for about 80% of the sites I build
and maybe update the instagram icon ;-) and add WhatsApp and Phone as an option.. and remove google plus
i need to change social media icons color in footer socket, i tired to change it from Quick CSS by adding the following code with no response
#socket .av-social-link-facebook a {
color: #fff !important;
background:#fff;
background-color: #37589b !important;
}
#socket .av-social-link-twitter a {
color: #fff !important;
background-color: #46d4fe !important;
}
#socket .av-social-link-youtube a {
color: #fff !important;
background-color: #a72b1d !important;
}
#socket .av-social-link-gplus a {
color: #fff !important;
background-color: #de5a49 !important;
}
#socket .av-social-link-instagram a {
color: #fff !important;
background-color: #a67658 !important;
}Topic: Social Icons in Footer
Hi!
I put a widget in the footer where I displayed some social icons with links to the pages.
I wanted to center the icons on mobile screen but didn’t succeed. Furthermore, I would like to change the padding between these icons. I tried to use the selector “#footer .social_bookmarks li a” to center the elements and change padding but nothing happens.
Please find my current custom CSS regarding the footer as follows:#footer .widget {
text-align: center !important;
}#footer. textwidget {
margin: 0px !important;
}#footer .textwidget,
#footer p {
font-size: 15px;
}#footer h3.widgettitle {
padding-top: 0px !important;
margin-top: 0px !important;
}
#footer .social_bookmarks li a {
font-size: 30px;
}Hi,
is it possible to see the Scoial Media Icon’s in the Widget, but not in Header/Footer.
I use these CSS, but the Icon’s are also not show in the widget
@media only screen and (max-width: 480px) {
#top .social_bookmarks { display: none !important; }}Thanks
