Joomla Templates Club 406,261 posts

[synapsis Friend synapsisJoin date: April 2007Posts: 234Downloads:18Uploads:28 Thanks: 58 Thanked: 19 times in 1 posts]

#194834

I’m trying to set up my megamenu, so that first level items with sub-menus ONLY trigger their drop-down when clicked or moused-over. The drop-down on mouse-over works fine, but when they’re clicked (or tapped on a touchscreen), they often open the Category/Blog layouts that is assigned to them — which I do not want. I only assigned them to be category/blog, because the menu style is what I want.

I am hoping that if I make them Text Separators, and style them right, they will look the same, but I’m hitting a snag.

Here are some images to display what I’m wanting to do, so there’s no confusion:

And here’s the CSS I’ve applied to my template via the custom.css file:


.ja-mainnav .navbar .nav > li > a ,.ja-mainnav .navbar .nav > li > span.separator{
border-right: none !important;
font-size: 16px;
font-family: 'novecento_wide_lightbold', sans-serif;
text-shadow: none;
text-transform: uppercase;
outline: none;
padding: 16px 15px 0px 15px;
cursor: pointer;
background-color: none !important;
}

.ja-mainnav .navbar .nav > li > span.separator {
border-right: none !important;
font-family: 'novecento_wide_lightbold', sans-serif;
font-size: 16px;
padding: 16px 15px 0px 15px;
text-shadow: none;
text-transform: uppercase;
cursor: pointer;
background-color: none !important;
color: #666666
}


You can see that I’ve gotten pretty close to getting the Text Separators to look right… but they aren’t aligning with the other menu items the way they should. The font and colors are right, but I also cannot get the little triangle icon (caret) to show up next to the drop-downs, and I’d like it to.

Finally, there’s one small change I’d like to make inside the Artist drop-down, and that’s the CSS of the column headers (A-F, etc). You can see what I’m referring to here:

I am happy with the styling, but I want to remove the links from them, so they are JUST column labels.

I’ve had a lot of great help from several people with this project, namely @leo Burnetts, @saguaros, and @ninja Lead. All three of you ROCK, and if I could buy you a drink, I gladly would. Thanks again. Perhaps one of you can help me with this last hurdle…

PS — I would have left the Development Mode and Optimize CSS triggers in the optimal positions for you to provide support, but I discovered that doing so causes Mitius to have some very unpleasant reactions to Internet Explorer… so I had to change them, as this is a live site.

IF you need to change them back in order to solve my megamenu issues, please try to do so while it’s night time in the USA, and traffic is at a minimum. Thanks for understanding, and thanks again for all of your keen help with these template customizations.

---

Attachments:

1. 
2. 
3. 

[swissa Friend swissaJoin date: November 2011Posts: 1955Downloads:7Uploads:277 Thanks: 175 Thanked: 717 times in 572 posts]

#522864

<em>@synapsis 411513 wrote:</em><blockquote>PS — I would have left the Development Mode and Optimize CSS triggers in the optimal positions for you to provide support, but I discovered that doing so causes Mitius to have some very unpleasant reactions to Internet Explorer… so I had to change them, as this is a live site.

IF you need to change them back in order to solve my megamenu issues, please try to do so while it’s night time in the USA, and traffic is at a minimum. Thanks for understanding.</blockquote>

Hi synapsis

Sorry to jump in here and I’ll leave the CSS work down to the guys who are already helping you. I just wanted to proffer some advice about using a development site. If you have a dev site, you don’t have to worry about time zone, having css not optimised, site breakages etc. You can make a copy of your current site using akeeba (as long as you use a new dev database not the production one) and then have a ‘safe’ place to test out all the work you are doing. When completed and tested you can transfer it back to the production site. I recommend separating them for your sanity and blood pressure! 😀

Good luck with the changes

swissa

[synapsis Friend synapsisJoin date: April 2007Posts: 234Downloads:18Uploads:28 Thanks: 58 Thanked: 19 times in 1 posts]

#522869

Thanks for the suggestion, @swissa. That’s absolutely what I’d normally do, and would recommend to anyone else as well.

Unfortunately, this sudden move of the dev site to the public site was forced. This latest version of the site is replacing a much older Joomla 1.5 version, which my ISP has deemed unworthy of living on their servers any longer. So my choices were to move the dev site a little ahead of schedule, with a few tiny cosmetic issues, or have the site go offline entirely. Obviously, I chose the first option. 🙂

But I thank you again for your suggestion.

1 user says Thank You to synapsis for this useful post

1. swissa

[arthurjohnston Friend arthurjohnstonJoin date: November 2010Posts: 170Downloads:152Uploads:16 Thanks: 58 Thanked: 27 times in 2 posts]

#539602

@synapsis

Did you resolve this issue. I currently have the same problem with the Text separators.

Thank you in advance,

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#539984

@synapsis and @arthurjohnston: Regarding the problem with Text Separator menu, when you set Text Separator then menu link is rendered to <span> element (not <a>).

So you should add new rule into templates/ja_mitius/css/custom.css file:


.ja-mainnav .navbar .nav > li > span {
border-top: 0;
border-right: solid 1px #e5e5e5 ;
font-size: 14px;
font-family: 'novecento_wide_lightbold',sans-serif;
text-shadow: none;
text-transform: uppercase;
outline: none;
padding: 15px 20px;
display: block;
}


@synapsis: You change color and link in submenu this way:

+ Submenu select Menu Item Type: External URL, Link: #

+ Open the custom.css file and change background and color as follows:


.t3-megamenu .mega-nav .mega-group a.mega-group-title:hover, .t3-megamenu .mega-nav .mega-group > .mega-group-title:hover, .t3-megamenu .dropdown-menu .mega-nav .mega-group > .mega-group-title:hover, .t3-megamenu .dropdown-menu .active .mega-nav .mega-group > .mega-group-title:hover {
background: #333 ;
color: #fff
}


Let me know if it helps.

1 user says Thank You to Ninja Lead for this useful post

1. arthurjohnston

[arthurjohnston Friend arthurjohnstonJoin date: November 2010Posts: 170Downloads:152Uploads:16 Thanks: 58 Thanked: 27 times in 2 posts]

#540236

@ninja Lead

Perfect!! Thank you!

[Author]

Posts