Docs

[Andcom]

Can someone help me (again) please, thanks. I am trying to get my nav menu sitting higher, overlapping the x.topbar as such.

1) I have done this with margin-top: -px – is there a better way with position / top / bottom (etc) and z-index? but this gives me 2 problems below:

2) When scrolling down, the nav menu is now not static and is now disappearing above the screen, how do i remove the – margin above on scroll down?

3) On i.e & firefox, the margin – seems to not be working? As the Nav bar is now under the topbar and the white nav text doesn’t show! It seems to be working on opera and chrome correctly.

http://anwweb.com/new

TIA

[Andcom]

I got #2 working using .x-navbar:not(.x-navbar-fixed-top) { }, still need advice on the others, also I have a new problem, I added the code from:

https://community.theme.co/forums/topic/change-navbar-font-color-on-scroll/

To make the navbar change color on scroll, whcih give me problem:

4) is there a way to remove / return it to go back to original at the top menu, as you can now see the new backgorund color is appearing over the topbar (which would be ok it it was 100% width, but it’s not as per attached.

Thanks

[Rupok]

Hi there,

Thanks for writing in! I am bit confused about the issue. Kindly add a screenshot of your problem and a mockup of what you are trying to achieve.

Cheers!

[Andcom]

Hi,

As requested, please see screen shot with said problems:

What I have done:

.logosm {margin-top: -23px}
.x-navbar {margin-top: 0px!important;border-top: 0!important;z-index:99999;}
.x-navbar:not(.x-navbar-fixed-top) {margin-top: -70px!important; border-top: 0!important; z-index:99999; }
@media (min-width:1px) and (max-width:900px) {.x-topbar {display:none!important;}}
@media (min-width:1px) and (max-width:900px) {.x-navbar {margin-top: 0px!important;border-top: 0!important;}}

and I have used the following post:

https://community.theme.co/forums/topic/change-navbar-font-color-on-scroll/

to add java to add background color when scrolling down with fixed:

.x-navbar-scrolled .desktop .x-nav {margin: 0 auto!important; background-color:rgba(0, 0, 0, 0.5)!important;width: 100%;}
.x-navbar .desktop .x-nav.alt-color > li > a > span:hover, .x-navbar .desktop .x-nav > li > a > span:hover { color: #d9d9d9;}

Which has given the following questions / problems:

What I need to know / fixed:

1) I have done moving the nav bar over with margin-top: -px, is there a better way with position / top / bottom (etc) and z-index? as…..

1a) In i.e & firefox, the negative margin doesn’t seem to work.

2) Is there a way to make the mobile menu fixed also?

3) In Mobile, No Nav menu appears until I scroll down 🙁

4) When scrolling down the background added now appears over the topbar, how can i make it revert to transparent again, so there’s no box darker box over everything.

5) When I scroll down the the nav menu items, loose their margin (to center) and move back to the left.

Thanks

[Christopher]

Hi there,

Please remove following code :

.logosm {margin-top: -23px}
.x-navbar {margin-top: 0px!important;border-top: 0!important;z-index:99999;}
.x-navbar:not(.x-navbar-fixed-top) {margin-top: -70px!important; border-top: 0!important; z-index:99999; }

Add this :

@media (min-width: 979px){
.x-navbar.color {
    background-color: #5E5E5E !important;
}
}
@media (max-width: 979px){
.x-navbar-fixed-top, .x-navbar-fixed-left, .x-navbar-fixed-right {
    position: fixed;
}
}

Add this code under Customize -> Custom JS :

jQuery(document).ready(function($){
			$('.x-navbar-fixed-top').addClass("transparent-navbar");
	$(window).scroll(function(){
		if ($(this).scrollTop() > 50) {
			$('.x-navbar-fixed-top').removeClass("transparent-navbar").addClass("color");
		} else {
			$('.x-navbar-fixed-top').removeClass("color").addClass("transparent-navbar");
		}
	});
});

Add language switcher inside <p class="p-info"></p> tags.

Hope it helps.

[Author]

Posts