[SOLVED] Separator

Hi,

When using a separator in the main topmenu it loses the css that the menu normally has. So all in all a separator doesn't look too good. I noticed when looking for a answer in the forum that more templates have that problem, but also that the solution for each template is a bit different.

Could you please advice what css adjustment is needed to make a separator look the same as a normal menu item?
TIAB)

Hi,

I have the same problem. I tried some presented solutions for same problem in other templates, but didn't get any results.
Is there anyone that can help us please ?

Thanks in advance

Regards

Hello,
please change following code in file "template_css.css"

Code: Select all

div#wrapper_menu1 ul li a{
   font-size:10px;
   font-weight: bold;
   text-transform:uppercase;   
}

to this one:

Code: Select all

div#wrapper_menu1 ul li a,
div#wrapper_menu1 ul li span.separator{
   font-size:10px;
   font-weight: bold;
   text-transform:uppercase;   
}

and instead of:

Code: Select all

div#wrapper_menu1 ul li li:first-child a{
   padding-left: 12px;
}

write:

Code: Select all

div#wrapper_menu1 ul li li:first-child a,
div#wrapper_menu1 ul li li:first-child span.separator{
   padding-left: 12px;
}

and also in file "style1.css" or "style2.css" (depends on witch one you use)
change:

Code: Select all

div#wrapper_menu1 ul li a{
   color:#fff;
}

to this:

Code: Select all

div#wrapper_menu1 ul li a,
div#wrapper_menu1 ul li span.separator{
   color:#fff;
}

Hi JustynaZ

Thanks for your reply. The problem is almost solved, the font is now correct.
Unfortunately the menu is still acting strange when a separator is the choice. All the other menu items are centre aligned but when a separator is used it becomes left aligned. Also the subitem don't act normal.

You can see what I mean in my test site http://www.digimotores.com in the menu item "FAQ" and sub item "Joomla! Overview".

Thanks in advance

Kind Regards

Hello,
try adding also this:

Code: Select all

div#wrapper_menu1 ul span.separator{
padding-left: 12px;
}
div#wrapper_menu1 ul li li:first-child span.separator{
margin-left:12px!important;
}
div#wrapper_menu1 ul li li:first-child:hover span.separator{
margin-left:0!important;
padding-left:0!important;
}
div#wrapper_menu1 ul li li span.separator{
margin-left:6px;
padding-left:0;
}
div#wrapper_menu1 ul li li:hover span.separator{
padding-left:0px;
}

should work =)

Hi Again JustynaZ,

Thanks a lot for your reply with the solution .
Yes it's working now

Kind Regards and continue with this great support helping ignorant guys like me:blush:

hello !
I need your help..
I make social icon in icki sport, but I can't make separator..
I want make separator in social icon like in the world news..



how to make it in gk icki sport??
please help me..

this link to my site

thanks so much

Hi

Add this to template_css.css

Code: Select all

div#social_icons a{
border-right:3px solid #000000;
margin-right:3px;
}


teitbite wrote:

Hi

Add this to template_css.css

Code: Select all

div#social_icons a{
border-right:3px solid #000000;
margin-right:3px;
}


thank you!
I'll try it later..
thank you very much..