Hi Vinay,

I replaced the previous code with the new one. Now it works fine. Thank you very much!

I tried to change the English word “Menu” at the left side of the burger icon to the German word “Menü”, but I couldn’t figure it out.

Could you please tell me how to do that?

Best regards,
zizibe1

Hi Ismael,

Thank you for your reply.

On my screen (2560 × 1440 px), the full size of the image is:

Original image: 1196 × 798 px
Gallery: 1196 × 798 px -> image sharp
Lightbox of Gallery: 1196 × 798 px -> image sharp

Original image: 1210 × 806 px
Image Media Element: 1210 × 806 px -> image sharp
Lightbox of Image Media Element: 1199 × 799 px -> image blurry

How can I adjust the lightbox of the “Image media Element” so the image isn’t resized down?

Best regards,
zizibe1

Hi Vinay,

Thank you for your reply.

I added the code to Quick CSS. But now, the hover color is gone. When I hover on the word “Menü”, it stays black. It doesn’t turn red anymore when I hover on it.

How can I fix this?

Best regards,
zizibe1

Hi Victoria,

Thank you for your reply.

I added the code to Quick CSS. Now, when you hover on the word “Menü” next to the burger icon, it changes its color to red. When you move the cursor away from the word “Menü”, first it changes its color to grey and then to black. But it should change its color immediately to black when you move the cursor away.

How can I fix this?

PS: I also removed the code from Quick CSS and put it into themes/enfold/css/custom.css, but this didn’t work.

Best regards,
zizibe1

Hi Vinay,

Yes, it looks okay now. Thank you very much for your support.

I added the word “Menü” (in English: menu) before the burger icon by adding this code to Quick CSS:

/* add the word "Menü" before the hamburger icon */
@media only screen and (min-width: 769px) {
  li.av-burger-menu-main a:before {
    content: 'Menü';
    position: absolute;
    left: -40px;
    top: 0%;
  }}

Now, the hover color of the word “Menü” is grey. I would like to change hover color to red.

How can I achieve this?

Best regards,
zizibe1

Hi Ismael

Thank you for your reply.

a) I found the mistake. I had the following code in my Quick CSS:

/* no border around gallery thumbnails */
#top div .avia-gallery img {
    border-style: none;
    padding-top: 0px;
}

I removed “padding-top: 0px;”. Now the white space between the big image of the gallery and the thumbnails below is the right size.

b) I removed the code you’ve mentioned in your previous post. Now the thumbnails below the big image are all the same size.

But now the big image isn’t left-aligned and right-aligned to the thumbnails below anymore. Now the big image is wider then the thumbnail row below. It’s the same problem I’ve already described above in my post of July 13, 2018 at 12:08 pm, #985121.

c) Yes, I have a larger version of the image.

The original details of the image are:
File type: image/jpeg
Dimensions: 5000 × 3333 px
File size: 18.2 MB

Here are the details of the uploaded image which is blurry:
File type: image/jpeg
Dimensions: 1200 × 800 px
File size: 356 KB

What file size would you recommend to get a sharp but still fast-loading image?

I’ve read online that the file size should be smaller than 200 KB because of the visitors of the website who have a slow internet connection. Is that true?

Best regards
zizibe1

Hi Mike,

Thank you very much for your support. Now, the little grey box with the image title in it is hidden.

Thank you also for the code to hide the “number” of images under the lightbox. It works fine.

Best regards,
zizibe1

Hi Vinay

Thank you for your replay.

1. Sorry, but I think I’ve to rephrase my question.

I went to Enfold Child > Main Menu > General > Menu Items for Desktop and chose “Display as icon”.

On desktop, I went to my website and clicked on the burger icon to open the menu (white font on slightly transparent black background).

Now, there’s a little cross in the upper right corner of the browser window (by clicking on this cross, I can close the menu).

When I hover on this little cross, it changes its color from white to red. That’s okay. I want to keep that.

But the problem is that the two lines of the cross change their color slightly time-shifted. It looks like something’s broken.

How can I fix this?

2. Okay. Thank you very much for this information.

Best regards,
zizibe1

