Announcement

Collapse
No announcement yet.

Feature top EZ widget behind header

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • Feature top EZ widget behind header

    Hi, I am trying to put a slider behind the header.

    The idea is, to have the curved header overlapping the slider, which is in the »feature top EZ widget«.

    Is that possible? (see screenshot of the layout)

    Bildschirmfoto 2016-09-23 um 10.48.01.png


    At the moment it only goes below. http://www.hno-uhlig.de/DRU/


    Regards, Carsten
    Attached Files

  • #2
    To start with, you could put some Custom CSS like this in a custom media query for ONLY large screens:

    Code:
    body.home .site-container {
        position:relative;
    }
    
    body.home .site-header {
        position: relative;
        z-index: 999;
    }
    
    .feature-top-outside #ez-feature-top-container-wrap {
        margin: 0;
        position: absolute;
        top: 70px;
        z-index: 0;
    }
    I´d guess that mobile devices might get a different header styling anyway.
    Last edited by SiGa; 09-23-2016, 03:41 PM.

    Comment


    • #3
      Hi Silvia, thanks for the custom css … it works for »feature top«.

      Unfortunately it also pushes the content of the »static homepage EZ-widgets« to the top :-(

      http://www.hno-uhlig.de/DRU/

      I guess I need to be more specific what part should be positioned absolute?

      Comment


      • #4
        I edited the code above because I think it´s better to make sure those things could only happen on frontpage and not on other pages, please note...

        If you could move the Feature Top from "Outside" to "Inside" in the settings (because it´s boxed anyway), it would maybe be easier to handle things as you could use the absolute positioning on
        Code:
        body.home .site-inner

        Comment


        • #5
          Hm …

          The feature top »inside« is too small … the static homepage wrap padding is at 140 at either left and right … because the slider should be wider than the content …

          http://www.hno-uhlig.de/DRU/

          I am lost …

          Comment


          • #6
            Did you resize your window at any point? Because the 140px padding is no good idea when it comes to mobiles anyway....
            Set the padding to something that would fit your slider. I think I can help you with the rest.

            Will that Feature Top be displayed on any other page than the frontpage?
            Last edited by SiGa; 09-23-2016, 04:52 PM.

            Comment


            • #7
              Thanks, I set the padding to 20px. I always have problems finding a right way to show the content smaller on the front page.
              Now the feature top shows up with more space to the header …

              No, the feature top will only show on the frontpage. And yes, I notices the problem with small screens ;-)

              Thanks for your help!

              Comment


              • #8
                OK, next try, here it comes:

                Code:
                body.home .site-container {    
                position:relative;
                }  
                
                body.home .site-header {    
                position: relative;    
                z-index: 999;
                }  
                
                body.home .site-inner {    
                position: absolute;    
                top: 50px;    
                z-index: 0;
                }
                
                 #ez-home-container-wrap {    
                padding: 0 70px;
                }
                As mentioned, I´d suggest to put all this in a media query for only large screens because that padding is far too large for mobiles and you´d need to find a different header styling solution for mobiles, too.

                Comment


                • #9
                  Fabulous! It works like charme …

                  Now I am figuring out the padding settings for the different screen sizes in the responsive set up.

                  The header styling I can do within the smart slider (I hope ;-)

                  Comment


                  • #10
                    Oops, the footer disappeared …

                    Comment


                    • #11
                      Oops, that was one step too far.... LOL

                      We´ll try it the other way round:

                      Code:
                       body.home .site-container {
                          position:relative;
                      }    
                      
                      body.home .site-header {    
                      position: absolute;    
                      z-index: 999;
                      }    
                      
                      body.home .site-inner {      
                      margin: 50px 0 0 0;
                      }  
                      
                      #ez-home-container-wrap {    
                      padding: 0 70px;
                      }

                      Comment


                      • #12
                        Yepp, now it works :-)

                        Thank you very much. Still playing with the padding setting.

                        Comment


                        • #13
                          I fear, because of the code we changed, now the site does not work properly on mobile and tablet.

                          On mobile and tablet the background and the header is wider than the screen. On some tablets the content is wider and cut on the right side. hm …

                          On top on my iPhone 6 the vertical toggle menu is not working.

                          What a mess

                          Comment


                          • #14
                            To start with, you could put some Custom CSS like this in a custom media query for ONLY large screens:
                            Comment #2. I don´t know if you did that but if you did, that code wouldn´t be able to mess anything up on any mobiles.

                            Comment


                            • #15
                              Well, I put the code from comment #11 since the first one caused other problems.
                              Last edited by blindtexth; 03-16-2017, 06:36 PM.

                              Comment


                              • SiGa
                                SiGa commented
                                Editing a comment
                                I did not mean the final code. The part "... put ..... this in a custom media query for ONLY large screens" is essential though.
                            Working...
                            X