-
AuthorPosts
-
August 14, 2023 at 10:52 am #1416229
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, DianaAugust 14, 2023 at 1:48 pm #1416250Hey 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,
YigitAugust 15, 2023 at 9:43 am #1416322Dear 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, DianaAugust 16, 2023 at 12:47 am #1416366Hi 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,
YigitAugust 23, 2023 at 7:32 am #1416913Thanks Yigit. That works perfectly!
Best regards DianaAugust 23, 2023 at 10:31 am #1416933 -
AuthorPosts
- You must be logged in to reply to this topic.