Docs

[bryan1976]

This reply has been marked as private.

[Joao]

Hi There,

1st thing is to remove the padding top from your first section where your slider is placed.

On Cornerstone Click on the section and set the top padding to 0px;

Please see image attached.

After that add the following code to Appereance Customizer Custom CSS:

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

Also delete the codes previosly added related to the navbar.

Hope that helps

Joao

[bryan1976]

Hi Joao,

This is mostly fixed now thanks!

However, the header is no longer fixed! I want the header to remain visible on ALL pages when scrolling down etc.

Any ideas please?

Many thanks,

Bryan

[bryan1976]

This reply has been marked as private.

[Christopher]

Hi there,

Please remove this code:

 .x-navbar {
            position:absolute;
            width:100%;
            background-color:rgba(0,0,0,0.5) !important;
            box-shadow: none;
            border: 0;
       }

Add this one :

@media (min-width:979px){
.home .x-main.full {
    margin-top: -186px;
}
 .x-navbar {
            width:100%;
            background-color:rgba(0,0,0,0.5) !important;
            box-shadow: none;
            border: 0;
       }
}

Hope it helps.

[bryan1976]

Tried this but it did not work.

I have now disabled breadcrumbs – worry about that later.

BUT…is it possible to fix the header for all pages in the site so it remains fixed? Is there an Icon demo which already has a transparent fixed header that will sit over a rev slider?

Thanks,

Bryan

[Joao]

Hi There,

Please find this code:

 .x-navbar {
            position:absolute;
            width:100%;
            background-color:rgba(0,0,0,0.5) !important;
            box-shadow: none;
            border: 0;
       }

And changed to :

 .x-navbar {
            position:fixed;
            width:100%;
            background-color:rgba(0,0,0,0.5) !important;
            box-shadow: none;
            border: 0;
       }

The solution provided by Christopher also seems to work.

Let us know how it goes

Joao

[bryan1976]

Hi,

This is great thanks!!

The homepage has the revolution slider under the header – perfect!

Which just leaves the breadcrumbs.

I need breadcrumbs on ALL pages EXCEPT homepage.

When I add breadcrumbs, they appear under the header.

Please see attached 2 images – ‘before’ and ‘with breadcrumbs’ to see what I mean.

This is Icon stack, with latest versions etc.

Thanks,

Bryan

[Christopher]

Hi there,

Please enable breadcrumbs or provide us with correct login credentials.

Thanks.

[bryan1976]

This reply has been marked as private.

[Christopher]

Hi there,

Please find this code :

.x-navbar {
    position: fixed;
    width: 100%;
    background-color: rgba(0,0,0,0.5) !important;
    box-shadow: none;
    border: 0;
}

And update it to :

.x-navbar {
    width: 100%;
    background-color: rgba(0,0,0,0.5) !important;
    box-shadow: none;
    border: 0;
}

Hope it helps.

[bryan1976]

Hi,

I’ve done this, and as you can see it affects the homepage. The rev slider is not under the header anymore.

Please can you advise.

Many thanks,

Bryan

[Christopher]

Hi there,

Add this as well :

@media (min-width:979px){

.home div#x-section-1 {
    margin-top: -90px !important;
}
}

Thanks.

[bryan1976]

Awesome job!! Thanks for all your support…we got there!!

Cheers,

Bryan

[Joao]

Glad to hear it,

Let us know if we can help with anything else.

Joao

[Author]

Posts