Placing a menu over an image in the header

Hello everyone,

I’m currently evaluating Blocs and the trial period is only seven days, and two have already gone. I need to be sure it’s right for me so I’m working flat out, as I have had no end of trouble with responsive websites from other software, and being allergic to code I’m struggling to work with the straightjacket approach that so many web site builders impose. I’m a graphics pro with decades of experience, and can find answers to most problems with a bit of trial and error. However, I can’f find any obvious way of having an image in the header to page width (not hero) and overlaying a menu.

I’ve tried the obvious blocs and couldn’t find what I want, so a tried to make it up with brics within a single container. A menu over an image is very common these days, yet I just can’t make it work here. I’m sure I’m missing the obvious but I just can’t see it.

Can anyone help? Thanks in advance.

Can you not just insert the image as the background to the bloc in the header that also contains the menu? I am using the main menu automatically generated by Blocs over an otherwise empty bloc (except for an image bric also inserted in the bloc)

It works here although the actual insertion is a little glitchy (bug reported) so you may have to experiment a bit. Setting Preview in Place in the Asset Manager may help. This area does seem to be a little flaky at times: that’s unusual in my experience since Blocs is usually rock-solid.


Welcome to the Blocs Community.

Just double click on the navigation bloc (not the navigation, but the bloc itself), and select a background image you want. It’s very easy.

If you are new to Blocs, I would recommend to check my free Getting Started with Blocs video course.


Hello Cmd-F,

Many thanks for the advice. I did try that initially, but the header photo is my logo. If I use it as the background photo it goes full width. If I could manage this, I would use a version of the logo with more room above to accommodate the menu text.

Thus far, I’ve had to settle for a regular menu bar below, but that’s got too much black above and below, and that’s with no padding at all.

Always it seems, with responsive sites, I never seem to be able to design what I want, and have to settle for something that is rather less than I wanted. I have got further with Blocs than with Freeway and Muse, but I’m still not happy with the result.

Hi Eldar,

Thanks for getting back to me. See my reply to Cmd-F as he mentions the same fix.

You can add a background image to a navigation block through a custom class. This will allow you to scale and position the image to your needs. In the example below, I used a simple logo centred in the navigation bar. Clearly, if you use a wide image in the background, your navigation and site name elements will be placed on top of the image background so you may have to create custom classes to reposition those element below your background image.

1 Like

And now I’ve learned something too. Thanks @hendon52.

Unfortunately it doesn’t work with the hamburger bar and a image with a lage height. the icon disappear when i use a custom class to move the navbar.
why is it so complicated to use a menu in front of an image? I don’t understand that. :frowning: So anyone has a solution for this porblem?

It’s better to add the background image via a special class made for the menu navigation block - don’t add the image as a normal background to the navigation block. This prevents the menu from disappearing when creating a custom class on the navigation element. The class you create for the nav block allows you to set it’s hieght as well as background image size and placement. Once that has been done, you can then create a class that repositions your menu.

@ hendon52 Hello, thanks for your tip. I’ve tried this before. the problem is the parallax effect. This is not possible with your solution.

My way of solving the problem is to use a hero and move the next bric up with a custom class. So I can reduce the height of the hero. not very cool, but helpful.

Try adding a higher z-index to the class. Do you have an url?

Hey, I haven’t a url. the project is still in working. :-/

I am not on my macbook now, but try to add something like this in the code editor in the page settings

z-index: 9999;

you have to replace the “mycustomclass“ by your custom class name of the menu button