Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • August 14, 2023 at 10:52 am #1416229
    DianaLoola73

    Dear Support Team

    in the edit version of the following website we wanted to show a german and english flag in the header to finally be able to select the appropriate website.

    For this I created a new secondary menu under >Menu and named it with the css classes “flag-german” and “flag-english”.

    In the CSS I entered the following script:
    /*CSS LANGUAGE SELECTION HEADER*/.
    #avia2-menu {
    position: relative;
    top: -3px;
    }

    #top .flag-german {
    background: url(‘http://repaireliana.elianafe.com/wp-content/uploads/2023/08/deutschland.png’) center center no-repeat !important;
    height: 50px;
    width: 50px;
    text-indent: -9999em;
    }

    #top .flag-english {
    background: url(‘http://repaireliana.elianafe.com/wp-content/uploads/2023/08/vereinigtes-konigreich.png’) center center no-repeat !important;
    height: 50px;
    width: 50px;
    text-indent: -9999em;
    }

    #top .flag-german a,
    #top .flag-english a {
    display: block;
    }

    Unfortunately, the whole thing does not appear as it should: http://repaireliana.elianafe.com/
    The icons are not displayed at all, but a red square appears, which I can’t explain at all. Could you please help me?
    What do I have to change so that just the two flags German/English appear next to each other as an image at the top?
    Thank you and best regards, Diana

    August 14, 2023 at 1:48 pm #1416250
    Yigit

    Hey Diana,

    I edited your custom CSS code and changed it to the following:

    
#top .sub_menu .flag-deutsch {
    background: url('https://repaireliana.elianafe.com/wp-content/uploads/2023/08/deutschland.png') center center no-repeat;
    height: 50px;
    width: 50px;
    text-indent: -9999em;
    background-size: contain;
}

#top .sub_menu .flag-english {
    background: url('https://repaireliana.elianafe.com/wp-content/uploads/2023/08/vereinigtes-konigreich.png') center center no-repeat;
    height: 50px;
    width: 50px;
    text-indent: -9999em;
    background-size: contain;
}

    Please review your website.

    Best regards,
    Yigit

    August 15, 2023 at 9:43 am #1416322
    DianaLoola73

    Dear support team, thank you very much for the help to display the images. I have now optimized the size a bit and the first preview is already quite good: http://repaireliana.elianafe.com/

    2 things are not yet as they should be:
    1. the linking: the entire image should work as a button as a link. Unfortunately this is not possible at the moment. If you move the mouse quickly over the image, no link is displayed at all. Only if you search longer with the mouse on the image and you reach the exact center of the image, the hand symbol appears at some point and the link is active. However, it should be the case that the entire image is active as a link. How can I achieve this?

    2. a vertical line appears between the images. How can I remove this?

    Thanks for your help
    Many greetings, Diana

    August 16, 2023 at 12:47 am #1416366
    Yigit

    Hi Diana,

    1- I changed the following code:

    
#top .flag-deutsch a,
#top .flag-english a {
    display: block;
}

    to following one:

    
#top .flag-deutsch a,
#top .flag-english a {
    display: block;
    height: 100%;
}

    2- I added the following code to bottom of the Quick CSS field:

    
#top .av_header_transparency #header_meta li {
    border: none;
}

    Please review your website.

    Best regards,
    Yigit

    August 23, 2023 at 7:32 am #1416913
    DianaLoola73

    Thanks Yigit. That works perfectly!
    Best regards Diana

    August 23, 2023 at 10:31 am #1416933
    Rikard

    Hi,

    Great, I’m glad that Yigit could help you out. Please let us know if you should need any further help on the topic, or if we can close it.

    Best regards,
    Rikard

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