Docs

[PrevailMartialArts]

I would like my front page slider and menu template to look like this site:

http://www.satoriacademynj.com/home

I especially like the transparent / floating menu/header, the button placement, and the full size pics. What is the best theme and setting to recreate a slider like this site?

Thank you

[Joao]

Hi There,

You can create this with any stack or template.

To make your navbar your slider please do this:

Add the following code to Appereance Customizer Custom CSS

 .x-navbar {
            position:absolute;
            width:100%;
            background-color:transparent !important;
            box-shadow: none;
            border: 0;
       }
       body.x-navbar-fixed-top-active .x-navbar-wrap {
            height: auto;
       }

To make your navbar change color when scrolling:

Add to Appereance Customizer CUstom CSS

 .x-navbar-wrap {
     height: auto !important;
}

 .x-navbar {
     background-color:transparent;
     border:0;
     box-shadow:none;
     position: fixed;
     width:100%;
}

 .x-navbar-solid {
     background-color:white;
}

Appereance Customizer Custom JavasScript

jQuery(function($) {
    $(window).scroll(function(){ 
        if($(window).scrollTop() >50) {
              $('.x-navbar').addClass("x-navbar-solid");
        }else {
              $('.x-navbar').removeClass("x-navbar-solid");
        }
    });
});

To create a button link, you need to find out your Navbar Link ID substitute 416 for the correct number on the code below and add to Appereance Customizer Custom CSS:

http://wpsites.net/tools/find-nav-menu-item-i-d/

li#menu-item-460 > a {
    padding-top: 18px;
}
li#menu-item-460 > a:hover > span {
    box-shadow: none;
}
li#menu-item-460 > a > span {
    background-color: #00B8FF;
    padding: 8px 10px;
    border-radius: 4px;
}

Hope that helps,

If you need further help please provide your URL.

Thanks

[Brian Thompson]

This menu setup is exactly what I am looking for. My current client is using the Church Demo Theme and I am curious as to how to make the Navigation menu do the same as the posters site where it is transparent over the slider at the top of the page and changes as you scroll down.
see attached screen shot as my site is currently in “Coming Soon Mode”

[Brian Thompson]

This reply has been marked as private.

[Brian Thompson]

This reply has been marked as private.

[PrevailMartialArts]

Is there an easier way rather than inserting CSS? I am not a power user, and if I get into editing code I am afraid that I may screw something up

[PrevailMartialArts]

Also, I don’t know what you mean by “make your navbar your slider”? What does that mean?

[Joao]

Hi There,

“To make your navbar your slider please do this”:

Sorry this is my mistake, I meanet “To make your navbar be over our slider…”

First of all you need go to your home page. Click on Edit Page on your Top Worpdress Admin Bar

Once you are on your wordpress backend editor, scroll down until you find the options.

Slider Above Masthead

Slider Below Masthead.

Than deactivate the slider above masthead and select the same slider below masthead.

Regarding the code, is just about cutting and pasting. In order that we can help you.

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password
– Which navbar link you want to turn into a button.

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thanks

Joao

[Brian Thompson]

Thank you very much. I have copied the code in the correct area and also got the nav menu on top. LAst issue is It is not changing from transparent to solid class after scrolling. it stays transparent the whole time.

screen shots of what is going on.

[Joao]

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

[Brian Thompson]

This reply has been marked as private.

[Brian Thompson]

This reply has been marked as private.

[Christopher]

Hi there,

Please add this CSS code :

@media (min-width:979px){
body.home .x-navbar.x-navbar-fixed-top {
    background-color: #fff !important;
}
}

Hope it helps.

[TheDude]

Hi, I’ve done exactly as explained here but the color doesn’t change when scrolling down. It stays transparent.

[TheDude]

ps – i worked it out.

In your code I saw that the menu was set to Fixed Top.
My menu wasn’t set to fixed top – I changed it and now it works.

Go to customiser – header then select Fixed Top (under Navbar Position)

[Author]

Posts