[co50Participant]

Hi,

A found several topics on this but they were a few years old and I’m [hoping] things are easier now….

Basically, is there some easy way in Cornerstone to set a background image that encompasses both the top header and part of the content below it – like you see here: http://wmtri.com/

That was a site we did with Salient, which makes it very easy to do that effect, but couldn’t find a way to do it outside of custom CSS with X theme. Thanks for your help!

[JadeModerator]

Hi there,

Currently, using a simple custom CSS is the way to go in changing the background image of the menu navigation and the content below it. Although, basing on the sample link you have provided, you can create a Revolution Slider then set it as the Below or Above Masthead in the page settings then we could add another custom CSS so that the navigation will be positioned on top of the slider image.

Kindly provide us with the link to your site if you need help with the custom code.

[co50Participant]

This reply has been marked as private.

[JoaoModerator]

Hi There,

First of all I would like to say that our developers are almost finished with the final details of our new Header Builder, on this new revolutionary Header Builder you will be able to do amazing customization without the need of CSS

CSS is not unique to every site, but some adjustments maybe necessary, if you don´t know how to tweak the code yourself from website to website you can always reach us.

For the moment please add the following code to Appereance > Customizer > Custom > CSS in order to make your navbar overlay your slider and change color on scrolling:

.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;
       }

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

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

And add this to Appereance > Customizer > Custom > Javascript

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

Hope it helps

Joao

[co50Participant]

This reply has been marked as private.

[JadeModerator]

Hi there,

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.

[co50Participant]

No, absolutely not. Why on earth are you asking for login credentials for a CSS question?

I am asking you how to do a background image as described in my previous post. It has nothing to do with the software I have installed or my WordPress install specifically. There are no conflicts or any reason you’d need login credentials. The answer to this question should be the same answer for every single X/Cornerstone user that exists. Not to mention, I want to do this on more than just this one site, so the answer should be one that can be applied to other sites.

I’m even more perplexed that you have never been asked this before and don’t have a canned answer or knowledge base article to reference?

[Paul RModerator]

Hi,

There are two ways to add background like the sample sites you have provided.

1. Create a revslider and enable it in your page.

http://screencast.com/t/ttWKzJgQ3U7

Sliders

Then add this in Cornerstone > Settings > Custom CSS

body .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;
}

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

body .x-navbar.x-navbar-fixed-top {
    background-color:#fff;
}

2. Add the background image to the first section of your page.

http://screencast.com/t/wrN8Trml

then add this code in Cornerstone > settings > Css

http://screencast.com/t/Ik8LunlV

body .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;
}

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

body .x-navbar.x-navbar-fixed-top {
    background-color:#fff;
}

Make sure to select Fixed Top as Navbar Position under Header in the customizer.

Hope that helps

[co50Participant]

This reply has been marked as private.

[co50Participant]

This reply has been marked as private.

[JadeModerator]

Hi there,

Please try to add this code in the custom CSS:

.masthead-stacked {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.x-logobar, .x-navbar {
    border: 0;
    background-color: transparent;
    box-shadow: none;
}

.x-navbar-fixed-top {
    background-color: #fff;
}

This should set the navigation bar above the first section of the page and set the header navigation area to transparent.

Hope this helps.

[Author]

Posts