Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • November 22, 2017 at 12:01 pm #880194
    mike.rav

    Hi,

    i am facing a major issue with some of our websites.

    Example: http://aglantzia.org.cy/
    I am providing credentials for login as a private content.

    1. There is a new white bar created on the very top of the website, that holds 2 small icons on the left.
    2. the burger menu is not shown at all on responsive mode

    Please advice as soon as possible

    Thanks

    November 22, 2017 at 1:55 pm #880250
    Yigit

    Hi,

    It seems like you have modified header.php file or includes/helper-main-menu.php file. Those two files were update therefore you would need to copy a fresh copies to your child theme and apply the changes you applied on those files again.

    Regards,
    Yigit

    November 22, 2017 at 3:09 pm #880309
    mike.rav

    Yes,

    I did that in order to apply the tweak for adding an image next to the logo.

    Now I copied the new helper-main-menu.php file under enfold-child/includes/ and added:
    echo “<div class=’header-custom-image’></div>”;
    right after
    $output .= avia_logo(AVIA_BASE_URL.’images/layout/logo.png’, $addition, ‘span’, true);

    and applied the following css:

    .header-custom-image {
    position: absolute;
    right: 0;
    width: 166px;
    height: 123px;
    background: url(http://aglantzia.org.cy/wp-content/uploads/tree.png);
    background-repeat: no-repeat;
    }

    /* Mobile */
    @media screen and (max-width: 487px) {
    .header-custom-image {
    display: block;
    width: 100px;
    height: 50px;
    background: none;
    }
    }

    /* Tablets */
    @media screen and (max-width: 767px) {
    .header-custom-image {
    display: block;
    width: 100px;
    height: 50px;
    background: none;
    }
    }

    But the image is shown at the right edge of the browser. It is also not shown at all in responsive mode.

    November 25, 2017 at 6:10 am #881486
    Rikard

    Hi,

    Please try adding !important to your CSS like this:

    .header-custom-image {
position: absolute;
right: 0 !important;
width: 166px !important;
height: 123px !important;
background: url(https://aglantzia.org.cy/wp-content/uploads/tree.png) !important;
background-repeat: no-repeat !important;
}

    Best regards,
    Rikard

    November 25, 2017 at 8:16 am #881526
    mike.rav

    Hi,

    I did add important next to each line of that css class. But again the header image appears on the right edge of the browser. i need it appear on the right edge of the content area though.

    Can you please provide the css for all three desktop, mobile,tablet views?

    Thanks

    November 25, 2017 at 9:25 pm #881765
    Mike

    Hi,
    It is appearing on the right edge of your browser because of your “right 0!important;” try changing to “right: 4%!important;”
    Adjust the number to suit. Since it is a percentage it will work for all screen views.

    Best regards,
    Mike

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