Hi Vinay,

Thank you for your reply.

1. I replaced the previous code by the new one. Now, the three bars of the burger icon change their hover color simultaneously. But when I open the mobile menu and hover on the little cross in the right corner of the browser window, the two lines of the cross don’t change their color simultaneously. How can I fix this too?

2. Okay. But is it necessary to end every single code with /* End CSS */?

Best regards,
zizibe1

Hi Jordan,

Thank you for the code. I added it to Quick CSS.

Now, the burger icon turns only red when you hover exactly on one of the three bars of the icon. If you hover between the bars, the burger icon stays black. How can I fix this?

Best regards,
zizibe1

Hi Jordan,

Thank you for your reply.

OK, I added the code to Quick CSS. Now the sliding of the caption is disabled.

What should I do next?

Best regards,
zizibe1

Hi Ismael,

Thank you for your reply.

I added the code to Quick CSS, but unfortunately, the big image of the gallery still is blurry.

Edit: There is a further problem. The big image should be left-aligned and right-aligned to the thumbnails below. When you remove the gallery padding, the big image is wider then the thumbnail row below. Moreover, the white space between the big image and the thumbnails is smaller then the white space between the thumbnails. When you remove the padding of the thumbnails too, the white space between the image and the thumbnails is missing.

Best regards,
zizibe1

• This reply was modified 6 years, 4 months ago by zizibe1. Reason: further problem

Hi Jordan,

Thank you for the link.

I removed the code which disabled the caption slide from Quick CSS.

Then I opened FileZilla and connected to my server.

I went to wordpress > wp-content > themes > enfold > css > custom.css (in “enfold child”, I couldn’t find an custom.css file).

I dragged the custom.css file to my desktop and opened it with TextEdit (I also have Adobe Dreamweaver on my MacBook but never used it so far).

Then I inserted the following code below “Desktop Styles”, “/* Add your Desktop Styles here */”:

.avia_transform .av_slideshow_full .active-slide .avia-caption-title, .avia_transform .av_fullscreen .active-slide .avia-caption-title, .avia_transform .av_slideshow_full .active-slide .avia-caption-content, .avia_transform .av_fullscreen .active-slide .avia-caption-content {
visibility: visible;
-webkit-animation: none !important;
-moz-animation: none !important;
animation: none !important;
}

I dragged the custom.css file back to the server (Action: Overwrite).

Then I did a hard refresh in Chrome (hold shift and click the reload button).

Unfortunately, it doesn’t work. The caption still slides in from the left.

What did I wrong?

Best regards,
zizibe1

Hi Ismael,

Thank you for your reply.

2.) That’s it. I removed the css code you suggested in your first post. Now, the lightbox of the gallery works.

3.) Now, it works fine. I replaced the code of your first post by the code of your last post in Quick CSS. Then I added “custom-gallery” without quotes to the custom css class field of each gallery where I wanted to hide the first thumbnail.

Although I chose “No Scaling (Original Width X Original Height)”, the big image of the gallery is not as sharp as the same image opened in a lightbox or added to a image media element . How can I fix this?

Best regards,
zizibe1

Hi Ismael,

Thank you for your reply.

2.) I opened FileZilla and connected to my server.

I went to wordpress > wp-content > themes > enfold > config-templatebuilder > avia-shortcodes > gallery and moved the gallery.js file to my desktop. (In wordpress > wp-content > themes > enfold child, I couldn’t find this file.)

There, I opened it with TextEdit (I also have Adobe Dreamweaver on my macbook but never used it so far), removed the block code you wrote about in your post, saved the file and moved it back to the gallery folder on the server (Action: Overwrite).

Then I went to the page “Portfolio” of my website, pressed shift and the reload button of Chrome, but unfortunately, the lightbox of the gallery still doesn’t work.

3.) Referring to your link, I turned on the custom css class field.

Now when I go to “Pages” > my page “Portfolio” > my first gallery > “Edit element” and scroll down, I see the “Custom CSS Class” field.

What do I have to add there to except this gallery of the rule which removes the first thumbnail?

Best regards,
zizibe1