Transparent menu + 1st section behind menu only on certain pages

Hi,

I wish to have the menu bar transparent only on certain pages, and that the background of the 1st section go behind the menu.

I have read different threads but cannot find what helps me…

I am using ubermenu.

Could you please help me?

Thanks!

My site and concerned page : My page

Hi There,

Thanks for writing in! I have checked your concerned page and even tried to login to your site using the login panel, but I’m getting 404 page instead (page not found).

Could you please confirm on your end, so that we can look into your issue.

Thanks!

Oh sorry I have updated the secured note with the right connexion link.

Hi there,

Since you’re on Pro, you can simply create a custom header and set it’s initial position to absolute (instead of relative) and background to transparent, and make it sticky bar too. Then simply assign that header to your target pages.

Please check this for more information https://theme.co/apex/forum/t/pro-header-and-footer-builder-introduction/103

Thanks!

But if my header is made up of three bars (top bar, menu, social icons bar) and I set all three bars to absolute positioning then they all sit over each other. How should I set a transparent header if I’ve got more than one bar in the header?

Hey There,

You can set each of the bars to have a transparent background so that all on them will be transparent. Or maybe you can set a bar that displays upon load with a transparent background and another bar that is hidden at first and will display upon scrolling with a solid background.

Hope this helps.

That’s not the problem: I just need to make the header as a whole be absolute positioned (which would keep the 3 transparent bars in the right spot relative to each other but show the whole header over the first section’s content). What’s happening now is if I set all three bars individually to absolute positioning they cover each other.

Hello there,

I can see that you’re a little confused with how to use the Pro header. Let us start first with your transparent header problem.

To achieve the transparent effect on your header bar, simply follow the steps below:

  1. Check one of the solutions suggested by my colleague on this thread:
  1. Set the header to the page you wanted it to show. E.g. Template niveau 0

Don’t forget to set your page as Published next time so it will be displayed on the header builder’s assign to page section.

For your convenience, here’s a guide on how to use Pro header builder: https://theme.co/apex/forum/t/pro-header-and-footer-builder-introduction/103

You need to only have 1 bar set to absolute position. The top bar, menu, social icons bar should be inside that bar. I can now see on your setup that they are inside the containers which is right. Then, set each of the containers to relative position. From here, you can adjust each of their width, margins or paddings to achieve the layout that you have in mind.

Hope this helps.

Sorry, not sure I’m understanding you. Here’s what I’m trying to achieve:

[top bar with various elements]
[Menu bar with left menu items, Logo, right menu items]
[bottom bar with social icons on the right]

These three together form the header, which I want to be transparent and sit on top of the first section content.

It sounds like you’re suggesting put all the elements inside the same single bar, but the header builder doesn’t seem to support that. It wants to have items within a bar positioned horizontally relative to each other (which makes sense since that’s why you’d want multiple bars in the first place.

Does this make sense?

Hello there,

Yes, I’ve understood clearly. The reason why we put the three items you’ve mentioned inside just one bar is because setting these three to sticky is regretfully still not supported by Pro. We have to add these inside each container with some CSS codes to achieved the needed layout. E.g.

  • [top bar with various elements] - 1 container, float: left; width: 100%; clear: both;
  • [Menu bar with left menu items, Logo, right menu items] - 1 container, float: left; width: 100%; clear: both;
  • [bottom bar with social icons on the right] - 1 container, float: left; width: 100%; clear: both;

I suggest you also ask assistance from your developer to help you with this, or if you don’t have one, I recommend the guys here: https://xthemeusers.com/professionals/

Hope this helps.

I cannot use Pro custom header because I need Ubermenu… How can I combine the two, simply?

Thanks

Hi @adequasys,

Regretfully you cannot combine the two, please see this thread https://theme.co/apex/forum/t/pro-ubermenus-w-header-builder/1911/4

Thanks!

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