Transparent Global header

I have read through the forum and have tried a few things but nothing seems to work. Why can we not create a global transparent header? If you can could you explain?

1 Like

if you require the navigation menu transparently! It is possible just by applying a transparency class! Here the example:

75% transparency or 100% transparency below

Let me know if this makes sense to you! regards

How do you get it to go over the content like that? I have tried neg margin etc. I would like it to be global so that I dont have to mess with every page

Put the navigation bloc into the global area at the top of the page. Make it sticky and the page should roll behind the navigation bloc. If the navigation bloc has a transparent background, your page content should show through the navigation as you scroll. This will display on all pages of your site.

1 Like

This just makes a transparent header on top and only covers content when scrolling down. It does not cover the content . I have tried neg margin but that does not work either.

I was just trying to have another Global Menu show up (transparent would be cool) on every page other than the Home page, but could not figure out how to do that.
Would one of Blocs experts help with this? :smile:
@Eldar would you reply back when you get time on this, please

I cant believe that nobody has an answer for this . When i try neg margin, header overlaps but logo, menu etc disappears?

I do not understand what you want to achieve, you will have an example of what you are looking for, I think that would help someone give you a correct answer for what you are looking for.

@nelo I think the OP is trying to achieve the same effect you get when you add a hero bloc with sticky navigation. Basically, you can set a background image for the hero bloc. That image will appear underneath the navigation element - i.e. the menu/company name etc. appears on top of the background image. However, when viewing the page and you start scrolling, the sticky navigation drops down with a white background. That issue is easily resolved by creating a background colour to the hero bloc (in addition to the image) that has its opacity set to 0%. This will cause the sticky navigation to have a transparent background upon scrolling.

The problem the OP is having is trying to get the same thing to happen with a navigation bloc set in the global area so that appears on every page. It is possible to set the background of the navigation bloc to transparent. However, when it first appears it will have a solid colour background (usually white). If the menu is made sticky, it will become transparent once the page starts to scroll. I think what the OP wants is for the navigation bar to be transparent when the page is first seen AND any background image placed in the first bloc to extend into the global area to give the same effect that a hero bloc gives.

I haven’t found a solution to this issue because if negative margin is used to lift the bloc containing the background image into the global area, the background sits above the navigation. I guess the answer must lie in a bit of hand coding, but I’ll leave you to suggest something as tweaking the code isn’t one of my skills.

I understand, but that’s really easy! I have applied it several times, put in a moment how to do it, so that it looks globally as if it were a hero block!

I learned this type of menu with blocsapp v2, it is very useful, I leave you the video!

The menu is in the global area, it has a custom class! that’s it and it shows perfect on every page…

Tell me if it is what you are looking for or if it makes sense to you!

Regards, Nelo

Exactly! How did you do this?

Did you ever post how you were able to accomplish this?

Just put this code in the general editor, and to the block (not the menu) add the Fixed center class, and that’s it!

I leave the image:

Regards, nelo

@nelo . I tried this but there is no way to make the sticky a different color , so my goal is to have a transparent header but when scrolling a a sticky header that I can make a different color or is there a way to use this and not use a sticky header

If you want the transparent adesivo menu, add only the transparency class:

@nelo . I understand this but with the code you provided it doesn’t seem to work well with the sticky color. Whatever color I make sticky color results in the header being same color or transparency?

  1. Menu block
  2. background of the menu block the color you like
  3. class for the menu background in transparency
  4. Activate the arabic menu mode
  5. 2 option add the code fixed …

Ready that’s all.