Navigation
This is archived content. Visit our new forum.

Tagged: 

  • Author
    Posts
  • #1406727

    dturkov
    Participant

    Hello
    1 I am working on the UI design for a website, I purchase the theme and start playing around with the website. I do have a question related to the structure of the website. I want to achieve an overlapping body container over the header. I am not sure yet if I will use a revolution slider or a simple container header and I may use envira gallery on my body container however, I want to achieve something like this https://designit.com/ (attached images) it has to be responsive as well.
    I was reading a post (https://community.theme.co/forums/topic/creating-a-body-container-that-overlaps-slider-header/) and your team suggested this css code:

    #x-section-1 {
    position: fixed;
    top: 0;
    }
    #x-section-2 {
    padding-top: 60% !important; /*Adjust this accordingly*/
    }

    I was trying to test it on my side but not sure I am on the right path also for responsive. What it is your advise on it?

    2 Also in term of responsive text, what do you suggest is the best way to go for so that I will have a responsive text on all the website

    Carlo

    http://74c.615.myftpupload.com

    #1407511

    Friech
    Moderator

    Hi Carlo,

    Thank you for writing in! First things first, please remove the STYLE you applied on the first section and the second section. Particularly this

    #x-section-1 {
        position: fixed;
        top: 0;
    }

    And this:

    #x-section-2 {
        padding-top: 0;
    }

    You might need to completely set the second section’s top padding to 0, currently it has a 45px top padding, put a 45px padding on its ROW instead. Also set the second section’s background color to transparent.

    Only then add this on your custom CSS

    @media (min-width: 980px) {
    	.overlap {
    	 max-width: 78%;
    	 margin: -100px auto 0 !important;
    	}
    }

    Adjust the value accordingly. Then add the class overlap on the second section.

    Let us know how it goes.

    Cheers!