Joomla Templates Club 406,261 posts

[paison Friend paisonJoin date: October 2013Posts: 10Downloads:70Uploads:1 Thanks: 3 Thanked: 2 times in 1 posts]

#191757

I currently have a menu item that drops down from the icon-search position that looks LIKE THIS HERE

I need it to drop down like the demo in the languageswitchoverload position, the multiple language component dropdown as seen HERE in the demo:

I need direct help or specific instructions to achieve that dropdown styling…Thank you in advance.

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#510416

Are you wanting a darker text for the menu items?

Can you be a bit more specific with the kind of modified styling you’re looking for?

[paison Friend paisonJoin date: October 2013Posts: 10Downloads:70Uploads:1 Thanks: 3 Thanked: 2 times in 1 posts]

#510428

Tom, thanks for the reply. I apologize for my lack of detail. I have 27 menu items, so, to your question, yes, making the font color darker would be great—I need help making the menu dropdown exactly like the demo in every way minus the country flags. So, 3 columns of menu items (9 a column). Same Font size/color/spacing….the styling….the organized structure of the dropdown columns, in the demo, is what I need. Thanks for your time and patience, it means a lot.

[Wall Crasher Developer Wall CrasherJoin date: December 2011Posts: 1113Downloads:0Uploads:15 Thanks: 66 Thanked: 361 times in 300 posts]

#510479

Hi

I have modified on your site a bit.

1. I have added the less block code below in templatesja_magzlessstyle.less

.threecol-dropdown {
.dropdown-menu {
margin-top: 1px;
min-width: 400px !important;
padding: 15px !important;
line-height: 0;
.box-shadow(0 5px 5px rgba(0, 0, 0, 0.2));
border: solid 1px @T3borderColor;
border-top: none;
}

ul.nav li {
display: block;
float: left;
margin: 0;
padding: 0;
width: 33.3%;

&.active a {
background: @grayLighter;
border-color: @T3borderColor;
color: @linkColorHover;
font-weight: bold;
}

a {
border: 1px solid #fff
display: block;
font-size: @T3smallFontSize;
line-height: 1;
margin: 0;
padding: 7px 10px !important;
text-align: left;
overflow: hidden;
text-transform: none;
font-weight: normal;

&:hover, &:focus, &:active {
background: @grayLighter;
border-color: @T3borderColor;
}

img {
float: left;
margin: 0 5px 0 0;
padding: 0;
vertical-align: middle;
}
}
}
}

2. Change class in
templatesja_magztplsblocksheader.php
From

<li class="dropdown nav-search">
to

<li class="dropdown threecol-dropdown">

You can change the style in above css to fit your need.

Regards

1 user says Thank You to Wall Crasher for this useful post

1. paison

[paison Friend paisonJoin date: October 2013Posts: 10Downloads:70Uploads:1 Thanks: 3 Thanked: 2 times in 1 posts]

#510571

Wallcrasher, thanks so much for the time and the awesome help. It was exactly what I needed, and with the above coding, this is solved. Really appreciate it.

[Author]

Posts