BASICS on Slider Rev: remove menu & logo of template

Hi there,
I downloaded a free template from Slider Rev & used it as a base for me to build my own. I could remove the images & text. But there are some stuff embedded which are not “layers” so I could not click them & remove them. They only show up in the preview screen:

a) the menu (the hamburger with 3 bars)
b) the icon (which leads to the homepage)
c) some thumbnails appearing at the bottom right of the screen - in the template slider called Photography Carousel.

Would appreciate some help.

Hi @iamwithU

These are all called “Static/Global Layers” which can be customized by following this guide:
https://www.themepunch.com/faq/modify-burger-menu/

Thanks.

Thanks Alaa. That was enlightening. I didn’t know their hamburger menu was there.

Just wondering, is it possible to import that menu into every page of my X Theme website?

If it’s possible, then I’ll need to remove my existing menu & logo which is on the left sidebar (for laptop screen) & the top header (for phone view). How can I do that?

Alternatively, does X Theme have a similar menu that animates when clicked?

Hi There,

Unfortunately, X does not offer that type of menu. What you can do is set that slider as the Slider Masthead Above (or below) Header on every pages to serve as the Header/Navigation.

Slider Settings: Above Masthead and Slider Settings: Below Masthead.

Thanks,

Thanks Friech for that great tip which teaches us how to insert an animated menu.

Would you be so kind to teach us how to insert the slider only for portrait views?

The reason for this question is because my current laptop view (ie landscape) has a left sidebar (with menu & logo). The whole website has been designed with that in mind & if I remove that sidebar menu, there are a lot of elements to adjust. So I’m thinking of removing the header (or is it called masthead) with the logo & hamburger menu bar only for the phone view (ie portrait).

Thus I’d like to incorporate the Slider Rev menu into every page of my website - but only for the phone view, not the laptop view. Can it be done? If so, how do I remove my existing masthead?

The end result is that in phone view (portrait screens), the visitor sees the animated menu. But in laptop (landscape screens), the current static menu is seen & no slider is used.

Hi @iamwithU

Since I’m not sure exactly which elements you want to hide and on which devices, I will give you all the tools so you can use them as you like, knowing that any CSS code can be added in (Theme Options > CSS):

  • This is the CSS code you need to hide the masthead:
.masthead {
    display: none;
}
body.x-navbar-fixed-left-active {
    padding: 0;
}
  • This is the CSS code that you can wrap any other code inside it to apply it for certain screen size (portrait or landscape):
@media screen and (max-width: 1200px) and (min-width: 890px){

/* your css code here */
}

Any code you add after the line /* your css code here */ will be applied to the screen size between 1200px to 890px, of course you can change that as needed.

  • To hide the slider, make sure to add it by shortcode in a separate section, then give it its own custom class, let’s say custom_class as in this screenshot:

Then you can use this CSS code to hide it:

.custom_class {
    display: none;
}

Thanks.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.