Hi Vinay
Thank you for your reply. With the css you provided, It looks perfect in small screen. I tried resizing the browser it looks great

but it still looks like this in iphone. see this screenshot.

and also the text is not clickable, no links , no hover style.

This is all the css used in quick css to get this header widget right. May be it is a bit too much :) May be it needs a bit of clean up. Your help would be highly appreciated.

/* header widget for LARGE screen*/
#header .widget {
  font-size: 34px;
  line-height: 40px;
  position: absolute;
  right: 50px;
  top: 0;
  z-index: 100;
  height: 100%;
  margin: 0;
  padding: 0;
    text-align: right;
}

@media only screen and (min-width: 767px) {
#header .widget{
max-width: 1210px;
left: 0;
right: 0;
margin: 0 auto;

}
}

#header.header-scrolled .widget{
	font-size: 23px;
	line-height: 30px;
}

#header .widget .textwidget, #text-2{
	display: table;
        width: 100%;
	height: 100%;
        float: right;
        z-index: -999 !important;
}
#header .widget .textwidget .custom-text{
	display: table-cell;
	vertical-align: middle;
}

#header .custom-text .icon{
  font-size: 42px;
}

#header.header-scrolled .custom-text .icon{
  font-size: 32px;
}

#header .custom-text .icon span{
	float: none;
	display: inline-block;
	margin-left: 0;
	margin-right: 9px;
}

#header .widget .custom-text p,
#header .widget .custom-text a{
  font-weight: bold;
  color: black;
  margin: 0;
}

/* header widget anchor text hover, it affects social icons too*/
#header .widget .custom-text a:hover{
  color: green;
}

/* header widget for MEDIUM screen*/
@media screen and (max-width: 989px) and (min-width: 767px) {
  #header .widget {
    font-size: 26px;

  }

  #header .custom-text .icon{
    font-size: 40px;
  }

}

/* header widget for SMALL screen*/
@media screen and (max-width: 767px){
  #header .widget {
    font-size: 14px;
    line-height: 24px;
    right: 100px;
    padding: 0;
  }

  #header .custom-text .icon{
    font-size: 26px;
  }

  .responsive .logo,
  .responsive .logo a {
  	height: 200px !important;
  }

  .responsive .logo img{
     height: 180px !important;
  }
}

/*
.content {
  padding-top: 10px;
  padding-bottom: 10px;
}
*/

.main_menu {
  left: 0px;
  right: auto;
  height: 0px;
  display: none;
}

.special_amp {
  font-family: inherit;
  font-style: normal;
  font-size: inherit;
  line-height: inherit;
  font-weight: bold;
  color: inherit!important;
}

/*footer image media query*/

@media screen and (max-width: 720px) {
    .textwidget img.avia_image {
        margin-right: 100px;
    }
}

#text-2 {
  right: 100px !important;
   margin-right: 0px !important;
}

/*reduce color box top padding*/

.content {
padding-top: 10px;
padding-bottom: 10px;
}

/* added */

#header .widget .textwidget, #text-2 {
    display: table;
    width: 35%;
    height: 100%;
    float: right;
    display: inline-flex;
padding: 45px 0px 0px 0px;
}

#header.header-scrolled#header .widget .textwidget, #text-2 {
    display: table;
    width: 35%;
    height: 100%;
    float: right;
    display: inline-flex;
padding: 10px 0px 0px 0px;
margin-left: 100px;
}

@media screen and (max-width: 1900px) and (min-width: 989px) {

#text-2 {
  right: 40px !important;
   margin-right: 0px !important;
}

}

@media only screen and (max-width: 766px) and (min-width: 480px){

#text-2 {
  right: 100px !important;
   margin-right: 0px !important;
}

}

@media screen and (max-width: 767px){
  #header .widget {
    font-size: 14px;
    line-height: 24px;
    right: 130px;
    padding: 0;
  }

  #header .custom-text .icon{
    font-size: 26px;
  }
  .responsive .logo img{
    height: 140px !important; 
  }
}

@media screen and (max-width: 480px) {
.responsive .logo img {
    height: 90px !important;
}
.responsive #top #wrap_all .container {
    width: 99%!important;
    max-width: 99%!important;}}

Hey Ismael!

You,ve been of great help! I very much appreciate your diligence; however, two things haven’t worked out for me yet.

