Avada Forums Community Forum First container, 100% height impossible with transparent main menu

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • Scyd
    Participant
    Post count: 1

    Hi everyone,

    I want to make my first container 100% height on my home page, but it doesn’t go all the way down to the bottom of the screen when I set the main menu to transparent background.

    Main menu with a colored background, my container takes the whole screen alright:
    https://tof.cx/image/Ret2c

    Main menu with a transparent background, the second container starts showing at the bottom, which I don’t want to:
    http://tof.cx/image/ReWje

    I know that’s because the main menu has no height when set to transparent background: mine is 97px, and we can clearly see those 97px at the bottom of the page in the second screeshot.

    But is there a way to “bypass” this? Padding won’t do it, I really want to “stretch” my first container down to the bottom of the viewport.

    Thanks for your help!

    zweckdesign
    Participant
    Post count: 1

    same problem here…

    marklchaves
    Participant
    Post count: 873

    Hi,

    2 Options

    1) If you know the CSS class that defines the background image, you can add height: 100vh; to the class.

    2) You can also use a couple lines of jQuery. Again, you need to know the CSS class like in #1.

    
     $(document).ready(function() {
      $(".header").height($(window).height());
    });
    

    Live demo of both options up on CodePen.

    Good luck!

    Lisa
    Participant
    Post count: 2

    Thanks @marklchaves for the code.

    Option 1 worked great for me. More details on how to add it below:

    – Go into Avada Theme Options – Version 7: Avada | Options or Version 6 – Avada | Theme Options
    – Custom CSS
    – Add code:

    .contain_100 { /* 100% height for container - hero image / video w/ transparent header */
        height: 100vh !important;
    }

    – Save Changes
    – Add the class “contain_100” (without the quotes) to your container under the General Tab / CSS Class at the bottom
    – Save

    marklchaves
    Participant
    Post count: 873

    Hello @lkkuhn,

    Excellent. I guess your suggestion would be option #3. Thanks for sharing!

    mark

    Dewdan
    Participant
    Post count: 14

    Thanks a lot @marklchaves, the first option worked for me.
    Thanks Lisa for the full css.

    Dan

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.