Home Forums Weaver Xtreme Theme Menu Bar Scroll Issues with Weaver Xtreme Pro

Topic Resolution: Resolved
Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #69470
    Mitchell
    Participant

    Hi, I’m designing a new site with Weaver Xtreme Pro, and having issues with the menu bar on scroll. It works fine when using a static or parallax image in the header, however isn’t working correctly using a video as the parallax background.

    Curious Legends

    I’ve set the menu to be ‘fixed to top on scroll’, which works fine until it gets down to the content. Then the content rolls over the top of it, and washes it out. On my current site (no video header), you can see it working by fixing to the top, without being ‘rolled’ over:

    http://www.curiouslegends.com.au

    Ideally, I would set it so that when the content scrolls up, it stays at the top, above the ‘Curious Legends’ title. Or – I set a background colour to the menu (currently transparent), and the content scrolls behind it, rather than over the top.

    Any ideas how I fix this?

    Thanks.

    #69472
    Weaver
    Keymaster

    I don’t exactly understand your question or what the “web.curiouslegends.com.au/curiouslegends/” link is supposed to demonstrate.

    I’m not sure there is any native Weaver Xtreme (Plus) code that knows what to do with parallax video backgrounds, or if adding come custom CSS to show a video as a background will work with fix header to the top.

    #69473
    Mitchell
    Participant

    Thanks for your reply. Basically, the content rolls over the menu when scrolling – making the menu unreadable. It should be the other way around – the menu should appear over the content. (Ie, white box with text, and Curious Legends title)

    Is there any way to fix this?

     

    Thanks

    #69474
    scrambler
    Moderator

    There is a problem with the z-index of the menu and content, but it is a tricky one.

    Working on trying to figure it out….

    #69475
    scrambler
    Moderator

    I don’t think there is any way to make that work with this layout.

    The problem is that in order to have a Video background using the header, you have to have both header and container with a z-index of zero, and the video inside the header with a z-index of -1.

    In that configuration, the Container will always be over the header. There is no way to have the video inside the header below the container, yet the menu also inside the header above the container.

    What could work if you have the plus plugin, is to not use the primary or secondary menu, but instead, add an Extra menu shortcode inside the prewrapper HTML insertion area, and fix that are at the top.

    Then we could have the z-index of that area above everything else so the menu is always over everything.

    #69476
    Mitchell
    Participant

    Amazing @scrambler – thanks for that. Happy to try it, I have the plus plugin. I started having a play with the extra menu, but hadn’t thought to try that. I’ll have a go shortly. Thanks!

    #69477
    Mitchell
    Participant

    @scrambler Ok – I’ve added the extra menu shortcode inside the prewrapper HTML insertion area, then disabled the header menu for the front page only. I’ve styled the extra menu to look how I want it (transparent background and white text), however have not been able to figure out how to fix it to the top of the page on scroll – currently it just sits at the top of the page. What code should I add? I’ll change the menu look once I get the scrolling happening correctly, so it fits with the site.

    If possible, 2 options would work aesthetically:

    1. Extra menu stays at top of the page as it scrolls, rolling over the content (would change the menu colours so this works)
    2. Extra menu stays at the top of the page as it scrolls only until it is just above the content area, then scrolls up and out of site.

    Aesthetically, either of those could work. The third option? I ditch this menu idea, and try something else. I could either fix the menu at the top of the page and trust people can hunt for it, or add a menu in the content area (this might be better – easy to do with the Extra Menu). I’d appreciate any advice or suggestions if we can’t get either of the first two options working.

    Thanks in advance for your help – loving using Weaver!

    Mitchell

     

    #69479
    scrambler
    Moderator

    1 is easy with CSS.

    Add the CSS rule below to the pre wrapper HTML Insertion Area BG CSS+ box

    {position:fixed;width:100%;z-index:1;}

    2- Would require javascript, so a whole other ball game.

    If you have some basic knowledge of that, you can have a look at the Article below, it has info that would allow you to figure it out 🙂

    Scripts: Advanced styling or design changes – Weaver Xtreme Guide (weavertheme.com)

    Item 2) in the article has some scripting example related to scrolling, that would allow you to add (or remove) a class to the prewrapper area at a certain scroll time. Using that you could make the Fixing CSS go away at a certain time

    #69480
    Mitchell
    Participant

    @scrambler Thanks!!

    Went with Option 1, the css. Is there any easy code I can use to make the bar the same size as the content area on that page? I know I can shrink the 100% down to something else (i.e., 75% or 50%), however don’t know how to centre it on the page. Otherwise, working now:

    Curious Legends

    Cheers

    #69481
    scrambler
    Moderator

    Yes, add the CSS rule below to the theme Global Custom CSS Rule box

    #inject_prewrapper .menu-extra {max-width:1080px; margin:0 auto;}

    #69482
    Mitchell
    Participant

    That did it, thanks!!

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