Header Top Bar & Menu

  • Resolved Daniel

    (@marketinggreenpaint)


    7 years ago

    Hello, I have been working with Zakra Construction Theme for a few days now, and these are my problems. The theme is really good, it lets me do things that with other themes would be a pain.
    I don’t have a link to the website because of localhost.

    Header Top Bar
    I am using Translatepress and want to add the flags icon to the header. Translatepress gives me a shortcode to add it, but where can I add the shortcode?(either in elementor or native code as I know html css and php)

    Menu and sub-menu
    I have the menus as presented here:
    Menu1
    |
    SubMenu1–SubMenu2

    I have this css code:

    /* MENU E SUB MENU HOVER */
.tg-primary-menu > div ul li ul li a:hover, .tg-primary-menu > div ul li ul li:hover {
	color: #a6ce38;
	background-color: #d6d6d6;
}

    Plus I have added a color on theme options > primary menu > Menu Item Active Color

    My problem is, IF I press and HOLD the color maintains itself(not possible, same color background), however I DO WANT that the SUBMENU1(as explained above, its a product category) I am in stays ACTIVE the same as the SUBMENU2 link(page I am currently in)

    Hope anyone can help me 🙂
    Thank you in advance.

Viewing 15 replies - 1 through 15 (of 26 total)
1 2
  • Ashish – ThemeGrill Support

    (@themegrillteam)

    7 years ago

    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.

    Thread Starter Daniel

    (@marketinggreenpaint)

    7 years ago

    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 7 years ago by Daniel.
    • This reply was modified 7 years ago by Daniel.
    • This reply was modified 7 years ago by Daniel. Reason: Images
    Ashish – ThemeGrill Support

    (@themegrillteam)

    7 years ago

    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.

    Thread Starter Daniel

    (@marketinggreenpaint)

    7 years ago

    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.

    Ashish – ThemeGrill Support

    (@themegrillteam)

    7 years ago

    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?

    Thread Starter Daniel

    (@marketinggreenpaint)

    7 years ago

    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 7 years ago by Daniel. Reason: aditional solution
    Ashish – ThemeGrill Support

    (@themegrillteam)

    7 years ago

    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;
}
    Thread Starter Daniel

    (@marketinggreenpaint)

    7 years ago

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

    Ashish – ThemeGrill Support

    (@themegrillteam)

    7 years ago

    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.

    Thread Starter Daniel

    (@marketinggreenpaint)

    7 years ago

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

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

    Ashish – ThemeGrill Support

    (@themegrillteam)

    7 years ago

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

    Thread Starter Daniel

    (@marketinggreenpaint)

    7 years ago

    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

    Ashish – ThemeGrill Support

    (@themegrillteam)

    7 years ago

    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.

    Thread Starter Daniel

    (@marketinggreenpaint)

    7 years ago

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

    suchim1946

    (@suchim1946)

    6 years, 11 months ago

    This works, thanks!

Viewing 15 replies - 1 through 15 (of 26 total)
1 2

The topic ‘Header Top Bar & Menu’ is closed to new replies.