Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #649515

    Hi
    All of a sudden, my website’s header logo image is not clickable. The link is provided in the private content section. It was working fine the last time i checked a few days ago. Please help.

    Cheers

    • This topic was modified 7 years, 9 months ago by kaloraat.
    #649550

    Hey kaloraat,

    Thanks for getting in touch with us!

    It looks like the container for the text widget in the header was overlapping the container for the logo. Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

    #header .widget .textwidget {
        width: 50%;
        float: right;
    }
    

    Best regards,
    Jordan

    #649564

    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.

    #649577

    Hi,

    I managed to fix the issue for you. Please look and ensure everything is okay now.

    Best regards,
    Jordan

    #649580

    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!

    #650048

    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.

    #650116

    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 7 years, 9 months ago by kaloraat.
    #651759

    Hi,

    It appears you have made some changes and it looks a lot better in the mobile now.

    However the address still run into the logo to resolve this issue please consider makign the logo size smaller and move the menu button to right.

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

    Best regards,
    Vinay

    • This reply was modified 7 years, 9 months ago by Vinay.
    #651850

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

    Hi,

    I see this on iPhone 6 screen size:

    View post on imgur.com

    Which iPhone version are you using? please clear browser cache and refresh a few times. Check on another iPhone too. You can use this code to move your header widget more to the right:

    @media screen and (max-width: 767px) {
    #header .widget {
    right: 100px;
    }}
    

    Make sure you don’t use any caching plugin (or switch off caching before deactivating caching plugin).

    Best regards,
    Andy

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.