Header Top Bar & Menu

Hi,
I just tested Zakra with the TranslatePress plugin. Please follow these steps to get language switcher flag on the Header Top Bar:
1. Go to Theme Options > Header > Header Top Bar and select widget from Left Content or Right Content
2. Then, Go to Customize > Widgets > Header Top Bar Left/Right Sidebar and add Custom HTML widget with the shortcode

View post on imgur.com

Regarding the second query, I’m not quite sure if I understand it. While trying to replicate the issue, I couldn’t get any. So, can you explain in detail(Step by step) on how to get the issue and what is the exact issue? ??

Thanks.

Hi @themegrillteam
Thank you for the translate solution, it works! However, I have only 1 “complaint”, is it possible to remove the background? or is it plugin related?
Picture here: https://imgur.com/SET7nHt

About the other issue…
https://imgur.com/KdehPxb This picture occurs when I hover the menus.

https://imgur.com/FqqUppA This picture occurs when I click and HOLD, I don’t actually release the mouse1 button. When I click it works fine.

My goals for this menu are:
1. I want the hover text(and arrow) and background color to remain the same for both menus. In this particular case, “Insulation”(grey background, green text, same as Cork) and “Cork”(Already works)

2. When I click and HOLD(but don’t release) I want the Red circle to remain black as the original colour, same as other menus.

3. When I am on page “Cork” I have the Green Text stay active(forget the background in this case) while I am on that page. What I want is the Category(“Insulation”) to have green text as well when I am on that category and/or product category. Just to make it clear, I am on this page, this is not a hover.

My current CSS looks like this for the menu:

.tg-primary-menu > div ul li ul li a:hover, .tg-primary-menu > div ul li ul li:hover {
	color: #a6ce38;
	background-color: #d6d6d6;
}

Problem “2.” happens because I have added a colour on theme options > primary menu > Menu Item Active Color (Green colour) but if I remove this, the menus don’t quite work as I want.

Hope you can help me out and I gave you enough details. If you need anything else just say it ??

• This reply was modified 5 years, 9 months ago by Daniel.
• This reply was modified 5 years, 9 months ago by Daniel.
• This reply was modified 5 years, 9 months ago by Daniel. Reason: Images

Hi,
Firstly, I didn’t find a screenshot in your previous reply. So, can you send it again using the site I’ve sent before? Also, it is hard for me to replicate the condition from the description so maybe let me know once the site is live so that I could better understand and help you properly if that is not a problem. ??

Similarly, is it possible to remove the background?
Which background are you referring to here? If it’s the header image, please read this article: https://docs.themegrill.com/knowledgebase/changing-homepage-header-image-in-zakra-business/

Thanks.

View post on imgur.com

View post on imgur.com

View post on imgur.com

Screenshots by order. Sorry, I think I edited the post too many times.

The background I am referring to is the Flag background.

Please add this CSS inside Customize > Additional CSS for background issue:

.trp-language-switcher > div {
    background-color: transparent;
}

Regarding, the Active menu item color, can you try changing the Menu Item Active Color value from Customizer to other than the same green color as the menu background?

The background issue is solved. Thank you for your fast answers!

Here it is:

View post on imgur.com

It only changes the current page I am in colour.
If I go to Theme Options > Styling > Base Colors and change it black it fixes the main menu “PRODUCTS” BUT it also changes my woocommerce links hover color(thats fine).
My only “problem” now is I also want the product category to be green IF I am in PRODUCTS>Category or PRODUCTS>Category>CURRENT PAGE

Current is already working as you can see. The category is missing.

• This reply was modified 5 years, 9 months ago by Daniel. Reason: aditional solution

Can you try adding this CSS?

.tg-primary-menu > div > ul > li:active > a,
.tg-primary-menu div > ul > li:not(.tg-header-button-wrap).current_page_item > a,
.tg-primary-menu > div > ul > li:not(.tg-header-button-wrap).current-menu-item > a {
    color: #e9ff45;
}

I did. It does nothing ??
No easy fix for this I see

Hmm. I guess so. I need to check the site for fixing it properly. How about changing the background color from green to another color:

.tg-primary-menu {
    background-color: #18a0ee !important;
}

If this doesn’t work, please let us know once your site gets live.

That code did work.
Here is the picture: https://imgur.com/IpkRcXk

Hope I didn’t overdo it.
Thank you again.

Is the issue fixed now? Let me know if there’s a further query. Thanks.

Sorry, I probably explained myself wrong. Did you see the image?
The code you sent me changed the whole main menu background colour.
Not exactly what I wanted hehe

Please remove the code if it’s causing the problem. I think the only solution, for now, is to remove the background color (Green) of the menu.

You can contact me again here once your site is live and I’ll provide another solution by checking your site. I hope that will be fine. Thanks.

Will do, thank you so much for trying to help.
As soon as it is up, I will post here.

This works, thanks!