Jump to content

[SOLVED] Problem with horizontal menu | top menu


Recommended Posts

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.

post-368805-0-65381600-1338496617_thumb.jpg

Edited by rasengan (see edit history)

Share this post


Link to post
Share on other sites

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 by rasengan (see edit history)

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

post-368805-0-53284700-1338832990_thumb.jpg

Share this post


Link to post
Share on other sites
  • 2 weeks later...

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..

Share this post


Link to post
Share on other sites
  • 2 weeks later...

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

  • Like 1

Share this post


Link to post
Share on other sites

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.

post-368805-0-30751400-1340819211_thumb.jpg

Edited by rasengan (see edit history)

Share this post


Link to post
Share on other sites

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 by halennoor (see edit history)
  • Like 1

Share this post


Link to post
Share on other sites
  • 1 month later...

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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More