How to place the Nav bar above the background image

I would like to place the Nav bar above the top regions background image. but I do not see how to do so. all of the example sites show a discrete region for the nav bar. See image.

Ideally I would like the background of the image to be a 3-picture slider with the nav bar above it and the 50% opaque text box also above the slider. Not clear how to accomplish this in upfront builder.

  • Nithin

    Hi Larsman,

    Hope you are doing good today. :slight_smile:

    I would like to place the Nav bar above the top regions background image. but I do not see how to do so.

    Not sure whether I understood your query, that top section seems to be a region, which you can remove by clicking the close button. Once you remove that region, the Nav bar will move to the top.

    After that, you can either edit your Main Area region to add a slider, or create a new region below the navigation bar with a slider, and text box. Or you could include the text box in a new region according to you needs.

    Please advise if I had missed out anything, so that we could help get this sorted. Have a nice day. :slight_smile:

    Kind Regards,

  • Larsman

    Hi Nithin,

    Thanks for your response. I am looking for the menu bar to be above the background and 30 (or so) pixels down from the top. I want the underlying image to change and have the top of the new image appear above the menu bar. As you mentioned I currently mocking this up with 3 regions. 1 - the top 30 pixels of the image. 2 - the menu bar. and 3 - the bottom of the image.

    Over all I would like is 1 - The whole photo to be a slider in the background . 2 - The menu to be a layer above the the background, full width and 30 or so pixels down from the top. and 3 - A semi transparent layer with a text box above the bottom half of the background . As illustrated in the attached sequence. So 1 (one) region as a background and a couple of <div>'s above the background.

  • Rupok

    Hi Larsman,

    This is possible and won't require very complex hack. At first, you have to keep all these things (nav element and the semi-transparent text element) in same region. And in region settings, you will have to select "Image Slider" as background. Please check the attached screenshot for reference.

    So background images will be sliding one after another and nav menu and semi-transparent text box will be above that. Then you can use those elements settings to add some top padding for the nav element, and some custom CSS code to make the text element semi transparent.

    I could do this for you on your site if you allowed us Support Access. Would you mind allowing Support Access so we can have a closer look at this and try to fix this for you? I'll tell you exactly what I do on your site so you can learn the process too.

    To enable support access you can follow this guide here:

    Please let us know when you are done granting access. I'm looking forward to hear from you and resolve this issue as soon as possible.

    Have a nice day. Cheers!

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.