[SOLVED] Problem with horizontal menu | top menu

[rasengan]

Hello everybody,

I've installed jbreux-jbx_menu module in theme UHUPAGE Free Template PS113 but the position is not correct. It seems to be a problem in the divs but I'm not be able to solve it ( I've checked the menu.tpl in the module jbreux because I think the solution is there but I don't know what should I do ).

 

I'm attaching the screenshoot in order to explain better the issue and also put the link with the environment in which I'm doing the test.

 

http://laboratorio.w...om/laboratorio/

 

I'll appreciate a lot any help with this subject. ( I can send you the user and password of the lab if you need it).

 

Thank you so much.

 

Gonzalo.

Edited August 10, 2012 by rasengan (see edit history)

[rasengan]

Hello everybody,

I could fix the position doing some changes in this file jbx ..\modules\jbx_menu\cache\menu.css setting this values:

 

.sf-contener, .sf-menu {

align:left

margin: auto;

top: 110px;

width:400px;

position:fixed;

margin-top: 20px;

}

 

The point is that now, the menu is moved when move to mouse the bottom due to "position:fixed;" but the other option positions don't work as we need.

 

You can see it here: http://laboratorio.webuda.com/lab

 

Please, can anybody give me a hand? Just I need to know how to set the current position of this menu.

 

 

PS: I tested with the other option positios and didn't work: absolute,relative,inherit.

 

Thank you guys.

Regards,

Gonzalo.

Edited June 12, 2012 by rasengan (see edit history)

[SuperCharlie]

I am looking for a menu like this.. and I can probably fix what is wrong here. Where did you get the module from? Is it a paid or free module?

 

Also.. Im not clear on the exact problem... please explain a little more what is wrong with the last version you listed.

[rasengan]

Hi SuperCharlie and everybody,

 

this is the link in which you can get the module. It is free and allows to configure CMS pages in it as well.

 

http://www.mediafire...2kybrf2j5j7blm4

 

The name of the menu is Menú v2.8.5 por Julien Breux, it is the last version for prestashop 1.4.x ( my version is 1.4.7)

 

I was be able to solve it but not all. I did some changes in a css page of the module. ../module/jbx_menu/cache/menu.css

 

.sf-contener, .sf-menu {width:920px;

position:absolute; /*I added this firts line */

top:70px;} /*I added this second line */

 

Now the menu options are OK but I needed to delete the background image for the module in another css page because Im not be able to set the background image correctly. This is the other file ..\modules\jbx_menu_\css\superfish-modified.css

 

/*** ESSENTIAL STYLES ***/

.sf-contener {

-webkit-border-radius: 7px;

-moz-border-radius: 7px;

border-radius: 7px;

clear: both;

margin: 10px 0;

height: 30px;

line-height: 30px;

padding-left: 7px;

top: 140px;

background: transparent url(../gfx/menu/menu.gif) repeat-x left center; ( I needed to delete this line )

}

 

 

If any of you know how to solve last point about the background image I will apreciate a lot. Im attaching one screenshot for more information.

 

Here the link with the page: http://laboratorio.webuda.com/lab/

 

Thank you very much guys.

Regards,

Gonzalo.

[bamstore]

check out the z-index property in the css file...

 

the ul that you have for the background should be in z-index:0

and the text in white should be in z-index:1

 

that's it..

[rasengan]

Hi bamstore and thank you for your answer,

I've already tried doing like you tell me but the result is what you see in the link below:

 

http://laboratorio.webuda.com/lab/

 

I'm attaching the css files here in order to give you more information.

 

Thank you very much.

 

Regards,

Gonzalo.

menu.css

superfish-modified.css

[halennoor]

in my understanding you want the background image menu.gif to go behind - or as a background- to the 'hombres jamones'? is that correct.

Edited June 27, 2012 by halennoor (see edit history)

[bamstore]

Hi bamstore and thank you for your answer,

I've already tried doing like you tell me but the result is what you see in the link below:

 

http://laboratorio.webuda.com/lab/

 

I'm attaching the css files here in order to give you more information.

 

Thank you very much.

 

Regards,

Gonzalo.

 

Hi Gonzalo,

I haven't downloaded the CSS files because I can see them anyway...

 

Search these lines in http://laboratorio.webuda.com/lab/modules/jbx_menu/cache/menu.css

 

 

 

 

 

 

 

.sf-contener, .sf-menu {

 

 

position: absolute;

top: 70px;

width: 920px;

}

 

and replace them with this:

 

.sf-contener, .sf-menu {

position: relative;

width: 920px;

z-index: 10;

}

 

Now search for these lines in http://laboratorio.webuda.com/lab/modules/jbx_menu/css/superfish-modified.css

 

 

.sf-contener {

 

 

background: url("../gfx/menu/menu.gif") repeat-x scroll left center transparent;

border-radius: 7px 7px 7px 7px;

clear: both;

height: 30px;

line-height: 30px;

margin: 10px 0;

padding-left: 7px;

}

 

 

and replace them with this:

 

 

 

.sf-contener {

 

 

background: url("../gfx/menu/menu.gif") repeat-x scroll left center transparent;

border-radius: 7px 7px 7px 7px;

clear: both;

height: 30px;

line-height: 30px;

margin: 10px 0;

padding-left: 7px;

top: 160px;

}

 

 

 

that should work I guess...

 

good luck

[rasengan]

Hi Bamstore,

I did what you told me and it works but now I have a different problem after changing the css files.

When I instaled the module it was all on the top position (menu.gif image and the text the menu ). When you passed the mouse over the text, the menu.gif made a relief effect over the text. Right now, only the text change the color when you put the mouse on the menu but the image doesn’t make the effect relief.

I’m attaching a screenshoot in order to try to give you better what I would need to complete the solucion. The image shows what the menu do when you put the mouse in “top sellers”, the effect is the same but not with red color but with the image.

I’m not sure if you understand my explanation ( I think the effect in css is using the Hover property) .

Thank you so much for your answer Bamstore/Halennoor

 

Regards,

Gonzalo.

Edited June 27, 2012 by rasengan (see edit history)

[halennoor]

ok now i understand, you want the bckground img to go with the menu. the picture on your second entry confused me.

 

 

Now I am not sure whether the last image shows what you intend to do or what you have already done. To get the menu background color change as such you probably have done this.

 

 

in menu.css insert background property / values- color according to your website scheme. in here you get red background and #fcfcfc text when you hover on the particular menu part e.g. video, eventos etc.

 

 

.sf-menu a:hover {color:#fcfcfc;

background:red;

}

 

 

or if you insert a background img to it ( change the img path to whatever you are using, here i m using an existing image file from the top menu as an example). this way you get the background img to appear when you hover and text still #fcfcfc

 

 

.sf-menu a:hover {color:#fcfcfc;

background:url("/modules/blocktopmenu/img/bg_blocktopmenu.png") repeat-x scroll 0px 0px transparent;

}

 

 

hope it helps.

Edited June 28, 2012 by halennoor (see edit history)

[rasengan]

Thank you very much halennor/Bamstore and I'm sorry for answering you so late.

I'm gonna change the status of this topic to solved. It has been very usefull both answers.

Thanks again to both of you

Regards,

Gonzalo.