Adding slider revolution burger menu to website as global menu (to be overlayed with another slider header

[samatvayoga]

Hello,

I have a website that

1. uses a unique slider revolution header for each page
2. uses a main slider carousel for the home page

I have created a burger to mimic the carousel burger from the main home page (i don’t want this to be my main header for every page in the site - just the landing)

I want to add the burger to the sub site pages.

I understand the following

1. my home page will be No Container, No Header (as i will use the slider revolution carousel here), Footer
2. my other pages will be No Container, Header (the burger menu i created), Footer
3. I currently use a slider revolution Footer on all my pages so I understand how to insert the widget to make it global.

My problem

1. How do i set the burger to sit on top of the sub page slider (i don’t want the menu to sit above the hero slider - i want it to overlay)???

What I’ve tried

1. I have tried to change the margins and the padding with a test page and insert the burger into a page (No Container, No Header, No Footer) to see if I need to adjust the settings on each of my pages…not working
2. I have a huge white space about 800-1000px before the image when i do this…why???

I think there must be something that I am missing that is very simple since I see these all over the place. I cannot figure it out.

What I need from you.

1. How to I fix my burger menu so, when added as a global widget as a header menu (i understand this step) it will display on top of my pages header images as an overlay - not above as a separate section.

thank you. I have added the secure note for the site details, test pages and slider name.

In short. I want a menu (my burger) to appear in line with the first section on each page (once globalized) and not above it.

[ruenel]

Hello @samatvayoga,

Thank you for the detailed post information.

1. How do I set the burger to sit on top of the sub-page slider (i don’t want the menu to sit above the hero slider - i want it to overlay)???

You may need to check out this documentation: https://theme.co/docs/stack-the-navbar-over-masthead-slider

Kindly let us know how it goes.

[samatvayoga]

this did nothing…can you please take a moment to help me? i have given (as you say) “detailed post information”

1. i have created the header widget and inserted the burger menu
2. i have a weird small “+” symbol in the top corner of may pages now. when i click it, i get the burger menu
3. my header widget is appearing in a “+” in to top corner - thus being hidden. it looks like the header widget is being stuffed into a collapsed menu?
4. my sub pages still have a big white space before the first slider- i don’t think the code changes

as you can see…all of these - for the most part - were in my detailed questions…none have been resolved correctly. thanks again for readdressing my questions. hopefully it wont be another day.

UPDATE:
I have played around a bit while waiting for your help.

1 - it seems that the menu is being pushed to this small plus sign in the corner…what is this?? when i expand it, i can find my burger menu but cant read much since it isn’t appear over the 1st section, the header is collapsing into this “near invisible” + symbol.

2 - i can see my logo on the top of all the sub pages, it seems to be pushing the first section down. i think it is a theme setting somewhere…how do i turn it off. (UPDATE: I FIGURED THIS OUT…ONCE I CAN GET RID OF THE SMALL PLUS IN THE TOP - I WILL USE THAT LOGO - UNTIL THEN I UNDERSTAND HOW TO REMOVE IT IN MY THEME SETTINGS SO I HAVE LEFT IT ON)

also, the “burger” only appears is i shrink my screen to 90%. it will stay visible if i increase to 100% after the decrease. i’m not sure if this will be fixed when we can get rid of the fact that it is hiding in the “+” in the top corner.

this is how the code changed my main home page only

[tristup]

Hi @samatvayoga,

My colleague has correctly pointed out the documentation, but you need to change the .home to .page as .home is pointing to the Home Page only. The code will look like the following.

@media(min-width: 980px) 
{
    .page .masthead  
    {
        position:absolute;
        width:100%;
        background-color:transparent !important;
    }
    body.x-navbar-fixed-top-active .x-navbar-wrap 
    {
        height: auto;
    }
    .page .x-logobar,
    .page  .x-navbar, .page .x-topbar  
    {
        background-color: transparent !important;
        box-shadow: none;
        border: 0;
    }
}
.x-navbar .desktop .x-nav>li>a 
{
    border-right: 0px ;
}

I have checked the above code using the Browser debugging tool, and it works. You may need to adjust the style for the menu to be visible over the slider.

Thanks

[samatvayoga]

thank you. i have fixed this for .page and .home

what is the code for the post section??? I have tried to change it to .post .posts .blog nothing works

Can you please reread my issues above as this is still not addressing everything that i asked.

1. I have already styled a menu using slider revolution called “burger”
2. it is being hidden with this weird “+” in the top corner. I cannot find how it got there. I have all the snapshots in my last message to you.
3. please help me remove this
4. please also address the above questions with the code for my blog page

---

3 HOURS LATER UPDATE.

I have found this artical https://theme.co/archive/forums/topic/disableremove-widgetbar/

I have disabled the widget bar and the “+” has disappeared…

how do i now use the burger menu from slider revolution as my menu on top in place of the primary menu that is there. the only way i knew how to do it was to put it in the widget section but it is hiding it and not displaying it on top of the first section???

[ruenel]

Hello @samatvayoga,

The burger menu is attached to a slider. The only way you can use the burger menu from the Slider Revolution is by using the slider on the page. You cannot display burger menu globally without displaying the slider. Regretfully what you have in mind is not possible at the moment.

Thank you for your understanding.

[samatvayoga]

I don’t understand actually. i learned how to create the burger button from the slider revolution youtube channel tutorial. there is nothing in this video about it being attached to a slider. it is simply a navigation menu.

Build a Hamburger Menu with Slider Revolution 6

please take a look. how and why was this created and how is it supposed to be used. someone that works for slider revolution must have thought it necessary to film for tutorial.

---

please answer all my questions. you are only responding to some of the issues. how to i code the following so that my blog posts also do not have the space at the top?? it works correctly for .home and .page. what is the code for the post sections???

@media(min-width: 980px)
{
.page .masthead
{
position:absolute;
width:100%;
background-color:transparent !important;
}
body.x-navbar-fixed-top-active .x-navbar-wrap
{
height: auto;
}
.page .x-logobar,
.page .x-navbar, .page .x-topbar
{
background-color: transparent !important;
box-shadow: none;
border: 0;
}
}
.x-navbar .desktop .x-nav>li>a
{
border-right: 0px ;
}

[ruenel]

Hello @samatvayoga,

1.) You have created the burger menu in the Slider Revolution. In order to display the burger menu, you need to insert the slider shortcode which is this: [rev_slider alias="burger-menu"][/rev_slider]. You must also take note that the navigation bar is for the header logo and the navigation menu. Regretfully there isn’t any setting in the X theme that allows you to insert the slider shortcode ([rev_slider alias="burger-menu"][/rev_slider]) in the navigation menu or navigation bar. It is possible with a custom development that is beyond the scope of our support already.

