Joomla Templates Club 406,261 posts

[cappu Friend cappuJoin date: March 2013Posts: 10Downloads:0Uploads:2]

#186385

Hello,

in our use of the awesome Argo theme we needed to change the color of the main navigation, too. Obviously this is not intended.
Anyways, it would be rather simple to make this very easy by adding some respective variables to the variables.less and use them in the navigation.less and navigtaion-repsonsive.less. Especially in the latter less-file there is #000 and @black hard coded, which makes it almost impossible to recolor the mobile dropdown.

To make it somehow work in our argo adaption http://www.polymorphart.net/ we added the following code to the template.less:


@media (max-width: @navbarCollapseWidth) {

.t3-megamenu li.dropdown .dropdown, .t3-megamenu li.dropdown .mega-inner{
background: @Black;
}
}

#t3-mainnav {
background:url("../polymorphart/images/background.png") no-repeat 0px center #c62d58
}

It would be cool, if it would be possible to change colors of backgrounds/fonts/border of the dropdown in the mobile main navigation, too. – Would this be possible?

Thanks for any feedback and keep going with the excellent T3v3 framework.

Kind regards,

Bernhard

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

#488602

If I’m understanding your question correctly, you want to be able to change the background color of the mega-menu dropdowns?

If so, look to file —> /t3-assets/dev/polymorphart/templates.ja_argo.less.navigation-core.less.css

at line 51:

.dropdown-menu {
background-clip: padding-box;
background-color: #FFFFFF
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 0 0 0 0;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
display: none;
float: left;
left: 0;
list-style: none outside none;
margin: 0;
min-width: 160px;
padding: 0;
position: absolute;
top: 100%;
z-index: 1000;
}

Modify the background-color property to whatever color you like.

Mind you, you may also need to play around with the menu item text color as well – depending on the background color you choose.

Hope That Helps

🙂

[cappu Friend cappuJoin date: March 2013Posts: 10Downloads:0Uploads:2]

#488615

Hi Tom,

thanks for your response.

I tried your solution. I do get black dropdowns in the main navigation – and mobile looks like this screenshot.

Is there a way to change jsut the color of mobile dropdown – it shouldn’t be black – if possible.

Thanks for any hint,

Bernhard

---

Attachments:

1. 

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

#488617

Try file path –> /t3-assets/dev/polymorphart/templates.ja_argo.less.megamenu.less.css

at line 196:

.t3-megamenu .mega-nav > li a, .t3-megamenu .dropdown-menu .mega-nav > li a {
padding: 12.5px 0;
}

add your background-color property and check the results

[cappu Friend cappuJoin date: March 2013Posts: 10Downloads:0Uploads:2]

#488624

Cool, it’s getting closer:

Thanks so far….

---

Attachments:

1. 

[Author]

Posts