Top Horizontal Menu Width {SOLVED}

[wilebaldo]

Hello every one I have a question, I change the size of my prestashop template form the fixed 750px to 85%, everything is OK, except my menu, that one the Width keep same as before I ready change everything I can but I can't fixed, some one can help me to resolve this.

 

Like you see in the image the menu has a margin on left and right size and won't fit to the new size, event if I mark to the menu margin 0 on left an right is keep same, and the case is with small screens the menu make 2 lines or in other cases not show at all.

Edited January 9, 2018 by wilebaldo (see edit history)

[NemoPS]

Turn off CCC for css, then inspect it to see which file you can edit, it should be superfish-modified.css, them folder/blocktopmenu

[wilebaldo]

@NemoPS I ready modify the file superfish-modified.css but is till making that margin on both sizes also when I make the menu to the left size is not fixed to all possible space.

[NemoPS]

How did you modify it exactly? It looks like it's not grabbing the style. Make sure you disable CCC first, then check the file it's loading

[wilebaldo]

Hello NemoPS, sorry for don't answare before but I was in vacations, well I modify the file Global.CSS changing "Container{ max-width: XXXpx" to "max-width: 85%".

 

I remember was 5 part has the same width on pixels and I changed to 85% to auto adjust to the screen, I ready try the margin on the top menu but is nothing the to change, and in the Global.CSS i'm not sure what is the part of adjust the top menu. if I change the size from the 85% to 100% the menu is still making the same auto margin and not adjust to the full width.

 

One more question: what is that you said I have to disable the "CCC" i don't know what your talking about.

[NemoPS]

I mean going to the back office, advanced parameters, performance, and turn of CCC for CSS

[wilebaldo]

@NemoPS I ready fix it, I have to made some modifications to the files.

 

The BlockTopMenu.tpl in the line 5 have this:

<ul class="sf-menu clearfix menu-content container"> and I Change for this

<ul class="sf-menu clearfix menu-content containermenu">  

And in the Globla.CSS I added  .containermenu {max-width: 100%; }  Just after where the .container {max-width} was. in total is a 3 place where I have to add.

 

Thanks for you help, after you ask to me what I change I see if I made this change is fix the error, I'm not sure if was the correct way but for me is works.