If ever you want to create your own custom header and display a different navigation bar with the burger menu, we highly recommend that you upgrade to the Pro theme instead. The Pro theme has a Header Builder which will allow you to create custom header and this is where you can insert any burger menu slider shortcode [rev_slider alias="burger-menu"][/rev_slider]. Please check out this documentation to get acquainted with the Header Builder:

• https://theme.co/docs/header-builder-overview

2.) The given code will only affect the pages because of the .page selector. If you want it to affect the blog index, you will be using .blog and use .archive for the other archive pages. If you want the code to affect all the pages, blog index and archive pages, the three selectors must be present. Therefore, the updated code will be:

@media(min-width: 980px) {
    .page .masthead,
    .blog .masthead,
    .archive .masthead  {
        position:absolute;
        width:100%;
        background-color:transparent !important;
    }

    body.x-navbar-fixed-top-active .x-navbar-wrap {
        height: auto;
    }

    .page .x-logobar, .page  .x-navbar, .page .x-topbar,
    .blog .x-logobar, .blog  .x-navbar, .blog .x-topbar,
    .archive .x-logobar, .archive  .x-navbar, .archive .x-topbar  {
        background-color: transparent !important;
        box-shadow: none;
        border: 0;
    }
}

.x-navbar .desktop .x-nav>li>a {
    border-right: 0px ;
}

For single posts, you will be using .single-post as the CSS selector.

Please note that custom coding is outside the scope of our support. Issues that might arise from the use of custom code and further enhancements should be directed to a third-party developer.

Best Regards.

[samatvayoga]

@ruenel

.page .masthead,
    .blog .masthead,
    .archive .masthead 

thank you for your time.

I’m hoping this is my final question. I have fixed the heading spaces on the desktop but it is still showing up on all .pages and .single-posts…the code isn’t working for my mobile device. is there something else that needs to be added?

[ruenel]

Hello @samatvayoga,

The given code is only meant to work for device screens larger than 980 pixels. It is because of this line: @media(min-width: 980px) { }. If you want the code to work on all screens, you will have to remove the @media() block like this:

.page .masthead,
.blog .masthead,
.archive .masthead  {
    position:absolute;
    width:100%;
    background-color:transparent !important;
}

body.x-navbar-fixed-top-active .x-navbar-wrap {
    height: auto;
}

.page .x-logobar, .page  .x-navbar, .page .x-topbar,
.blog .x-logobar, .blog  .x-navbar, .blog .x-topbar,
.archive .x-logobar, .archive  .x-navbar, .archive .x-topbar  {
    background-color: transparent !important;
    box-shadow: none;
    border: 0;
}

.x-navbar .desktop .x-nav>li>a {
    border-right: 0px ;
}

Hope this helps.