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 - 17 through 32 (of 45 total)
  • Author
    Posts
  • #61499

    scrambler
    Moderator
    1. That is because you used the primary menu bar style in your shortcode, instead of the Extra menu bar style.

    Set your extra menu bar styling to the same as the primary and use that in the shortcode, then hide the primary menu bar on all devices

    2- You can add the rule below with the value you like and replacing xxx by the page ID#

    Make sure the vw value is consistent with the first rule. For example if using a min-height of 180px, the vw value must be 15 because 15% of 1200 is 180

    .page-id-xxx #header {min-height:180px;}

    @media all and (max-width:1200px) {
    .page-id-xxx #header {min-height:15vw;}
    }

    #61500

    GDGerlach344
    Participant

    OK I got the Extra menu working and hid the primary on all devices.

    Is there a way to have a parallax header on just the front page and have regular header images on all the other pages?

    #61501

    scrambler
    Moderator

    Use a regular header image in the header setting and select “hide header image on front page option”

    Then use a parallax shortcode in an HTML insertion area for the front page by checking the option “hide on non front page ” in the chosen HTML insertion area option

     

    #61503

    GDGerlach344
    Participant

    I set up the parallax shortcode as per the instructions on the parallax tutorial. I don’t need any overlay content so here’s what I came up with:

    [parallax img=’https://judygerlach.com/wp-content/uploads/Header-Ransom-Shelter.jpg’ height=400 class=’custom-class’]

    But it didn’t work. I wasn’t sure what to enter as the class. Let me know what I need to do to correct it.

    Also… I tried inserting the shortcut via header HTML insertion using the Customizer method and the per page method. In both cases I did not see any options such as “hide on non front page”. Where exactly is that option?

    #61506

    scrambler
    Moderator

    The shortcode below works for me, if not for you, I need a link to the page with specifics about where it is inserted.

    But I will be traveling in the next few days, so if not in the next hour you will need to figure it out

    [parallax img='https://judygerlach.com/wp-content/uploads/Header-Ransom-Shelter.jpg' height=400]
    
    Beware quotes get messed up with copy paste, always retype your quotes in your final content
    #61518

    GDGerlach344
    Participant

    Here’s the link to the page I’m working on: https://judygerlach.com/

    I checked “Hide Header Image on Front Page”

    Then I inserted the shortcode from your post using the Header HTML box in Per Page/Content. As you can see, the shortcode shows up instead of the parallax image.

    Also… I did not see any options such as “hide on non front page”. Where exactly is that option?

     

    #61520

    scrambler
    Moderator

    I did not say to use the header HTML but an HTML insertion area located in Advanced options > HTML Insertion area.

    #61521

    GDGerlach344
    Participant

    Found the Header HTML insertion area and the parallax is working but the image width goes way beyond the wrapper area. I have the theme width set to 1200px in the Wrapper Area options section. How do I keep the parallax image from going beyond the width of the header & wrapper?

    https://judygerlach.com/

    I also added the global rule you gave me earlier in this thread that created the responsive parallax area on another website where the parallax header was created in the Main Options/Header section:

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

    I changed the min-height value to 33vw because the image is 400 px high (400 is 33% of 1200) but this rule doesn’t appear to be working with the parallax shortcode. Any thoughts?

    #61526

    scrambler
    Moderator

    @weaver, it seems the parallax shortcode always inserts a fullwidth area, is there a way for it not to do that ?

    @GDGerlack3 The rule I gave you was for the header area, now that the parallax is in another area, the rule needs to change to use the ID of the area in questions.

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

    #61529

    GDGerlach344
    Participant

    I revised the rule as you suggested but it did not fix the problem. To be clear, I put that rule in the global Custom CSS Rules section. Let me know if it needs to go somewhere else.

    Also… I put the parallax shortcode in the “Header Top” HTML Insertion area that’s in the Advanced Options tab. Please advise if it needs to go somewhere else.

    Thanks for your patience; it’s much appreciated!

     

    #61530

    scrambler
    Moderator

    change it to

    @media all and (max-width:1200px) {
    #inject_header .parallax-base {height:33vw !important;}
    }

    But I need to do more testing and I have very bad internet connection where I am, so not sure when I will be able to test…

    #61531

    scrambler
    Moderator

    OK I got some juice…

    Also add the rules below to correct the fullwidth for now
    #inject_header .parallax-base {padding:0 !important;margin:0 !important;background-position:top left !important;}

    But you will need to adjust the 400px height and 33vw

    #61532

    GDGerlach344
    Participant

    After the changes you suggested in your last two posts, the parallax image area is now responsive but the image is too big and severely cropped when the browser is in it widest position. Then when I reduce the size of the browser, the parallax area is responsive but the image size stays the same and is cropped more and more as the browser size is reduced.

    I tried changing the 400px height and 33vw as you suggested but it had no affect.

    Here’s the page with the two new rules: https://judygerlach.com

    Here’s what the image should look like: https://judygerlach.com/wp-content/uploads/Header-Ransom-Shelter.jpg

    #61533

    scrambler
    Moderator

    Add the background-size contain, and make sure the image is large enough (1200px)

    #inject_header .parallax-base {padding:0 !important;margin:0 !important;background-position:top left !important;background-size:contain !important;}

     

    #61555

    GDGerlach344
    Participant

    We’re getting closer. I revised the rule and made sure the image was 1200px wide. The image is still cropped but not as much. The parallax area is responsive but the image gets cropped at the top when the browser is reduced in size. I also noticed that as the browser got smaller, a blank area began to grow between the parallax image and the menu bar. I was able to fix that by changing from 33vw down to 25vw.

    #61556

    scrambler
    Moderator

    Right now your image is 940 x 350

    It needs t be scaled to be 1200, which will make it 1200 x 446.8

    Next the parallax height will have to be set to 446.8 instead of 400, and the vw value to 37.23

Viewing 16 posts - 17 through 32 (of 45 total)

You must be logged in to reply to this topic.