Docs

[AlCAt]

Hi,

I have set up a hero slider above masthead. I would like to have my current top bar at the top of the hero slider image and the nav bar at the bottom.

Can you help me on this?

Thank you

[Christopher]

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[AlCAt]

This reply has been marked as private.

[Rue Nel]

Hello There,

Thanks for providing the information. To move the topbar at the top of the slider just like this: http://prntscr.com/dhmmyc
Please do the following:
1] Please edit the page back in Cornerstone
2] Go to the settings tab, Settings > Custom JS and insert the following custom js code

(function($){
  $(document).ready(function(){
    $('.x-topbar').prependTo( $('.x-slider-container.above') );
  });
})(jQuery);

3] And then please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.x-topbar {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 10000;
}

We would loved to know if this has work for you. Thank you.

[AlCAt]

Hi Rue,

It has worked perfectly! Can I do the same with the nav bar but placing it at the bottom of the slider?

I also want to remove the logo background completely as I’m using the revolution slider as header.

[Rue Nel]

Hello There,

Thanks for updating in!

1] To place the navbar at the bottom, please edit the slider and add an offset container. With offset container settings, the Height of Slider will be decreased with the height of these Containers to fit perfect in the screen. Please see this screenshot: http://prnt.sc/dhmyyq

2] And to remove the logo, please edit your page in Cornerstone and insert the following custom css in the settings tab, Settings > Custom CSS

.x-logobar {
    display: none;
}

Hope this helps. Please let us know how it goes.

[AlCAt]

Hi Rue,

It worked great! Thank you so much.

Just one issue: the background of the nav bar changed. It went from a slighty transparent black to plain gray but only when overlaying on the header. Once I scroll down, it goes back to the normal background I have set.

[Christopher]

Hi there,

Please add this code :

@media only screen and (min-width: 979px){
.x-navbar {
    margin-top: -36px;
}
}

Hope it helps.

[AlCAt]

Hi Christopher!

Thank you for the code.

It corrected the color but it creates a gap between the hero image and the screen. I have attached screenshots.

I also lose the fixed top option of the nav bar. Can you help me correct it?

[Christopher]

Hi there,

please remove first section which is empty.

Thanks.

[AlCAt]

Hi Christopher,

It’s more about how to have the header fit the whole screen. Also I lost the fixed top option even though it’s still activated in the customizer.

[Christopher]

Hi there,

The menu is fixed top, please see the attachment.
Seems like removing extra section has solved the issue as I don’t see the space anymore.

Hope it helps.

[Author]

Posts