Hi Rikard,

Thank you for your reply.

Unfortunately, the code doesn’t work. Now, the font colors on the mobile menu are:

– white font: when you don’t hover near a menu item
– grey font: when you hover near or on a menu item

That’s correct so far. But the font color of the menu item of the page you’re right on should be red.

Please don’t forget to tell me also how I can modify the desktop menu (white background):

– black font: when you don’t hover near a menu item
– grey font: when you hover on a menu item
– red font: the menu item of the page you’re right on

Please answer also the question of my last post:
Is “red” exactly the same color as “#ff0000”?

Thank you very much for your efforts.

Best regards,
zizibe1

Hi Rikard,

Thank you very much for your reply.

After I added your code to the Quick CSS, the font colors on the mobile menu are:

– white font: when you don’t hover near a menu item
– grey font: when you hover near a menu item
– red font: when you hover on a menu item

But I would like to have the font colors like this:

Mobile menu (slightly transparent black background):
– white font: when you don’t hover near a menu item
– grey font: when you hover on a menu item
– red font: the menu item of the page you’re right on

Desktop menu (white background):
– black font: when you don’t hover near a menu item
– grey font: when you hover on a menu item
– red font: the menu item of the page you’re right on

Exception: The Page “Home” (frontpage) is not listed in the menu. So when you’re on the page “Home”, logically, the font color of all menu items should be white (mobile) resp. black (desktop).

By the way, is “red” exactly the same color as “#ff0000”?

Best regards,
zizibe1

Hi Ismael,

1. The code works fine. Thank you very much.

2. The code works, but yes, I still need the galleries to open the lightbox. Now they don’t anymore. How do I have to edit the gallery script directly?

3. The code works , but now, I have the following problem:

The first gallery on my page “Portfolio” contains only two images which I want to show next to each other and aligned center of the page. There, I chose “Gallery Style: Small Thumbnails” instead of “Big image with thumbnails below”. Now, because the fist thumbnail is removed, the first of the two images isn’t visible either.

I considered to replace the gallery by two image elements next to each other (Link Settings: Lightbox), but if I wanted them to align center of the page, they would be either too big or too small.

– images too big:
1/2 Layout Element with first image in it | 1/2 Layout Element with second image in it

– images too small:
1/4 Layout Element | 1/4 Layout Element with first image in it | 1/4 Layout Element with second image in it | 1/4 Layout Element

Now in the gallery, the two images are aligned center of the page and are just the right size.

– right image size:
1/5 Layout Element | 3/5 Layout Element with Gallery in it | 1/5 Layout Element

That’s the reason I would like to keep the gallery.

Is there a way to except the first gallery on my page “Portfolio” of the rule which removes the first thumbnail? Or do you find another solution?

Best regards,
zizibe1

Hi Mike,

Thank you very much for your reply and the adjustments.

Yes, as you suggested, I removed the css rule of the “red-dot-2” span in the Quick CSS.

Unfortunately, the position of the red dot is too low now, but referring to your first post, I could adjust it. I used “em” instead of “pt” and changed your code like this:

.red-dot {
font-size: 0.8em;
color: #ff0000;
vertical-align: 0.2em;
margin-left: -0.1em;
margin-right: -0.1em;
}

As you see above, I also adjusted the left and right margin a little bit. Now, visually, the position of red dot looks alright to me.

***

For my page with the text block, the code from your second post works fine. Thank you very much.

***

Back to the caption title of the Fullscreen Slider. On mobile devices, the text & red dot are a little bit too small. I’ve tried to increase them using the code of your second post combined with the code of your first post and “h2” instead of “h3”, but nothing happens. How can I adjust this?

Here is the modified code I added to the Quick CSS:

@media only screen and (max-width: 767px) { 
h2.about {
font-size: 24px !important;
}
.red-dot {
font-size: 1em;
color: #ff0000;
vertical-align: 0.2em;
margin-left: -0.1em;
margin-right: -0.1em;
}
}

Best regards,
zizibe1

Hi Rikard,

Okay. Thank you very much again for your support.

You can close this topic now.

Best regards,
zizibe1

Hi Rikard,

Great! Thank you very much for your support.

Do you have any explanation why the code block element didn’t work?

Should I also replace the code block element on the page “Leistungen” with a text block element although it seems to work fine?

Best regards,
zizibe1

Hi Ismael,

It worked. Thank you very much for your reply.

You can close this topic now.

Best regards,
zizibe1

Hi Victoria,

Yes, that’s it. The code I added to the Quick CSS in Enfold Child > General Styling seems to overwrite the code in the Stylesheet in Appearance > Editor.

Thank you very much for your reply.

Best regards,
zizibe1

Hi Vinay

Thank you for your reply and the all the information. I appreciate it a lot.

Questions:

1. I went to Appearance > Editor > Select theme to edit: Enfold Child > Select > Stylesheet > Widget text style > Text style > letter-spacing: 2.0em; (instead of 0.35em;) > Update File and then hard refresh in Chrome by pressing shift and clicking on the refresh button (Mac), but I can’t see the changes on my website. What did I wrong?

2. I would like to move the “advertising agency” a little bit upwards. How can I do this?*

*Edit: I already found a solution by myself. To move the “advertising agency” a little bit upwards, I added the code below to Text Style:

position:relative; top:-2px;

Best regards
zizibe1

• This reply was modified 6 years, 6 months ago by zizibe1.

Hi Jordan

Thank you for your reply and the link.

Unfortunately, these steps didn’t work.

Now “Impressum” and “Datenschutzerklärung” don’t work as links. Moreover, they still appear on the right side of the socket area. But I would like to have them on the left side of the socket area right behind “© Copyright” like this:

© Copyright | Impressum | Datenschutzerklärung

Here are the steps I took:

Appearance
Menus
Custom Links
add URL of “Impressum”
Link Text: Impressum
Add to menu
Safe menu
Custom Links
add URL of “Datenschutzerklärung”
Link Text: Datenschutzerklärung
Add to menu
Save menu
Screen options
Check “CSS classes”
Safe menu
Menu Structure
Impressum Custom Link CSS Classes: my-custom-class
Datenschutzerklärung Custom LinkCSS Classes: my-custom-class
Save menu
Enfold Child
General Styling
Add following code to Quick CSS

.my-custom-class { pointer-events: none !important; }

Best regards
zizibe1

Hi Jordan,

Thank you for your reply. You can close this topic now.

Best regards,
zizibe1

Hi Vinay,

Thank you for your reply.

Yes, I already figured out that the font “Times New Roman” and other web safe fonts work in General Styling.

I hope that your devs will find a way to fix the problem in Advanced Styling soon. Please keep me informed.

Best regards,
zizibe1