blocktopmenu different colors

[dmf]

Hi everyone!

 

I need help.

How can I change the color of only one tab in the blocktopmenu?

I understand how to do it for the whole tabs in superfish-modified.css

#menu-trigger .menu-icon{background:url(../../../../img/main_sprite.png) no-repeat left -749px;width:26px; height:26px; display:block; position:absolute; top:16px; right:16px;}

But I don't know how to do it only for one tab.

Maybe I need to make a condition for id of the category tab and create the different class in css for it, but I' don't have the necessary knowledge for it.

 

Thanks! 

[NemoPS]

Try with the nth-child css rule

 

like #menu-trigger div:nth-child(3) {..ruleset..}

[dmf]

Try with the nth-child css rule

 

like #menu-trigger div:nth-child(3) {..ruleset..}

Hello Nemo, thanks for your reply!

I did it, but it's only working when I'm using nth-child(1) and it's applying for the whole menu.

I've tried several ways:

#menu-custom a:nth-of-type(3) { color: red; }

#menu-custom a:nth-child(3) { color: red; }

But none of them is working.

The link for my site is:

http://vannalux.kz

Can you please explain me what I'm doing wrong?

[NemoPS]

#menu-custom li:nth-child(0)

 

THis will grab the first top level element, you can proceed from there:)

 

You must target li elements as anchors are always only-children or them

[dmf]

Unfortunately, I'm still can't do it.

I've tried 

#menu-custom li:nth-child(0){color: #ae3637;}

 

But the only thing that is working is

#menu-custom a:nth-child(1){color: #ae3637;} or

#menu-custom li a:nth-child(1){color: #ae3637;}

So it is working when the child is = 1, but in that case whole menu is changing color:

http://clip2net.com/s/395a7Dl

When I change the child to the other nubmer, nothing happens ((((

What else can I do?

Thanks!

[rytiz2873]

you need to do it for static tab? it will be not changing?

[dmf]

Yes, it will be always with one color

[rytiz2873]

you can try to do this with javascript

[rytiz2873]

$("#menu-custom > li:nth-child(3) > a:nth-child(1)").css("color", "red");

 

something like this, i don't know if this works... but at least you can try to add this in superfish-modified.js at the and after "jQuery('ul.sf-menu').superfish()".

Edited December 19, 2014 by rytiz2873 (see edit history)

[rytiz2873]

or type to your browser url when you are on your page to see results: javascript:$("#menu-custom > li:nth-child(3) > a:nth-child(1)").css("color", "red");

[dmf]

$("#menu-custom > li:nth-child(3) > a:nth-child(1)").css("color", "red");

 

something like this, i don't know if this works... but at least you can try to add this in superfish-modified.js at the and after "jQuery('ul.sf-menu').superfish()".

I've tried this, but nothing changed, here is my js:

$(function() {
		var container_width = $('body').find('.container').width();
		if (container_width < 1170){

	
		/* Mobile */
		$("#menu-custom > li:nth-child(3) > a:nth-child(1)").css("color", "red");
		$('#menu-wrap').addClass('mobile').find('#menu-trigger').show();		
		
		$('.mobile #menu-trigger').on('click touchstart',
			function() {
			var catUl = $(this).next('ul#menu-custom');
			var anotherFirst = $('.header-button').find('ul');
			var anotherSecond = $('#header').find('#cart_block');
			if (anotherFirst.is(':visible')) {
				anotherFirst.slideUp(),
				$('.header-button').find('.arrow_header_top').removeClass('mobile-open')
			}
			if (anotherSecond.is(':visible')) {
				anotherSecond.slideUp();
				$('#header_user').removeClass('close-cart')
			}
			if(catUl.is(':hidden')) {
				catUl.slideDown(),
				$(this).addClass('menu-custom-icon')	
			}
			else {
				catUl.slideUp(),
				$(this).removeClass('menu-custom-icon');
			}
			return false
		}
		)
		$('#menu-wrap.mobile #menu-custom').on('click touchstart', function(e){
			e.stopPropagation();
		});
		
		$ ('.main-mobile-menu ul ul').addClass('menu-mobile-2'); 
		$ ('#menu-custom ul ').addClass('menu-mobile-2'); 
		$('#menu-custom  li').has('.menu-mobile-2').prepend('<span class="open-mobile-2"></span>');
		$("#menu-custom   .open-mobile-2").toggle(
			function() {
				$(this).next().next('.menu-mobile-2').slideToggle("slow"),{
					duration: 'slow',
					easing: 'linear'
				};
				$(this).addClass('mobile-close-2');
			},
			function() {
				$(this).next().next('.menu-mobile-2').slideToggle("slow"),{
					duration: 'slow',
					easing: 'linear'
				};
				$(this).removeClass('mobile-close-2');
			})
		$(document).on('click  touchstart', function(){
			$('.mobile #menu-trigger').removeClass('menu-custom-icon').next('ul#menu-custom').slideUp();	
		})
			}
		if (container_width > 1170){
			$('#menu-wrap').removeClass('mobile'),
			$("#menu-custom > li:nth-child(3) > a:nth-child(1)").css("color", "red");
			$('#menu-wrap').find('#menu-trigger').hide();			
		}
		
}); 


 

[rytiz2873]

hmm... this is superfish-modified.js file? 

[dmf]

yes, this file is from /themes/mytheme/js/modules ....

Or I should use js from /modules ?

Also whrn I try to use inspect code in chrome and when I making style of element it is working right

http://clip2net.com/s/395xyj3

Are there any way to do it in css?

[dmf]

I also tried to add to js in modules, still nothing (((

[rytiz2873]

you can try css: #menu-custom > li:nth-child(3) > a:nth-child(1){color: red;}

Edited December 19, 2014 by rytiz2873 (see edit history)

[dmf]

Yessssss!!!!

Thank you, it's worked!

I really appreciate it!

http://clip2net.com/s/395zIzT

[rytiz2873]

Good