Headers > Navigation Inline > How to equal Top Link Text Color in Menu?

Hello dear Support Team,

I’ve added a menu where the Links have different colors. The reason is maybe because the left one is an #anchor Link, while the two on the right are leading to another sites…

But isn’t there a way to make them look the same?

Bildschirmfoto 2020-03-31 um 23.37.19

Oh and a second question for the same Menu…
The particle Effect does not center the Text. Any ideas?

Thx in advance!

Bildschirmfoto 2020-03-31 um 23.54.33

Hey Pascal,

The blue color is the active color.

image

That means your menu items are active because you’ve used Absolute URLs for the menu items like http://example.com/#menu-1.

You have 2 options to go about this:

  1. Set the Interaction Text Color the same as the Base color. Then, use your own CSS to add your own hover effect to the menu items. This requires that you know CSS development though so you might want to use option 2.
  2. Set up a new menu using Relative URLs only like #menu-1. Then, duplicate your current header and assign the duplicate to your home page only and use the Relative URL in this header so the setup is the Absolute URL is assigned globally and the relative URL to the home page or the page containing the IDs.

Both methods will make the color uniform.

------------------------------------------------------------

Regarding your other question, “The particle Effect does not center the Text”. I’m sorry but I’m not sure what you mean. Do you mean apply the line only to the text? If that is the case, that would need particle customization like shown in the video below. This needs custom CSS development also so it would be best that you know CSS.

Hope that helps.

Hi,

I would go for your second solution, because my CSS skills are not the best :sweat_smile:.
Could you please explain your second solution a little bit more detailed? That would be awesome! Thanks!

__

To my second question: I found the problem… It changed the flexbox setting (self flex) from fill space equally to standard… that helped obviously

__

But I have another question for the same menu :see_no_evil:
How can I close the gap between the canvas and the top of the mobile browser?

Hi Pascal,

You will have 2 headers and 2 menu.
One header assigned for homepage. The menu here is using RELATIVE URL #menu-1
Another header is assigned as global. The menu here are using ABSOLUTE URL http://example.com/#menu-1

Unfortuantely, I can’t that specific URL because it is lock. Please do give us access inside a secure note so we can see your site setup.

You will have 2 headers and 2 menu.
One header assigned for homepage. The menu here is using RELATIVE URL #menu-1
Another header is assigned as global. The menu here are using ABSOLUTE URL http://example.com/#menu-1

Well I’m still struggling :see_no_evil:. I can’t see the difference between those two menus, because two of them will use a relative URL like https://jenskehlen.de/#speaker and also a absolute URL like https://jenskehlen.de/freietrauung combined… So how does this help? Is it possible to give a little workthrough? Maybe I get your point then. :upside_down_face:

Unfortuantely, I can’t that specific URL because it is lock. Please do give us access inside a secure note so we can see your site setup.

You’ll find them in my first post. :raising_hand_man:

Hi Pascal,

That’s not really an issue, that is only happening because of the Wordpress’ Admin Toolbar, with that said, a non-login user will not have that issue. You can disable that admin toolbar on the user’s profile area.

Step 1 - Duplicate your current Header, rename the duplicate header as Homepage Header
Step 2 - Assign the Homepage Header to the Front Page (homepage) only

Step 3 - Duplicate your menu.

Menu 1 (original menu) - Assigned to the Global Header
Use absolute URL for both jump link (https://jenskehlen.de/#speaker) and secondary page link (https://jenskehlen.de/trauerfeier/)

Menu 2 (duplicate menu) - Assign to Homepage Header
Use only ID (#speaker) for those jump links, and use absolute (https://jenskehlen.de/trauerfeier/) URL for those two secondary pages.

Hope that shed some lights,
Cheers!

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.