Docs

[Meng]

Is there a way to make the navbar lay over the page’s content? So that I can have the first section of the page with a certain background, which runs under the navbar and topbar… (see sample below created by making the navbar bg transparent and setting top-offset to 70px)

[Prasant Rai]

Hello Meng,

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.

Thanks.

[Meng]

Hey no it’s just a general question. I’m just setting up a fresh x development environment to try and get the results, but it’s on a local machine. You can use any random fresh X install for comparison.

[Thai]

Hi There,

Please add the following CSS under Customizer > Custom > Global CSS:

.x-navbar {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
}
.x-navbar.x-navbar-fixed-top {
    position: fixed;
}

Hope it helps 🙂

[Meng]

Hi Thai,

Thanks for responding. But I can tell from reading the CSS alone (tried it too) that it will: A) only attach the navbar to the page top, not the topbar; and B) not move the page content (everything inside .x-main) under it.

Any other solutions you might suggest? Like I said, the goal is to have the page content *under* the nav menu 🙂 Because I’d like to have a parallax background image under the menu that contains the page title.

[edit] Alternatively, actually, is there a way to add parallax effect to the page background image? That would also be a fine solution.

[Rue Nel]

Hello There,

Thanks for the updates!

1a] To make the topbar fixed as well along with the navbar, please add the following JS code in the customizer, Appearance > Customize > Custom > Javascript

(function($){
  $('.x-topbar').insertBefore('.x-navbar-inner');
})(jQuery);

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

@media(min-width: 980px){
  body.x-navbar-fixed-top-active .x-navbar-wrap {
    height: 0;
  }

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

  .x-navbar.x-navbar-fixed-top {
    background-color: #373737 !important;
  }
}

2] Since parallax cannot be applied to the page background image, you must add a section in your page with a background image and a parallax effect in it to achieve what you have in mind.

Hope this helps.

[Meng]

Hi Rue,

Thanks for your suggestions. The problem is that the page contents are still not under the navbar. Never mind, I’ve solved the issue already by simply making the navbar transparent and sliding .x-main up. If you have a better solution than this one, please let me know.

.x-navbar {
background: transparent;
}
.x-main {
position: relative;
top: -100px;
}

[Rad]

Hi there,

That will work, but you can try this too

.masthead {
height:0px;
position: relative;
z-index: 999999;
}

Cheers!

[Author]

Posts