Top menu: Changing color and position of last tab

[MeltedC]

Hello there,

 

I'm looking for a way to change the color of my last (and only the last one) tab of the top menu in my Prestashop 1.6

 

I already read this topic : http://www.prestashop.com/forums/topic/351355-solved-top-horizontal-menu-color-of-tabs/

But it actually does not work for me, and I just can't find out why.

 

Any idea how to simply modify this last tab background color ?

I also would like to place it at the right side of the menu.

 

(See in the attached file what I want to do)

Edited November 4, 2014 by MeltedC (see edit history)

[vekia]

you want to change only main item color or also of dropdown ( if there is dropdown with subcats )

[vekia]

.sf-menu li:last-child {
  float:right;

}

.sf-menu li:last-child a {
  background:red;
}

[MeltedC]

Thanks

 

Well, i added these lines to /modules/blocktopmenu/css/superfish-modified.css

 

But surprisingly, nothing is changing.

 

I'm not using cache... Wondering what can be wrong... :/

 

Here is the adress of my site :

http://guillaumedavid.com (I just disabled the maintenance mode, so you can see)

 

/Edit : I want to change only the main tab for now, but maybe I will need to change the dropdown color later !

Edited November 4, 2014 by MeltedC (see edit history)

[MeltedC]

Ok it finally worked :

I was not modifying the good file, which is precisely this one:

/themes/default-bootstrap/css/modules/blocktopmenu/css/superfish-modified.css

 

Now I need to make the main button unclickable, with a dropdown that shows CMS pages.

If you have any tips to guide me, they are welcome

 

Otherwise, I guess this topic is solved.

Thanks a lot for your help.

Edited November 4, 2014 by MeltedC (see edit history)

[vekia]

 

Now I need to make the main button unclickable, with a dropdown that shows CMS pages.

If you have any tips to guide me, they are welcome 

 

instead of cms page, to menu add cms category

then you will have dropdown with elements associated with selected cms category

[MeltedC]

Indeed it is much easier like this.

 

The dropdown is kinda ugly though.

I'm trying to make is sexy by modifying the values in FireFox Style editor. Not easy to get exactly what I need though.

 

 

- I want the dropdown to have the same background color as the other tabs.

 

- And it would be great if it dropped just under my last tab (the menu that drops is currently as large as the main menu... )

 

Here is where is am :

[MeltedC]

Well, I'm struggling to make it right...

 

I gave up the idea of placing the tab in the right side. I realised it made ugly things on smaller screens and mobiles.

 

So I just chose to change the color, and nothing else. But the problem of the dropdown remains. Any idea how to give it the usual dropdown skin ?

 

/Edit :

Here is what I've found until now :

.sf-menu li ul {
  display: none;
  left: 0;
  top: 59px;  

delete "left: 0;" so the left side of the dropdown is vertically aligned with the tab.

.sf-menu > li > ul {
  padding: 26px 30px 31px;
  width: 100%; } 

choose width value in % or px (to ajust the width of the dropdown menu; I prefer pixels, so the width does not depend on the screen size)

.sf-menu > li > ul > li {
  float: left;
  width: 20%;
  padding-right: 15px; }

- delete "float: left;" so there is 1 subcategory per line

- choose 100% width so you can write more than one word per line

Edited November 5, 2014 by MeltedC (see edit history)

[MeltedC]

This is what I have now :

As said on the pic, I still need to change the colors and to add borders between the lines.

 

I'm stuck here... 

Edited November 5, 2014 by MeltedC (see edit history)

[vekia]

any chance to see it live?

it will be much easier :-)

[MeltedC]

I disabled maintenance mode !

You can see it live now

 

http://guillaumedavid.com/en/

Edited November 6, 2014 by MeltedC (see edit history)

[MeltedC]

No idea ?

Just to make the dropdown a bit sexier !

[vekia]

website is not accessible:

[MeltedC]

Did you try to reload it ? There is no reason why it would be down...