1. I’ve attached a pic of the FOOTER where you´ll notice that despite I have set it as a 3 columns layout, it looks unbalanced (a bit too much inclined towards the left side) I need it to be PERFECTLY CENTRED and showing nothing else but the content on the cental column (the information in the other columns didn’t disappear as I told you in a previous message. I’ve cleaned the WIDGETS area but they insist in showing up as you can see in the screenshot.

2. The quick code to make the social icons black (normal state) and grey when hovered didn’t work. I’ve placed them on top of the page as well but they didn’t catch the quick code neither. Moreover, how could I make the social icons to show perfectly centered on the socket and the copyright info beneath them. Now I’ve given you the whole picture of what I want to accomplish at the button area (footer+socket). I need all this info to be centred and look super clean in B&W.

3.Could you pls give guidance to add another GOOGLE FONT to the theme?

4. Finally I would like to give my visitor the possibility to pause the LOOPING VIDEO at the opening with a single click (it’s linked form Youtube), is there any way to apply this feature to the theme pls?

I hope you don’t find these requests too overwhelming although they surely are, great thanks again!

HC

Hello Guys!

I need help with the following items pls:

1. I’ve tried to leave a single centred widget on the footer, but the ones on the sides won’t disappear completely (some remains are inavoidable).
2. Is there any quick code you could provide me with to leave the social media icons in black colour and then grey when hovered over?
3. Any quick code to leave the drop down menus with a transparent background?
4. Is it best practice to upload a video directly to the media library and place as an opening or just linking it form Youtube/Vimeo?

Great thanks in advance!

HC

Hi Andy,

Yes, that’s the code I copy and pasted and changed the icon name and code to Sina-weibo, but it doesn’t work

Also, whenever I add the code into the functions.php file, the site goes down and my programmer friend said “redeclare avia_add_custom_icon() to cause the issue”

Can anyone help me add the sina-weibo icon in the social profile dropdown box so that I can add weibo as an option in the social share widget please?

Hi
Yes it is responsive. The problem is:
Issue 1. I cant click logo, it is not clickable. Try yourself. I think the right side widget is sitting on top of the logo element or something wrong!

Issue 2. Social icons appears on top of body. It is not contained within header. It does need to shrink with the header element on page scroll. Cant leave it flow out of header can I?

screenshot

This header widget is supported by enfold, not something i am trying to customize beyond theme’s ability.. But it has to not only look right but perform right too. Logo is not clickable because of this widget. It also does not contain all the elements within header, try scrolling page up and down visit page. This is extremly sad! I will update theme but it is clear that these issues are not theme update related.

Please fid\x this.
Thank you.

HI Vinay,

Thank you, the text option worked. However, the widget situation is still problematic because I can’t use any other widgets, like my magic box, and my social media icons have disappeared. When you looked my site, did everything seem ok?

Thanks again,
Carine

Hi Yigit,
You are legend! I am very happy to get your quick response. Please have a look at this link. When i scroll the page, the logo gets smaller however address on the right side dont and overlaps the body text. I want to add social icons just below address in the same widget too.

Is it possible to make it shrinkable and responsive the same way as logo with all the content still visable? May be with a slight drop shadow? Here is the link and screenshot.

http://www.riseuptours.com.au/sri-lanka/

http://prntscr.com/ba5x5e

Also, Is it possible to make the address widget go under the logo in mobile? In mobile screen it is still cutting off.

I also need to hide menu icon on mobile devices.

Is it possible to have other icons on image hover than default circle with right pointing arrow lcon?

Is it possible to display search box somewhere but not with menu, I have menu display none at the moment.

I am sorry but I cant change the pipe’s color to black between the links in footer. They are faded grey at the moment. Please see this screenshot. http://prntscr.com/ba66cf

padding seems too big between header and body, maybe because i have done display:none to menu. Is there a way to reduce the padding there?

Hope to hear from you soon!
Thank you for your great support!

• This reply was modified 9 years, 9 months ago by kaloraat.

Thank you, Ismael.

I added my credentials to my private data area. I believe that I have the latest version of everything, but I will double check. I have noticed that the other widgets on my home page isn’t working either. And my social icons aren’t working too.

Thanks for all your help.

• This reply was modified 9 years, 9 months ago by carine113.

Thanks Ismael – adding a widget might be overkill for what I need. Is there a simple way using CSS to make the text and the Social Media Icons larger?

Yigit-

I have added the code in a text widget and the Quick CSS code. The icons do not look as nice as the ones from the Social Profile WIDGET. Is there a way to add the Houzz logo to that area? Sure would look nice. :-)

Patty

I have been through that tutorial and reviewed many of the forums regarding this. It’s not working…

Here is what I have added to my CHILD THEME: functions-child.php
// Register new icon as a theme icon
function avia_add_custom_icon($icons) {
$icons[‘houzz’] = array( ‘font’ =>’houzz’, ‘icon’ => ‘ue801’);
return $icons;
}
add_filter(‘avf_default_icons’,’avia_add_custom_icon’, 10, 1);

// Add new icon as an option for social icons
function avia_add_custom_social_icon($icons) {
$icons[‘Houzz’] = ‘houzz’;
return $icons;
}
add_filter(‘avf_social_icons_options’,’avia_add_custom_social_icon’, 10, 1);

I can see the Houzz logo in the ICON list but it does not appear in EITHER of the drop down list in the Social Profiles Section of theme options and in the Social Profile Widget of Enfold.