Basics about Slider Rev - sidebar menu

[iamwithU]

Hello, at the recommendation of your colleagues, I’ve finally started exploring the use of Slider Rev!

a) I have a sidebar menu (with a logo on top). How do I get this sidebar away - so the Slider takes up the whole screen (on laptop view)?

b) If I have another Slider below the 1st one, and I like the sidebar menu to be seen, how do I adjust this Slider width? How do I know what is the width of my sidebar?

[Alaa]

Hello @iamwithU

Thanks for writing in!

a) This is the top bar, however you have choose to show it to the left, to change that please check (X > Theme Options > Header > NavBar > NavBar Position).

b) The width of the sidebar is defined at the same place, please check this screenshot:

Thanks.

[iamwithU]

Yes, I already have the menu on the left side of all my webpages (for laptop screen). What I need to do now is remove it totally for just this new page. So I can have a slider image covering the whole screen.

When I chose “full width” on the slider settings, the sidebar menu can still be seen - on top of the slider.

But if the sidebar menu is removed, I’m concerned that a visitor may be left with nothing to navigate to. So I’m considering 2 options:

A). Have my logo & a collapsed menu ( the hamburger with 3 horizontal bars) on the left top corner - for the laptop view only. So visitors can click the hamburger to reveal the menu.

B). Below the 1st slider, add another section that shows the usual sidebar menu (as in my other web pages). So on the same web page, one slider on top covering the whole screen with no sidebar menu, & another slider below with sidebar menu on the left. Is this possible?

[Alaa]

Hi @iamwithU

I suggest doing mix of both solutions:

• First, add this CSS code to (Theme Options > CSS) to hide this sidebar on that specific page only on screens smaller than 1400px wide:

@media screen and (max-width: 1400px){
    .page-id-848 .masthead {
        display: none;
    }
    .page-id-848.x-navbar-fixed-left-active {
        padding: 0;
    }
}

• Then you can add a new section underneath this slider with the navigation element you like and control its visibility to be visible on laptops only, check this screenshot:

Thanks.