Docs

[speester]

Content are push up because of pages has revolution slider and I want to make the menu transparent.

But its effecting these pages that has no revolution slider.

1) All Product
Example : http://aceforx.com/product/corn-burger/

2) Cart
http://aceforx.com/cart/

3) Checkout
http://aceforx.com/checkout/

Menu font on these pages cant be seen too.

How do i change these menu font color on these specific pages?

How do i remove the spacing for these specific pages?

[Rue Nel]

Hello There,

Thanks for writing in! Because of your menu modifications on the homepage, it applies to the whole site thus affecting the mentioned pages. To resolve this, you must update the css code and use this instead:

/* Change menu font color from  white to black upon scroll*/

.home .x-brand.text {
   color: #ffffff;
}

.home .x-navbar.x-navbar-fixed-top .x-brand.text {
   color: #2b2b2b ;
}

body.home .x-navbar { 
   border-bottom: 0;
   box-shadow:none;
   background-color: transparent;
   position:fixed;
   width:100%;
   top:0;
  transition: 0.3s all ease-in-out;
}

.home.x-navbar-fixed-top-active .x-navbar-wrap {
  height: auto;
}

body.home .x-navbar.x-navbar-fixed-top {
  border-bottom: 1px solid #ccc;
  background-color: #fff;
}

.home .x-navbar .x-navbar-inner a  span{
    color: #ffffff;
}

.home .x-navbar .x-navbar-inner a:hover span{
    color: #2b2b2b;
}

.home .x-navbar.x-navbar-fixed-top .x-navbar-inner a span{
    color: #2b2b2b;
}

.home .x-navbar.x-navbar-fixed-top .x-navbar-inner a:hover span{
    color: #a0a0a0;

.home.x-navbar-fixed-top-active .x-navbar-wrap {
    height: 0;
}

body.home .x-navbar {
   background-color: transparent;
   box-shadow: none;
   border-bottom: 0;
}

.home .x-navbar {
    transition: 0.2s all linear;
}

.home .x-navbar.alt-color {
    background-color: #ffffff;
}

.home #menu-item-312 a {
    padding-top: 25px;
}
.home #menu-item-312 a span {
    border: 2px solid #fff;
    padding: 10px;
}
.home .x-navbar-fixed-top #menu-item-312 a {
    padding-top: 20px;
}
.home .x-navbar-fixed-top #menu-item-312 a span {
    border-color: #000;
}

We have added .home selector so that the transparent menu will only apply on the homepage. For the rest of your site, it will follow whatever settings you have set in the customizer.

Hope this helps.

[speester]

The code has some issues when I change.

1) Other pages other then home page, the menu cart font cant be seen.
2) My meal now menu get pushed down

[speester]

2) My meal now menu get pushed down

is fixed.

1) Other pages other then home page, the menu cart font cant be seen.

I revert the code back to previous.

[Christopher]

Hi there,

Please add this :

body:not(.home) .x-navbar li a span {
    color: #000;
}

Hope it helps.

[speester]

is there a soluton for all pages that have revolution slider to be transparent menu ?

[speester]

I want all these pages to have transparent menu and solid white upon scroll (not only home page, and default for all other pages)

Home
http://aceforx.com/meal-plan-women/
http://aceforx.com/meal-plan-man/
http://aceforx.com/tone-up/
http://aceforx.com/lose-it/
http://aceforx.com/massive-gain/
http://aceforx.com/six-pack/
http://aceforx.com/contact-us/
http://aceforx.com/gender/

All these pages have revolution slider and i want the menu to be transpartent for these pages.

Other pages such as
product page
cart
checkout page

I want fixed solid white menu.

[Rad]

Hi Nelson,

That was discussed multiple times in the forum, you may use the search feature above and search this keyword “navbar transparent upon scroll”. There are many ways to implement depending on site’s current setup.

Thanks!

[speester]

I achieved menu transparent and change to solid white upon scroll already.

But it applies to entire website.

For pages that does not have revolution slider. Menu will look werid.

Therefore, would like to have a solution to implement menu transparent and change to solid white upon scroll

for only selected pages.

[Lely]

Hello Nelson,

Please add page class to the following custom CSS:

body .x-navbar {
   border-bottom: 0;
   box-shadow:none;
   background-color: transparent;
   position:fixed;
   width:100%;
   top:0;
  transition: 0.3s all ease-in-out;
}
body .x-navbar.x-navbar-fixed-top {
  border-bottom: 1px solid #ccc;
  background-color: #fff;
}

Like this:

body.home .x-navbar,
body.page-id-496 .x-navbar,
body.page-id-15 .x-navbar,
body.page-id-20 .x-navbar,
body.page-id-22 .x-navbar,
body.page-id-23 .x-navbar,
body.page-id-24 .x-navbar,
body.page-id-11 .x-navbar,
body.page-id-13 .x-navbar,
body.page-id-23 .x-navbar{
   border-bottom: 0;
   box-shadow:none;
   background-color: transparent;
   position:fixed;
   width:100%;
   top:0;
  transition: 0.3s all ease-in-out;
}
body.home .x-navbar.x-navbar-fixed-top,
body.page-id-496 .x-navbar.x-navbar-fixed-top,
body.page-id-15 .x-navbar.x-navbar-fixed-top,
body.page-id-20 .x-navbar.x-navbar-fixed-top,
body.page-id-22 .x-navbar.x-navbar-fixed-top,
body.page-id-23 .x-navbar.x-navbar-fixed-top,
body.page-id-24 .x-navbar.x-navbar-fixed-top,
body.page-id-11 .x-navbar.x-navbar-fixed-top,
body.page-id-13 .x-navbar.x-navbar-fixed-top,
body.page-id-23 .x-navbar.x-navbar-fixed-top {
  border-bottom: 1px solid #ccc;
  background-color: #fff;
}

Do this update also for your custom CSS for font color. Always add the body class like body.page-id-23 to limit the changes for these specific pages only.

Hope this helps.

[Author]

Posts