Overlapping block as first block after header does not work properly

justanotherprogrammer
24 Posts
justanotherprogrammer posted this 11 June 2019
Wishlist

When an overlapping block is added immediately after the header, it is possible to create a design which appears to have a graphic element extending above the header. However, when this design is exported, the portion above the header is cropped and is not visible. The only way to make it visible is to add customized CSS that creates a "top margin" on the HTML block. Is there some way that either the overlap block will render properly (without adding CSS), or alternatively, that the required CSS is generated automatically as part of the creation of the overlap block?

(see screen shots showing rendering WITH and WITHOUT custom CSS for the top margin; as well as screen shot of editor)

When an overlapping block is added immediately after the header, it is possible to create a design which appears to have a graphic element extending above the header. However, when this design is exported, the portion above the header is cropped and is not visible. The only way to make it visible is to add customized CSS that creates a "top margin" on the HTML block. Is there some way that either the overlap block will render properly (without adding CSS), or alternatively, that the required CSS is generated automatically as part of the creation of the overlap block? (see screen shots showing rendering WITH and WITHOUT custom CSS for the top margin; as well as screen shot of editor)

Last edited 11 June 2019 by justanotherprogrammer

overlapping margin-top
with-custom-css.jpg
without-custom-css.jpg
nicepage-editor.jpg
Vote to pay developers attention to this features or issue.
3 Replies
Order By: Standard | Newest
Support Team
Support Team posted this 13 June 2019

The idea is to create the illusion that the title starts below the top edge of the browser window and for this you need a container. And then you can add other elements as you need.

Feel free to experiment.

...................................................
Sincerely,
Susanna I.
Nicepage Support Team

Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1
Follow us on Facebook: http://facebook.com/nicepageapp

The idea is to create the illusion that the title starts below the top edge of the browser window and for this you need a container. And then you can add other elements as you need. Feel free to experiment. ................................................... Sincerely, Susanna I. Nicepage Support Team Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1 Follow us on Facebook: http://facebook.com/nicepageapp

Last edited 13 June 2019 by Support Team

justanotherprogrammer
24 Posts
justanotherprogrammer posted this 11 June 2019

Thank you for your response.

I'm unclear whether you are suggesting I make the header sufficiently high to contain the entire photo, or whether you're suggesting I make the header tall enough so that the menu placed in the header can be placed near the bottom of the header, so that the overlapping frame under the header gives the illusion that it is extending above the header (when in actuality, it is still limited by the top of the very tall header).

The screen shots I posted are very basic. I intend to add text to the area adjacent to the photo (which isn't actually a photo - it is intended to be one of a number of slides).

I will try making the header larger and seeing if I can get what I want from that. If not, I'll return for additional help.

Thank you for your response. I'm unclear whether you are suggesting I make the header sufficiently high to contain the entire photo, or whether you're suggesting I make the header tall enough so that the menu placed in the header can be placed near the bottom of the header, so that the overlapping frame under the header gives the illusion that it is extending above the header (when in actuality, it is still limited by the top of the very tall header). The screen shots I posted are very basic. I intend to add text to the area adjacent to the photo (which isn't actually a photo - it is intended to be one of a number of slides). I will try making the header larger and seeing if I can get what I want from that. If not, I'll return for additional help.
Support Team
Support Team posted this 11 June 2019

Hi
Yes, the overlapping block does not help to get the desired effect.
You can see all the elements of the site template while working in the program. Therefore, you can see the overlap here, but not in the exported project.

We would suggest you do the following:
1. Make the header high and transparent.
2. Then put the container in the header so that their bottom parts coincide.
4. Set the background color for this container.
5. Put a picture in this container with negative top value.

Let us know if this solution helped you.

...................................................
Sincerely,
Susanna I.
Nicepage Support Team

Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1
Follow us on Facebook: http://facebook.com/nicepageapp

Hi Yes, the overlapping block does not help to get the desired effect. You can see all the elements of the site template while working in the program. Therefore, you can see the overlap here, but not in the exported project. We would suggest you do the following: 1. Make the header high and transparent. 2. Then put the container in the header so that their bottom parts coincide. 4. Set the background color for this container. 5. Put a picture in this container with negative top value. Let us know if this solution helped you. ................................................... Sincerely, Susanna I. Nicepage Support Team Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1 Follow us on Facebook: http://facebook.com/nicepageapp

Last edited 11 June 2019 by Support Team

You must log in or register to leave comments

Company
Product
Themes & Templates
Nicepage
Web Design