Light Up only part of the header??

mausz85 wrote: ↑

Wed Nov 22, 2017 1:51 pm

Any way to light up only the part showed in the picture? or change the color to make it different from the others?

sachin6609 wrote: ↑

Wed Nov 22, 2017 1:58 pm

mausz85 wrote: ↑

Wed Nov 22, 2017 1:51 pm

Any way to light up only the part showed in the picture? or change the color to make it different from the others?

Hello

Yes It is possible by some css tricks let me share the url i will Give you the css changes to do That

Thanks

Sachin

kestas wrote: ↑

Wed Nov 22, 2017 4:00 pm

Hi
There are some tutorial:
https://stackoverflow.com/questions/268 ... rrent-page
Regarding this tutorial you should edit your stylesheet.css
and catalog/view/theme/default/template/common/header.tpl (or header.twig if OpenCart is 3 version).

Good Luck

#menu .nav > li > a {
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    padding: 10px 15px 10px 15px;
    min-height: 15px;
    background-color: transparent;
}

#menu .nav > li > a.active-page {
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    padding: 10px 15px 10px 15px;
    min-height: 15px;
    background-color: #a94442;
}

background-color: #a94442;

 <li class="dropdown"><a href="<?php echo $category['href']; ?>" class="dropdown-toggle" data-toggle="dropdown"><?php echo $category['name']; ?></a>

 <li class="dropdown"><a href="<?php echo $category['href']; ?>" class="dropdown-toggle active-page" data-toggle="dropdown"><?php echo $category['name']; ?></a>

kestas wrote: ↑

Wed Nov 22, 2017 4:59 pm

ok
find your theme stylesheet.css open in some text editor like notepad or notepad++
find the code:

Code: Select all

#menu .nav > li > a {
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    padding: 10px 15px 10px 15px;
    min-height: 15px;
    background-color: transparent;
}

below add:

Code: Select all

#menu .nav > li > a.active-page {
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    padding: 10px 15px 10px 15px;
    min-height: 15px;
    background-color: #a94442;
}

where

background-color: #a94442;

is your color you can change.

next open in text editor catalog/view/theme/YOUR-THEME/template/common/header.tpl
find:

Code: Select all

 <li class="dropdown"><a href="<?php echo $category['href']; ?>" class="dropdown-toggle" data-toggle="dropdown"><?php echo $category['name']; ?></a>

change to:

Code: Select all

 <li class="dropdown"><a href="<?php echo $category['href']; ?>" class="dropdown-toggle active-page" data-toggle="dropdown"><?php echo $category['name']; ?></a>

I have not tried, but it should work...

Good Luck

kestas wrote: ↑

Wed Nov 22, 2017 5:21 pm

you did not do all
you need replace this line in your header.tpl

Code: Select all

<li class="dropdown"><a href="<?php echo $category['href']; ?>" class="dropdown-toggle" data-toggle="dropdown"><?php echo $category['name']; ?></a>

with this one:

Code: Select all

<li class="dropdown"><a href="<?php echo $category['href']; ?>" class="dropdown-toggle active-page" data-toggle="dropdown"><?php echo $category['name']; ?></a>

because I have checked in your site and did not found this class="dropdown-toggle active-page" class where is active page defined.

<?php } ?>

<script>
$(document).ready(function() {
  var url = window.location.href; 
    $("#menu a").each(function() {
         if(url == (this.href)) { 
            $(this).parents("li:last").addClass("active");
        }
    });
});
</script>

#menu .nav > li.active > a  {
	background-color: lightblue;
}

lightblue