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

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • Scyd
    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:

    Main menu with a transparent background, the second container starts showing at the bottom, which I don’t want to:

    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!

    Post count: 1

    same problem here…

    Post count: 873


    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() {

    Live demo of both options up on CodePen.

    Good luck!

    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

    Post count: 873

    Hello @lkkuhn,

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


    Post count: 14

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


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