Header builder - submenu images

Hi there,

loving the upgrade to Pro guys. But I’m having a problem solving my submenus on my page.

It’s not exactly a submenu, but a second bar for showcasing product categories.

My problems is:

  1. How do I make the bar 2 trigger and show only when hovering or clicking over “Produkty”?
  2. How can I add text under single images?
  3. How can I add a hover effect for image and text? I want to add a pink gradient from bellow and make the text white.

Thank you in advance!

Hey @vojtechzikmund,

Thanks for writing in! Let me run through your items 1 by 1:

  1. You cannot trigger a whole bar to show/hide by hovering over a link in another bar. You would need to use our standard dropdown sublinks in the Navigation Inline Element, which can be styled quite extensively to do a lot. If you want this particular look to show in a horizontal line on hover, you might need to look at using something like UberMenu instead. Additionally, there are options to layout links in a “sub bar” like this, similar to what Apple does for their products. To do this, you’d need to turn on the scrolling option for your second bar, and set it up to work in this context. I go into detail on this technique in this video in our Knowledge Base around the 41:40 mark.
  2. To add text beneath an image like I imagine you’re asking, you’d want to put each image in a container, setup the container’s flex layout to “Column,” and then adjust it as you need from there. You can learn more about using flexbox in the video linked to in the first point.
  3. If you’re trying to add an interaction for an image and text together, what you likely want is a linked element. In that case, you can use a Button Element, or the Navigation Element to create complex content layouts such as image and text pairings.

All of these items require really understanding how the pieces of the builder fit together to create more complex layouts. If you haven’t done so yet, I highly recommend watching the videos in these resources for a better understanding of how to work with these different elements:

In particular, make sure to check out the “Using Flexbox” and “Working with Navigation” videos, and the “Anchor” partial videos in the “Using Partials” article (along with all of the others, as they go in-depth showing examples and explaining how to use these features.

Cheers!

Thank you for your answer. I’ve gone through the learning videos and feeling a bit more confident constructing the website.

The only problem I have encountered is with sticky option. When I enable sticky bar on it somehow glitches with revolution slider or something. When I scroll down it doesn’t stick to the top, but kinda flows in the middle of the page. Any idea?

Hi There,

thanks for the update!

The sticky header working fine in your site without any issue. Please check the video.
Let us know if you have any particular issue.

Thanks

Hi there basanta,

It’s working fine for desktop/laptop, but on mobile it floats – tried on my iPhone 7. You’ve also tried different header, my global header is “Wella menu main 2 row”. Could you please review that?

Hi there,

The video is now moved to the secure note. And please add this CSS to your global custom CSS for temporary fix

    .e177-9.x-bar.x-bar-fixed {
     top: 0px !important;   
    }

It’s known a bug when there are multiple sticky bars, and the height of the hidden bar is being counted to visible bar’s positioning.

Hope this helps.

Thank you for answer @Rad

It solved my problem on homepage/global header, but what could I do on my page “Produkty”, I added same css but with class for header on that page and it does stay sticky but it’s somehow transparent. I have there one more bar than on global. Could you please assist? For page “Produkty” I have set header “Wella menu main 2 row produkty”.

Thank you in advance!

Hi there,

Thanks for writing in.

You have multiple header bars on that page, and that CSS is only applicable for a single header bar. The transparency is caused by the header bar with 4 images, it covers it. I can’t directly check it since your page has no content and the x-bar-fixed class isn’t being triggered on that second header bar, since there is not much area to scroll to.

Could you try making sure the second bar has sticky setup and with enough content to scroll to?

Thanks!

Thank you @Rad

  1. I have decided to go different way, would it be possible to move the bar with 4 product categories under the revolution slider? I have managed to set it there with top margin, but it does work only under some specific resolutions. Would it be possible to have it fixed between the first container and rev. slider? I also want it to be sticky, it kinda works on desktop, but it does the same glitch on mobile. What would you recommend to do? We could design it differently under your recommendation.

Thank you in advance!

Hey There,

Thanks for updating in! When creating the headers for different screen size, you need to make sure that they have the same settings as the bar that works for your desktop. The current bars needs to be fixed and sticky so that on mobile they will be fixed and sticky.

Hope this helps.

Hi there @RueNel

  1. I have set both my tablet and mobile headers to absolute and sticky, exactly the same as desktop, but as I have said yesterday… it glitches on mobile phones, it floats in the centre of my screen… Could you try that now on mobile to see what I mean?

  2. Also the desktop (and every other header) container with product categories doesn’t add up exactly under the revolution slider. It works only under exact resolution.

Any idea to solve these two problems?

Hello There,

Thans for updating in!

1.) I can confirm that this is a glitch in the sticky bar in the custom headers. Sticky bars should be improved in the next release which was stated in here: https://theme.co/apex/forum/t/bug-fixing-usability-update/26811

