Home Forums Weaver Xtreme Theme Parallax Primary to Bottom

This topic contains 44 replies, has 2 voices, and was last updated by  scrambler 1 week, 3 days ago.

Viewing 16 posts - 1 through 16 (of 45 total)
  • Author
    Posts
  • #61359

    GDGerlach344
    Participant

    I purchased the Xtreme Plus plugin and am trying to figure out how to get the primary menu bar to be located below a parallax header image and then fix to top on scroll. The parallax works fine and the primary menu bar is fixed to top on scroll but the primary menu bar is not under the parallax image. In Menus/Primary Menu Bar there is an option to “Move Primary Menu to Top” which I did not check because it says the default is bottom. I would like the parallax to behave like the header of this forum except instead of having the primary menu overlayed over the parallax header, is there a way to have the primary header underneath the image & then fix to top on scroll?

    Here’s a link to a page from my website: communiclips.com

    #61360

    scrambler
    Moderator

    This is because the header image is only being used as the background of the header area (not as an image in the header container), and the only object in your header is the menu (title and tagline are hidden), so it naturally goes to the top of the header area.

    You can fix that by imposing a minimum height to the empty image container (so it pushes the menu down), by adding the rule below to the Theme Global Custom CSS Rule box using the value that works for you

    #branding {min-height:200px;}

     

    #61365

    GDGerlach344
    Participant

    OK I added that rule & it works but now the parallax image is too large; it’s cropping both sides of the logo. You can use the same link I posted above to see what it looks like.

    #61366

    scrambler
    Moderator

    You need to adjust the height value, or change the image size

    155px seems to do the trick

    #61411

    GDGerlach344
    Participant

    When you say adjust the height value, I assume you mean the min. height value of the #branding custom rule, correct? I tried setting the image size of that rule to 155 px like you suggested but the menu only went down about two thirds of the way to the bottom. The parallax image I’m using is 188 px high but using 188 as the min. height, it got closer to the bottom but as the menu gets closer to the bottom, the parallax image gets bigger and bigger which makes the image look cropped.  In fact, I could never get the menu to be under the image no matter what min. height value I tried because the image grew in size as the min. height value increased.

    And when you look at the page on a mobile device, the image is severely cropped as if it isn’t even responsive. I looked at the parallax image for weavertheme.com and it is resizing nicely without any cropping, even on a mobile device.

    Using a min. height of 230 px, the page looks like this: https://communiclips.com/

    The image is cropped on the left and the right because it’s size is not being restricted. I went to the home page of weavertheme.com and the image seems to be nicely responsive even on a mobile device.

    Is there a way to restrict the width of the parallax image to fit the width of the header area so it never grows wider and get cropped?

     

     

     

    #61414

    scrambler
    Moderator

    Yes I meant min height.

    The Menu can never be under the image as the menu is Inside the header area and the image is that area background.

    If you wanted a menu actually below the header area, you need to use one of the HTML insertion area that are after the header area and place an extra menu shortcode in it (you need Plus for that)

    The header image on this site does not scale on mobile it is cropped.

    It is the nature of the parallax background image to be cropped when the Ratio of the area changes. This is because a parallax background is set to cover the whole area no matter what aspect ratio it has. As a result cropping must occur and it makes this solution a bad one for an image like your with specific text.

    You could change the background size from cover to contain, but then as the browser gets smaller and the aspect ratio of the area changes to more of a square, instead of the image being cropped, you will see dead space below.

    Try it by adding the following custom CSS rule.

    #header {background-size:contain;}

     

     

    #61439

    GDGerlach344
    Participant

    As the browser gets smaller, the width of the parallax header area gets smaller but the height remains the same, correct?

    But a regular header image area retains its aspect ratio when a browser gets smaller, correct?

    I added the #header {background-size:contain;} to the global Custom CSS Rules but it isn’t working. Do I need to put that rule somewhere else?

    #61440

    scrambler
    Moderator

    To test contain, change the rule to

    .header-as-bg-parallax#header {background-size:contain;}

    1-As the browser gets smaller, the width of the parallax header area gets smaller but the height remains the same, correct?

    Yes because this area is empty so the only way to give it a height is with a value which is not responsive.

    That said, here are some way on modern browser to give a height that is proportional to the Brower width. To use that try the following rule

    #header (min-height:20vw;}

    It will make the height 20% or the viewer width.

    Now the problem with that is that your wrapper is limited to 1200px, so we don’t want the height to be proportional to the viewer width above that.

    So the rule to use instead should be

    @media all and (max-width:1200px) {
    #header (min-height:20vw;}
    }

    @media all and (max-width:1200px) {
    #header {min-height:20vw;}
    }

    That should give you a responsive parallax area on modern browser that understand CSS vw units

    It will be 240px (20% of 1200px) when the browser is wider than that and the wrapper width is 1200px, but below 1200px, it will be 20% of whatever width the viewer has.

    2-But a regular header image area retains its aspect ratio when a browser gets smaller, correct?

    Yes, because the image is an object in the area, and image can be set to be responsive.

    #61456

    GDGerlach344
    Participant

    When I added the rule .header-as-bg-parallax#header {background-size:contain;} the background image behaved just as you said. It got smaller, kept its aspect ratio but there was a blank space below the image.

    When I added this suggest rule…

    @media all and (max-width:1200px) {
    #header (min-height:20vw;}
    }

    It did not create a responsive parallax area; the area kept its height as the width decreased.

    I read the https://guide.weavertheme.com/parallax-with-weaver-xtreme-plus/ guide and was a bit confused because one of the examples it gave was using parallax within a post instead of a page. It looks like you need to use multiple posts to create multiple parallax images on a single page. It looks like there are more parallax options on a post than a page.

    Another thing that was confusing to me was what Header Area & Header Image options actually affect a parallax image since a parallax image is really a background image. I’m wondering if there are any parameters in the Header Area and Header Image sections that I need to adjust. I was going to attach an image that shows my settings but I don’t see an attachment option for this forum.

     

     

    #61459

    scrambler
    Moderator

    I had a syntax error in my rule (you are allowed to correct them 🙂 )

    Correct it to use curly bracket instead of parenthesis (in yellow below)

    @media all and (max-width:1200px) {
    #header {min-height:20vw;}
    }

    #61460

    scrambler
    Moderator

    It looks like there are more parallax options on a post than a page.

    Does not quite make sense.

    A page with parallax blocks with either use posts for each block, or a shortcode for each block.

    I have not compared exactly all the parallax options with posts compared to the shortcode, but they should be the same.

    There are no options to adjust for the header when using the heard image as a parallax BG apart from the height.

    I explained why a parallax header area does not behave as a header image in terms of responsiveness, if that is not clear, let me know

    #61475

    GDGerlach344
    Participant

    Your revised rule works perfectly & the parallax area/image is responsive.

    I also ended up using your suggestion to use the “postheader” HTML insertion area to insert a menu shortcode. I was able to hide the header menu on all the pages but when I went to hide the header menu on a post, I couldn’t find a “Visibility” tab or any option in the other tabs to hide the header menu. How do I do that with a post?

    And… Is there a way to make the menu I inserted into the “postheader” HTML insertion area “Fix to Top on Scroll”?

    #61477

    scrambler
    Moderator

    Try the method described in the article below for Theme areas, using the class in the area class box

    https://guide.weavertheme.com/script-fix-anything-on-scroll/

    #61494

    GDGerlach344
    Participant

    I was able to use the tutorial to fix the postheader menu to the top. It works fine. Thanks!

    Two more questions:

    #1: Now that I’m using the postheader insertion area for my main menu I need to hide the primary menu bar that appears in the header. For my pages, it was easy but when I went to hide the primary menu bar on a post, I couldn’t find a “Visibility” tab or any option in the other tabs to hide the header menu. How do I hide the primary menu bar on a post?

    #2: I have one website where the header height varies from page to page using the “Featured Image/Header Image Replacement” option. So far I have been setting the header height in “Main Options/Header/Header Image” using the “Suggested Header Image Height” & “Minimum Header Height” parameters. But those settings are global. How do I set the height for individual pages. I couldn’t find any per post options for that parameter.

     

    #61495

    scrambler
    Moderator

    1) You hide the menu bar globally, not on pages or posts.

    You do that using main options > menus > primary menu bar > hide option

    2) I am not sure I follow. When using a header image, the height should automatically match the image, so that is the best way to conrol it, no need for the height option.

     

    #61497

    GDGerlach344
    Participant

    1) When I activate “Hide On All Devices” @ main options > menus > primary menu bar > hide option, the menu bar I created using the post header HTML insertion (see above in this thread) disappears on all pages. I just need to hide the main menu bar that appears in the header area of a post.

    2) I should have made it clear that I was referring to a parallax header. My question should have read like this:

    I have one website where the parallax header height varies from page to page because the header image varies in size. I chose different header images using the “Featured Image/Header Image Replacement” option. So far I have been setting the header height (to accommodate the parallax header area) in “Main Options/Header/Header Image” using the “Suggested Header Image Height” & “Minimum Header Height” parameters. But those settings are global. How do I set the parallax image area height for individual pages? I couldn’t find any per post options for that parameter.

Viewing 16 posts - 1 through 16 (of 45 total)

You must be logged in to reply to this topic.