Home Forums Fusion Removing the side menu from homepage and making it full width

This topic contains 10 replies, has 2 voices, and was last updated by  Joshua 5 days ago.

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #47083

    minkidesign
    Participant

    Hi there

    You mentioned when I purchased the Fusion theme that I could hide the menu on the homepage.
    I’ve managed to hide the side menu that I’m using, but unfortunately it’s still showing the margin for the menu and the content isn’t full width (therefore not centred).

    This is the URL – http://wwp.minkidesign.com/

    The other option, which I’m not sure if is possible, is to show the mobile menu just on the homepage?

    Thanks so much! :)

    #47085

    Joshua
    Keymaster

    It looks like you’ve already taken care of the margin issue, but let me know if you’re still seeing this in any browsers.

    Assuming you want to show the same menu that’s on other pages, but have it hidden to start with on the homepage, this is how I’d go about it. Instead of setting the navbar to display none, try adding this to your Custom CSS:

    .page-id-2 .navbar-sidebar {
        transform: translate3d(-100%,0,0);
    }
    .navbar-active .navbar-sidebar {
      transform: translate3d(0%,0,0);
    }
    .navbar-toggler {
        display: flex !important;
    }

    Then just add your toggler button anywhere you’d like on the page (you can drop in an HTML widget if you’re using Elementor):

    <button class="navbar-toggler navbar-style-icon_and_text" type="button" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation" data-sequence="overlay">
      <span class="close-toggler-text">Close</span>
      <span class="toggler-text">Nav</span>
      <i class="icon-menu"></i><i class="icon-cross2 close-icon"></i>
    </button>

    Let me know if you need any more help with this.

    • This reply was modified 5 days, 1 hour ago by  Joshua.
    • This reply was modified 5 days, 1 hour ago by  Joshua.
    #47086

    minkidesign
    Participant

    I’ve added that HTML in for the toggler button, but it’s not showing anything?

    Am I missing something?

    Thanks!

    #47087

    minkidesign
    Participant

    Also – is there a way I can rotate the background image? I have the revolution slider which I could use – just not sure how to make it full screen to sit behind the writing on the page?

    Thanks so much!

    #47088

    minkidesign
    Participant

    Sorry – I’ve managed to work it out, you can see here – http://wwp.minkidesign.com/home-2/

    How would I overlay the menu icon on here as I’m using a full screen Revolution Slider, via the shortcode part of Elementor.

    Thanks!

    #47090

    Joshua
    Keymaster

    Sorry, you can copy and paste the above CSS again. I added a small bit at the end to make sure the navbar toggler is always showing:

    .navbar-toggler {
        display: flex !important;
    }

    Instead of adding the button toggler to Revolution Slider and repeating on every slide, you could add this to your fixed corner right widget under Apperance->Widgets. By default this is in the bottom right corner of the screen, but you could move it to the top by adding this CSS:

    .fixed-corner-right {
        top: 20px;
    }
    #47092

    minkidesign
    Participant

    Thanks – it now seems to be showing a Menu and Nav collapsed menu now though?

    #47093

    minkidesign
    Participant

    This only happens on the homepage, however the top mobile menu also shows on all other pages too?

    #47094

    minkidesign
    Participant

    Sorry, also just noticed that the menu doesn’t slide in on the new homepage that I designed – http://wwp.minkidesign.com/home-2/

    I’m wondering if it’s because I selected the toggle to force content full screen using javascript? That was how I got round the menu margin issue…

    #47095

    minkidesign
    Participant

    Have fixed this now with a bit of CSS!

    Other problem I have, is that when you click to go to another page from the homepage, then click back to home, the slider doesn’t show. Presumably this is because it loads it with JS somehow, and doesn’t send the right JS event so rev slider doesn’t know how to start.

    #47096

    Joshua
    Keymaster

    That’s correct, you’ll need an initialize function from Revolution Slider to make the plugin AJAX ready. You can copy and paste this function into the theme’s AJAX event (this can be pasted into Custom Javascript in Advanced when you’ve added the init function):

    Barba.Dispatcher.on('newPageReady', function(currentStatus, oldStatus, container) {
      // Your initialize function goes here
    });

    I found a function that looks to be the rev slider init in your page source (you may have to confirm this with them if this doesn’t work). So if this was the correct function, you’d add this inside the above event:

    Barba.Dispatcher.on('newPageReady', function(currentStatus, oldStatus, container) {
    
        var revapi1,
            tpj=jQuery;
                    
        tpj(document).ready(function() {
            if(tpj("#rev_slider_1_1").revolution == undefined){
                revslider_showDoubleJqueryError("#rev_slider_1_1");
            }else{
                revapi1 = tpj("#rev_slider_1_1").show().revolution({
                    sliderType:"standard",
                    jsFileLocation:"//wwp.minkidesign.com/wp-content/plugins/revslider/public/assets/js/",
                    sliderLayout:"auto",
                    dottedOverlay:"none",
                    delay:9000,
                    navigation: {
                        onHoverStop:"off",
                    },
                    visibilityLevels:[1240,1024,778,480],
                    gridwidth:1240,
                    gridheight:868,
                    lazyType:"none",
                    shadow:0,
                    spinner:"spinner0",
                    stopLoop:"off",
                    stopAfterLoops:-1,
                    stopAtSlide:-1,
                    shuffle:"off",
                    autoHeight:"off",
                    disableProgressBar:"on",
                    hideThumbsOnMobile:"off",
                    hideSliderAtLimit:0,
                    hideCaptionAtLimit:0,
                    hideAllCaptionAtLilmit:0,
                    debugMode:false,
                    fallbacks: {
                        simplifyAll:"off",
                        nextSlideOnWindowFocus:"off",
                        disableFocusListener:false,
                    }
                });
            }
            
        });	/*ready*/
    
    });

    Let me know if that makes sense or if you have any questions.

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.