Nav Bar Background Problem

[mehrabhosain]

I used like this code - https://theme.co/apex/forum/t/transparent-nav-bar-above-slider/15733

Home page is okey, but now happening on Other pages. Dont showing nav bar first time, and logo problem. Please help someone

[lely]

Hello There,

It is showing, it 's white thus blend with other content. See this: https://screencast-o-matic.com/watch/cbX01K2ta4
From the code, look for this at the start of the JS code:
$(' .x-navbar-fixed-top').css("background-color", "transparent");
Add this line after that line:
$('body:not(.home) .x-navbar').css("background-color", "red");
Like this:

 $(' .x-navbar-fixed-top').css("background-color", "transparent");
 $('body:not(.home) .x-navbar').css("background-color", "red");

That line adds default background color on any pages except home on page load. Change red accordingly.

Then look for this line too:
$(' .x-navbar-fixed-top').css("background-color", "transparent").css("transition","0.3s ease-in-out ");
Add this after that line:
$('body:not(.home) .x-navbar.x-navbar-fixed-top').css("background-color", "red");
Like this:

$(' .x-navbar-fixed-top').css("background-color", "transparent").css("transition","0.3s ease-in-out ");
$('body:not(.home) .x-navbar.x-navbar-fixed-top').css("background-color", "red");

That line should reset background color of other pages when you go back up after scroll. Change red also.

Further customization from would be getting into custom development thus outside the scope of our support. Thank you for understanding.

[mehrabhosain]

OMG, You are really Great, All done okey, Thanks for made video. Its really amazing support.
Everything is doing great . But need a need support about mobile view. sorry for disturbing you

1. all page color is okey, but was problem in homepage, its hiding my logo.
   I have added @media (max-width: 680px) { .home .x-navbar { background-color: rgb(80, 168, 245); } } for mobile header, It was only white .so now first time loading my expected color nav menu
   but problem, is when I do scroll, and again come on menu, its showing white. nav bar.

2. I cant click on mobile nav menu button , first time its can work second its dont working

3. Background rgb(80, 168, 245); its okey for nav menu, but I’d like to , submenu background will white and text will be block

4. I would like to my logo showing on nav bar middle for all small devices

[lely]

Hi There,

Unfortunately, this is getting to customization.
1.) Update to this:

@media (max-width: 680px) {
.home .x-navbar {
background-color: rgb(80, 168, 245) !important; /* important means it will override CSS added via JS*/
}
}

2.) It is because of this error:

bootstrap.min.js:6 Uncaught Error: Collapse is transitioning
    at l.show (bootstrap.min.js:6)
    at l.toggle (bootstrap.min.js:6)
    at HTMLDivElement.<anonymous> (cs-body.js?ver=2.1.7:2)
    at Function.each (jquery.js?ver=1.12.4:2)
    at a.fn.init.each (jquery.js?ver=1.12.4:2)
    at a.fn.init.e [as collapse] (cs-body.js?ver=2.1.7:2)
    at HTMLAnchorElement.<anonymous> (cs-body.js?ver=2.1.7:2)
    at HTMLDocument.dispatch (jquery.js?ver=1.12.4:3)
    at HTMLDocument.r.handle (jquery.js?ver=1.12.4:3)
l.show @ bootstrap.min.js:6
l.toggle @ bootstrap.min.js:6
(anonymous) @ cs-body.js?ver=2.1.7:2
each @ jquery.js?ver=1.12.4:2
each @ jquery.js?ver=1.12.4:2
e @ cs-body.js?ver=2.1.7:2
(anonymous) @ cs-body.js?ver=2.1.7:2
dispatch @ jquery.js?ver=1.12.4:3
r.handle @ jquery.js?ver=1.12.4:3

The code has conflict with bootstrap JS files that comes from a plugin. I am not sure what plugin is it but the folder name is sagenda

3.)

@media (max-width: 979px){
.x-nav-wrap.mobile.collapse {
    background: white;
}
}

As stated, we tried to go and beyond in helping the looks you want, unfortunately, the entire process of the customization is not covered by the support. I do recommend to consult a web developer if you are note familiar editing JS and CSS. Thank you for understanding.

[mehrabhosain]

Dear Lely, Yes I have understood. I have removed saganda plugin. All are Okey now.
plz never mind , my need a simple help plz.

when I do scroll of homepage(mobile), and again come on menu, its showing white. navbar, for that ,logo not showing. , I would like to use rgb(80, 168, 245); this color plz

[mehrabhosain]

Thnanks it has been solved

@media (max-width: 680px) {
.x-navbar-inner {
background-color: rgb(80, 168, 245);
}
}

[Joao]

Thanks for letting us know!