(Product) menu bar (second menu) under large image made sticky

Support
#1

Hi, could someone advice me with the following questions?

  1. I created a header for my website:
    • menu-bar
    • breadcrumbs
    • product menu - bar
      All 3 items are sticky.

The HOME page does have a slider above this.

The product pages just have a wide picture and no slider. (not alle are ready yet - best approach them with the second - product menu)
I would like to have the following order:

  • Bever logo / site menu @
  • Breadcrumb bar @
  • Wide product picture (this picture is differrent for every page)
  • Product menu bar @
    were the @ marked items are sticky. (So only the picture scrolls up)
    Is this possible?

I read somewhere that it is not possible to create a sticky menu that is not build in the header (footer) - but just in a section. Ist that still true?

I will send you the website (still being created) in a secure note.
Please look at the pages:
HOME
PRODUCTEN / LED Prijsdisplay (or other products that are ready)

The example of Adobe XD:

example header for a product page - from Adobe XD.png
example header for a product page - from Adobe XD.png1303×617 101 KB

  1. On the Home page the main-menu opens upward (see products) … how can I change that?
    (sometimes this happens also with the product-menu items - LED Luifelverlichting)

  2. I created element TABS.
    In the TAB item - text I put a picture. Is it possible to have that picture enlarged when you tab it? Can this be build in?
    I see you can put some Image Details to it - advanced options… .

Thanks so much in advance.
liesbeth

#2

Hey Liesbeth,

  1. You will need to create a new Header and assign it to Product Pages only so you have a different header for the home page and different one for the product pages.
    The Pro Header Bar has a sticky option so you can make all @ bars sticky.
    image
    image901×274 10.5 KB
  2. This is normal if you’re on a short screen. The menu opening upward is even beneficial for your users as they won’t have to scroll down to see all the menu items.
    If you scroll down so that the menu is up on the screen, the submenu will open downwards. It’s automatic and there’s no option to override that as that is for optimum user experience.
  3. Regretfully, not out of the box. You need to write your own custom CSS to achieve that effect. We can’t provide that custom code as part of our theme support though as that would be theme customization. You’ll need to consult with a developer for that.
    Alternatively, you can learn CSS on your own and also learn how to use the browser’s element inspector. You can customize a lot of things that way.

Hope that helps.

#3

Hi Christian, thanks for your help and information.

Acc. the sticky bar:
I know that the menu bar can be sticky. That is not the problem.
What I would like to do is: For every product page - put a different IMG between the MAIN Menu bar with breadcrumb bar - and the MENU for Products.

If I need to create a special header for every page, that is not what is wanted of course.
I would like to put between a variable IMG between the two MENU’s on every different Product Page. (this img varies acc the product):

MAIN MENU (with bread crumb) sticky

IMAGE (for everty product page a different img). - not sticky

MENU PRODUCTS - sticky

thanks

#4

Hey Liesbeth,

I said referred you to the Sticky Bar option because you are previously concerned with it. I believe there’s a misunderstanding in this area.

I missed that you need a different image for each product page though so I’m sorry about that. The solution to that is you use the Dynamic Content to pull the Featured Image of the product. The Dynamic Content is available for the background option as well as the Image element. The Cylinder Icon is the indicator that the Dynamic Content is available.

image

To give you an idea how the Dynamic Content works, please watch the following video.

Hope that helps.

#5

Hi Christian,
I think I need that yes. I will dive into it.
So much thanks for your help again.
If i have any questions later, I hope i can come back to it. Thanks.

Have a great day!
Liesbeth

#6

Glad that we could be of help.

Cheers!

#7

Hi,
Sorry , but i have another question.
The product-pictures that I want to have in the header are no featured img or so… the come from the media library directly. So I cannot use the dynamic content I think, just like that. Or is there a way to create some kind of dynamic. content out of the media library? (archive?)
Thanks in advance.
Liesbeth

#8

Hey Liesbeth,

If that is the case, you’ll need to use ACF Pro so you can add a Text field for each of your products and in that text field, manually insert the image URL. Please see the following screenshots and the full documentation of how to use ACF Pro in our theme here https://theme.co/docs/acf-pro

image
image1142×134 3.22 KB

image

image

image

Hope that helps.

#9

Thanks again, I will look into it.

#10

Hi Liesbeth,

Let us know how it goes.

Thank you.

#11

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