Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1232800

    Hello,

    I set the menu bar to be transparent and overlapping the first color section.
    I’d like to be able to set the first color section 100% of the browser window height + 80px (which is the header high)

    Also, can I please add this “100%+80px behaviour” ony to a specific color section id?

    I am using a child theme.

    Thanks

    #1232855

    Maybe with a screenshot it’s easier to understand.
    color section 100%

    Unfortunately the color section doesn’t cover all the window height, even if it is set on 100% height.
    The menu bar is 80px. How can I add 80px to the 100% in quickJS?
    Or how can I set the color sectio to 110% of the window height?

    I used this code to change the menu to transparent and moving the main container to the top of the page:

    .header_bg {
        background: rgba(255, 255, 255, 0.6) !important;
    }
    #main {
        padding-top: 0 !important;
    }

    I checked this post: https://kriesi.at/support/topic/color-section-percentage-of-height/
    But it seems not working anymore, I cannot find that line of code in the js.

    Thanks

    • This reply was modified 5 years ago by umberto83.
    #1232873

    Hi,

    Please provide a link to the site/page in question so we can look into this issue further.

    Best regards,
    Jordan Shannon

    #1232930

    Hey Jordan,

    I’m working locally on MAMP because I need the old website to be online at the same time, so I cannot share a link.

    I think I understood the issue but I need some help.
    Enfold removes the height of the header from the first builder element set to have “100% window height”.
    I need to be able to remove this behaviour in the js, and I bet it’s here.
    As you can read in the comment before the code, it must be here the part to change!

    //various section heights (100-25% as well as 100% - header/adminbar in case its the first builder element)
    			css += ".av-minimum-height-100 .container, .avia-fullscreen-slider .avia-slideshow, #top.avia-blank .av-minimum-height-100 .container, .av-cell-min-height-100 > .flex_cell{height:"+wh100+"px;}\n";
    			
    			$.each( pc_heights, function( index, value ) {
    						var wh = Math.round( wh100 * ( value / 100.0 ) );
    						css += ".av-minimum-height-" + value + " .container, .av-cell-min-height-" + value + " > .flex_cell	{height:" + wh + "px;}\n";
    					});
    			
    			css += ".avia-builder-el-0.av-minimum-height-100 .container, .avia-builder-el-0.avia-fullscreen-slider .avia-slideshow, .avia-builder-el-0.av-cell-min-height-100 > .flex_cell{height:"+wh100_mod+"px;}\n";
    			
    			css += "#top .av-solo-full .avia-slideshow {min-height:"+solo+"px;}\n";
    #1233251

    I solved giving the first color section an id, and overwriting the js rule.

    #hero  {
        height: 100vh !important;
    }
    #1233256

    Hi,

    Great, I’m glad that you found a solution and thanks for sharing. Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,
    Rikard

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