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

Hi Jordon,
The text widget is sitting far right from the body content. We cant leave it like that too. I am not sure what change have you made but can you please restore it the way it was before. I spend more than a week, posted several time for support to get that right.

The only issue that came up all of a sudden was that logo was not clickable. Please help me restore the way it was before. Then we can focus on making the logo clickable.

Thank you.

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.

Thank you Josue. One last thing, Is it possible to keep it within the same width as body content, currently it is pushed far right to the edge of screen. That is what I see in big screen.

Cheers!

Hi Josue,
Also on mobile screen, the icons overflows the header section and appears on top of body text.
Please see this screenshot.

http://prntscr.com/bdc267

Thank You

Hi Ismael

The issue is fixed. Yigit helped me fix it, thank you for your response! You can close this thread now.

Cheers!

Hi Yigit,
This is a much better solution than the ones I got for days, Thanks for your time and effort. You are a champion. It was great to hear from you.

Cheers!

Just letting you know, I update the theme. No difference.

Anyway, you can close this thread. Thanks

Well Andy, It’s not a different issue. It is the same issue!!
All I am asking is a header with logo left and and a text widget right. And Make it responsive on mobile and on page scroll.

And you are telling me to hire a freelancer for that? Why are you suggesting me to update theme? Will that fix my issues?

Please be clear when answering, I am spending days for such a basic task.

I was proud of having enfold but you have proved me wrong, If you are not interested in answering please dont. I would be lucky have my questions answered by someone else!

Hi
Waiting for someone to help..

Thanks!

Hi
The code does not work, please have a look at this screenshot. I want to completly remove the space above the logo and address bar in the header.

http://prntscr.com/bayh7v

Hi Vinay,

Thank you very much, However the logo image is not clickable. Only the lower bottom of the logo image is clickable and completly unclickable on page scroll (while the header is shrinked).

Please give me css to make the whole widget custom-info behave the same way as logo, shrink on top within the header on page scroll.
It is also no longer responsive since i have added social buttons(they must be there, clients request!) together with address, cant see in mobile.

Please see yourself at:
riseuptours
I have provided the login details in this thread, if you need to login to the website.

Thank you

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

Hi Andy,
When I scroll the page this is how text widget appears on top of the body text, I want to make it shrink with logo and stay inside header element.
Please see the screenshot
http://prntscr.com/ba5x5e

text widget gets cut off in mobile screen, I want it to go below logo in mobile
Please see the screenshot
http://prntscr.com/bak439

Thank you very much.

Hi
Can please someone help me get this right?

Thank you!

Hi Rickard
Please visit the link. This is how i want it to look like however the way i have achieved it is not right. I have build the whole thing from top to bottom using the page builder from inside the page.

It will not be practical in the long run, is it possible to get the exact header and footer look like that?
logo left address right using the standard header so that it appears in all pages and regular menu with links in the footer.

cheers!