Docs

[Eyoael]

Hi, i’m using the following css and js for my website;

css
.x-navbar {
border: none;
box-shadow: none; background-color: transparent;
}
.x-navbar .desktop .x-nav > li > a,
.x-navbar .desktop .x-nav > li > a:hover,
.x-navbar .desktop .x-nav > .x-active > a,
.x-navbar .desktop .x-nav > .current-menu-item > a {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
color: white;
}
.x-navbar-scrolled .desktop .x-nav > li > a > span {
color: #272727;
}

.x-navbar-scrolled .desktop .x-nav > li > a > span:hover {
color: red;
}
.x-navbar-fixed-top-active .x-navbar-wrap {
margin-bottom: 0;
}
@media (min-width: 980px) {
.x-slider-container.below {
margin-top: -75px;
}
}

.x-brand.text.black-text {
color: #070600 !important;
}

js
jQuery(document).ready(function($){
$(‘.about us .x-navbar-fixed-top’).css(“background-color”, “transparent”);
$(window).scroll(function(){
if ($(this).scrollTop() > 400) {
$(‘.about us .x-navbar-fixed-top’).css(“background-color”, “rgba(255,255,255,0.99)”).css(“transition”,”0.3s ease-in-out “);
} else if ($(this).scrollTop() > 300) {
$(‘.about us .x-navbar-fixed-top’).css(“background-color”, “rgba(255,255,255,0.75)”).css(“transition”,”0.3s ease-in-out “);
} else if ($(this).scrollTop() > 200) {
$(‘.about us .x-navbar-fixed-top’).css(“background-color”, “rgba(255,255,255,0.5)”).css(“transition”,”0.3s ease-in-out “);
} else if ($(this).scrollTop() > 100) {
$(‘.about us .x-navbar-fixed-top’).css(“background-color”, “rgba(255,255,255,0.35)”).css(“transition”,”0.3s ease-in-out “);
} else {
$(‘.about us .x-navbar-fixed-top’).css(“background-color”, “transparent”).css(“transition”,”0.3s ease-in-out “);
}
if ($(this).scrollTop() > 100) {
$(‘.about us .x-navbar-fixed-top’).addClass(‘x-navbar-scrolled’);
} else {
$(‘.about us .x-navbar-fixed-top’).removeClass(‘x-navbar-scrolled’);
}

if ($(this).scrollTop() > 100) {
$(‘.x-brand.text’).addClass(‘black-text’);
} else {
$(‘.x-brand.text’).removeClass(‘black-text’);
}

});
});

What i want help with is making these to codes effect all my pages not only on my home page and further i would like this not to effect the mobile version of the site; can you please help?

Best regards Eyoael

[Rupok]

Hi Eyoael,

Thanks for writing in! Where you have added those codes? You can add them under Custom > CSS and Custom > JavaScript in the Customizer so that it apply globally. And it’s hard to write JS for mobile only but you can add your CSS within media query to make them work within desktop only. Like this :

@media only screen and (min-width: 980px) {

// write your desktop CSS here

}

Cheers!

[Eyoael]

Hi, the thing is i have placed the css and js in customizer so that it applies globally but for some reason it doesn’t apply to alla my pages.

[Nabeel A]

Hi again,

In this case please 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!

[Eyoael]

This reply has been marked as private.

[Joao]

Hi There,

Please remove all .home from your Appereance > customizer > Custom > Javascript code

Hope that helps

Joao

[Eyoael]

Hi,

Thanks that did it :). Knew it was something simple :).

[Joao]

You are welcome 🙂

[Eyoael]

Hi guys,

I have to reopen this question because the navbar is not looking good at all on mobile devices. The problem is that the scroll effect that i’m using on desktop view is applied on mobile devices despite me using the following media queryto not make this happen:

@media only screen and (min-width: 980px) {
.x-navbar-fixed-top, .x-navbar-fixed-left, .x-navbar-fixed-right {
position: fixed !important;
}

What i want is for the navbar scroll effect to only be functional on desktops and laptops and i want the navbar on mobile devices to be the standard navbar without any scrolling effects applied, can you guys please help me with this??

For the complete css and js i’m using look previous treads in this post.

Thanks Eyoael

[Rupok]

Hi Eyoael,

The menu is not fixed on mobile and I don’t see the code is applying for mobile as well.

Thanks!

[Eyoael]

Hi,

How can i solve the problem so and just have a normal menu on the mobile site without the scrolling effect??

Thanks

[Christopher]

Hi there,

Please add this code :

@media (max-width:979px){
.x-navbar.x-navbar-fixed-top {
    background-color: transparent !important;
}
}

Hope it helps.

[Eyoael]

Hi,

thanks but it’s not looking the way i wanted it to be. First i don’t want the navbar to be fixed at top i want it to scroll with the content. For more clarity on what i want And as stated in previous post i don’t want the scroll effect to be present on mobile view. Please i need this fixed, this is the most important fixes i have to make before my site goes live.

Thanks

[Paul R]

Hi,

You can add this under Custom > Edit Global CSS in the Customizer.

@media (max-width: 979px) {
body .x-navbar {
    background-color: #303030 !important;
}
.x-navbar .x-nav-wrap.mobile .x-nav > li > a:hover {
    background-color:#222 !important;
}
}

Hope that helps.

[Eyoael]

Hi paul,

Great! i’m almost there. Can you make it so that the bar is not fixed on the top of the page??

Thanks

[Author]

Posts