Header logo image not clickable

Hi Jordan,
Thanks for your quick response. However the code you provided made no difference. With the existing code it was working perfectly fine until few days ago. Not sure what happened.

Hi Jordan,
Yes it is clickable but the test widget has no more space on top. Before it had white space on top, was aligned horizontally with the logo and looking good. can you please make it same as before. text widget need white space on top.

I tried to put margin-top on the textwidget but on page scroll the widget appears on top of body text. please make it same as before and we should keep it responsive too for all screen size and also on page scroll.

Thanks!

Hi
I have managed to fix it except for small mobile scree. please look at the screenshot i provided in private section.
Mobile number is broken down to 3 paragraphs, and unnecessary padding on top and bottom. can you please help me fix it.

You see this only on iphone (in android looks ok), If you only resize the google chrome browser, it does not look like that.

Also, Just noticed that when i scroll the page slowly, the widget appear on top of body. please see the screenshot.

All I am really looking for is a text widget with icons on the right, properly aligned with the logo and be responsive on page scroll and different screen sizes. But it has taken weeks for me and also asked you guys many times for the same issue over and over again.

Can we fix it once, so that we don’t have to deal with this issue again.

Thank you

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

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