Joomla Templates Club 406,261 posts

[mikel2004 Friend mikel2004Join date: January 2012Posts: 201Downloads:0Uploads:51 Thanks: 24 Thanked: 3 times in 1 posts]

#195951

Hi!

I wish to add Facebook icon in secnav position.

I know that I must edit /tpls/blocks/mainnav.php file. But waht can I do to add a Facebook icon?
There are a nav-facebook class?

Thanks!

[Nazario A Friend Nazario AJoin date: April 2013Posts: 1183Downloads:0Uploads:406 Thanks: 91 Thanked: 284 times in 263 posts]

#527445

@ mikel2004,

You need to follow steps mentioned in this thread. But, in the /templates/your_template_name/tpls/blocks/mainnav.php file, you edit as follows:

<!-- INFO -->
<?php if ($this->countModules('secnav-5')) : ?>
<li class="dropdown nav-facebook">
<a data-toggle="dropdown" href="/info-2" class="dropdown-toggle">
<i class="icon-facebook"></i>
</a>
<div class="nav-child dropdown-menu">
<div class="dropdown-menu-inner">
<jdoc:include type="modules" name="<?php $this->_p('secnav-5') ?>" style="T3Xhtml" />
</div>
</div>
</li>
<?php endif ?>
<!-- //INFO -->

* nav-facebook : you need to use this class suffix for which you customise css
* icon-facebook : this is icon Facebook you wish

After that, assign any module facebook to the position “secnav-5”.

Hope this helps.

[mikel2004 Friend mikel2004Join date: January 2012Posts: 201Downloads:0Uploads:51 Thanks: 24 Thanked: 3 times in 1 posts]

#527518

Great!

Right now, How can I change the colour black to the facebook icon to blue #3b5998 (more representative).

I have change the code in secnav-2 position, like this:

<!– FACEBOOK –>
<?php if($this->countModules(‘secnav-2’)): ?>
<li class=”dropdown nav-facebook”>
<a data-toggle=”dropdown” href=”https://www.facebook.com/czoom” class=” dropdown-toggle”>
<i class=”icon-facebook”></i>
</a>
</li>
<?php endif ?>
<!– //FACEBOOK –>

Thanks

[Nazario A Friend Nazario AJoin date: April 2013Posts: 1183Downloads:0Uploads:406 Thanks: 91 Thanked: 284 times in 263 posts]

#527614

@ mikel2004,

Please open the file: /templates/your_template_name/css/custom.css, then add this rule:

.navbar .secnav .nav > li > a, .secnav .nav > li > a{
background: #3B5998
}


[mikel2004 Friend mikel2004Join date: January 2012Posts: 201Downloads:0Uploads:51 Thanks: 24 Thanked: 3 times in 1 posts]

#527665

Hi Nazario

Your rule affects too the first icon in secnav-1 position with nav-user li class… So, what can I do to change the color ONLY to nav-facebook in secnav-2 position?

Thanks for your help.

<em>@Nazario A 417490 wrote:</em><blockquote>@ mikel2004,

Please open the file: /templates/your_template_name/css/custom.css, then add this rule:

.navbar .secnav .nav > li > a, .secnav .nav > li > a{
background: #3B5998
}

</blockquote>

[Nazario A Friend Nazario AJoin date: April 2013Posts: 1183Downloads:0Uploads:406 Thanks: 91 Thanked: 284 times in 263 posts]

#527774

You can use the class suffix to customise as you wish,

In this case, pls open the /templates/your_template_name/css/custom.css file, then find and replace this code:

.navbar .secnav .nav > li > a, .secnav .nav > li > a{
background: #3B5998
}

With:

.nav-facebook .dropdown-toggle {
background: #3B5998
}

Hope this helps.

1 user says Thank You to Nazario A for this useful post

1. mikel2004

[mikel2004 Friend mikel2004Join date: January 2012Posts: 201Downloads:0Uploads:51 Thanks: 24 Thanked: 3 times in 1 posts]

#527887

Grat!! Thanks!!

[Author]

Posts