For the meantime, please add a custom ID for your bars and use this code in the custom css area:

#mybarID.x-bar-fixed {
  top: 0;
}

2.) The global bar products and the slider is not of the same container. Remove the slider assign to the masthead and let the slider be within the custom header so that you can place the global bar products under the slider. I would suggest that you add another bar and insert a slider revolution shortcode.I would suggest that you add another bar and insert a slider revolution shortcode.

Hope this helps.

Thank you @RueNel

I dunno if I’m doing something wrong. I have added ID’s to my bars and then added the css you provided and it still glitches. I think I might leave this non-sticky until the bug fix release in April…

Hi there,

Thank you for the information. I could not find a robust fix regarding this. Please stay tuned for the upcoming release which will include a fix regarding the issue. Here is more detailed information about the release cycle:

Thank you for your understanding and patience.

Thank you for the information @christopher.amirian

I will wait for the upcoming update with this.

Could you please assist me with another problem though? My site should have everywhere font from Typekit, but doesn’t load anywhere except my pc’s where I have this font downloaded. What shall I change to have the site load the typekit font (gesta) to everyone? I have followed every article and discussion on this forum with no luck, because I have everything set.

Hey There,

Thanks for updating in! Regarding your Typekit, did you use the Font Manager? The typekit can be added in the Fonts manager to make sure that it will be applied to the site correctly. Please check out this documentation on how you can properly use Typekit in the theme.

Hope this helps.

Hi @RueNel

As I stated above, I have everything set, font manager is enabled, typekit is enabled, I can see and set fonts from typekit and I can see those fonts implemented in the site on both my iMac and Macbook where I have these fonts installed, but when I try to see my site on iPhone or friend’s pc, etc. there is no sign of typekit nor font I have selected. Rev. slider font seems to be working though (Freight Display Pro), but pushing font from typekit (Gesta) doesn’t. Any solution?

I have attached some screenshots.

Hey @vojtechzikmund,

I could not login to your site using the previously given credentials to check your exact setup but base on your screenshots, you’re also using the Typekit extension. Please uninstall it because it is no longer needed anymore. What I do not see is if you have assigned your Gesta font to your Body or Heading for it to load. Enabling the Font Manager won’t load your font. It needs to be used by your Body, Heading or Element.

Thanks.

Thank you for an answer @christian_y

I have deleted the Typekit extension, but cannot see my Typekit fonts under X > Typography > Body fonts (only google and system fonts). Could you take a look at my site? Credentials are in secure note.

Hey There,

In the latest version, the typekit can be manage first in X > Fonts. For more details, please check this out: https://theme.co/apex/forum/t/font-manager/101

After you have managed to add some font, you will also need to assign it in X > Theme Options > Typography. To make sure it will take effect, kindly enable/disable the Font Manager option in X > Theme Options > Typography.

I have investigated the issue and it seems that there is a JS error regarding your Typekit font.

Typekit: the domain "wella.rubiq.cz" isn't in the list of published domains for kit "ekj8gns"

This is why you are not seeing it in the Typography section. Please make sure that you have assigned your domain in the Typekit or else the fonts will not display.

Please let us know how it goes.