I'm using this template, http://joomlatemplates.me/clean-and-simple/ for Joomla ver 3.4.5. Everything works fine except the text separator menu item. As shown on the picture below, I used About Us Single Article menu item, while Products menu I used Text Separator menu item. I played around with the css but it doesn't work. Any suggestion??

enter image description here

Below is the some part of the css code for the menu:

 /* Navigation */
 #navbar-wrap { padding: 0px; margin:0 0 10px 0;  border-top: 1px solid #dedede; border-bottom: 1px solid #dedede; }
 #navbar { position: relative; height: 55px;}
 #navbar.row { margin-bottom: 0 }
 #navigation { padding:0 10px;}
 #navigation .menu { margin: 0; padding: 0; list-style: none; }
 #navigation .menu .icon-angle-right { position: absolute; right: 10px; top:50%; margin-top: -6px; color: #aaa; font-size: 12px; }
 #navigation .menu > li { display: block; float: left; }
 #navigation .menu > li ul {}
 #navigation .menu ul { position: absolute; left: 0; top: 100%; margin: 10px 0 0 0; /*IE6 only*/ _margin: 0; nowhitespace: afterproperty; opacity: 0; transition: all .2s ease-in-out; visibility: hidden; z-index: 99; }
 #navigation .menu ul ul { left: 100%; top: 0; }
 #navigation .menu ul ul li { width: 100% }
 #navigation .menu li { position: relative; list-style: none; }
 #navigation .menu li:hover > ul { margin: 0; opacity: 1; visibility: visible; }
 #navigation .menu a { display: block; position: relative; }
 /* current item */
 #navigation .menu > li > a:hover, #navigation .menu > li.sfHover > a, #navigation .menu > .active > a, #navigation .active > a:hover, #navigation .active > a:hover { color: #E95846;}
 #navigation .menu > .active > a, #navigation li.active > a { font-weight: bold; color: #E95846  }
 #navigation .menu > li { margin-right: 20px; padding:0 10px; }
 #navigation .menu a { height: 55px; color: #606060; font-weight: 400; text-align: left; text-decoration: none; cursor: pointer; line-height: 55px; font-size:16px; }
 /*drop-down styles*/
 #navigation .menu ul { border-top: none; background: #fff; border: 1px solid #ddd; min-width:200px;}
 #navigation .menu li:hover ul { margin-top: 0; }
 #navigation .menu ul ul.sub-menu { margin-top: -1px; margin-left: 1px; }
 #navigation .menu ul li { border-bottom: 1px solid #ddd }
 #navigation .menu ul li:first-child { }
 #navigation .menu ul li:last-child { border: 0 }
 #navigation .menu ul li > a:hover { color: #E95846 }
 #navigation .menu ul a { display: block; height: auto; margin: 0px; padding: 12px 15px; text-transform: none; border: 0px; line-height: 1.7em; }
 #navigation .selector { display: none }
 #navigation ul.sub-menu .icon-angle-down:before {content:"\f105"!important;}
 #navigation ul.sub-menu a { font-size:12px;}
 #navigation i { text-align:right}
 #menu-icon {display: none;}
 #slide-wrap a:hover{ color:#fff}

I tried to hard code to fix it with this code

 .separator {

It works fine but it wont have the arrow menu like the one About Us has and the submenu box will not be aligned the same as About Us submenu box...

  • 1
    Try using display: block; instead of display: inline-block;. If not, could you please provide a link to your site so we can inspect the code as the demo site doesn't provide a separator menu item – Lodder Oct 29 '15 at 11:49
  • I used hack way of solving it. I used extrenal URL instead and put http:# for URL field, although the user able to click, it doesnt go anywhere. But the arrow menu won't show. I guess it works only for single article menu item. Here is the page, ryts-instruments.co.th – Annie Oct 30 '15 at 1:58
  • The down chevron indicates the menu item has children. Not sure if this will work on an external url or not. Should do but is highly template dependent. – BodgeIT Nov 22 '16 at 18:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.