Rendre un menu responsive

Hello, je souhaiterais modifier un module prestashop qui affiche un menu avancé. Mon problème est que je n'arrive pas à le rendre responsive car a mon avis il y a un fichier qui prends le dessus. Le module est entièrement configurable dans le BO et donc ces données sont reprises dans un fichier tpl qui s'appelle cssnavmegadrownevo.tpl ce qui donne:

<style type="text/css">
	{literal}
	.container {
		width: {/literal}{$MenuWidthEvo}{literal}px;
	}
	ul#topnavEvo {
		margin : {/literal}{$MarginTopEvo}{literal}px 0px {/literal}{$MarginBottomEvo}{literal}px 0px;
		height: {/literal}{$MenuHeightEvo}{literal}px;
		font-size: {/literal}{$FontSizeMenuEvo}{literal}px;
		background: #{/literal}{$GeneralColorEvo}{literal} {/literal}{if $bg_menuEvo.exist == 1}{literal}url({/literal}{$bg_menuEvo.path}{literal}) repeat-x{/literal}{/if}{literal};
		padding-left : {/literal}{$PaddingLeftEvo}{literal}px;
	}
	ul#topnavEvo li a {
		height: {/literal}{$HeightCalculateEvo}{literal}px;
		color: #{/literal}{$ColorFontMenuEvo}{literal};
		padding-top: {/literal}{$PaddingTopCalculateEvo}{literal}px;
		font-size: {/literal}{$FontSizeMenuEvo}{literal}px;
		min-width: {/literal}{$MinButtonWidthEvo}{literal}px;
		{/literal}
		{if $MaxButtonWidthEvo > 0}
			{literal}			
				max-width: {/literal}{$MaxButtonWidthEvo}{literal}px;
				word-wrap: break-word;
			{/literal}
		{/if}
		{literal}
		_width: {/literal}{$MinButtonWidthEvo}{literal}px;
	}
	ul#topnavEvo li:hover a, ul#topnavEvo li a:hover {
		color: #{/literal}{$ColorFontMenuHoverEvo}{literal};
	}
	{/literal}{if $bg_boutEvo.exist==1}{literal}
	ul#topnavEvo li:hover a, ul#topnavEvo li a:hover { 
		background-position: 0 -{/literal}{$MenuHeightEvo}{literal}px; 
	}
	{/literal}{/if}{literal}

	ul#topnavEvo a.buttons {
		{/literal}
		{if $bg_boutEvo.exist == 1}{literal}background: url({/literal}{$bg_boutEvo.path}{literal}) repeat-x{/literal}{/if}{literal};
	}

	ul#topnavEvo li .sub {
		top: {/literal}{$MenuHeightEvo}{literal}px;
		background: #{/literal}{$GeneralColorEvo}{literal} {/literal}{if $sub_bgEvo.exist == 1}{literal}url({/literal}{$sub_bgEvo.path}{literal}) repeat-x{/literal}{/if}{literal};
	}
	.megaDrownTR1 {
		background-color:#{/literal}{$bgColorTR1Evo}{literal};
	}
	.megaDrownTD1 {
		background-color:#{/literal}{$bgColorTD1Evo}{literal};
	}
	.megaDrownTD2 {
		background-color:#{/literal}{$bgColorTD2Evo}{literal};
	}
	.megaDrownTD3 {
		background-color:#{/literal}{$bgColorTD3Evo}{literal};
	}
	
	ul#topnavEvo li .sub {
		padding-top: 10px;
	}
	
	ul#topnavEvo li .sub ul{
		width: {/literal}{$ColumnWidthEvo}{literal}px;
		margin-left: 10px;

	}

	ul#topnavEvo .sub ul li.stitle a {
		font-size: {/literal}{$FontSizeSubMenuEvo}{literal}px;
		color: #{/literal}{$ColorFontSubMenuEvo}{literal};
	}
	ul#topnavEvo .sub ul li a:hover {
		color: #{/literal}{$ColorFontSubSubMenuHoverEvo}{literal};
	}
	ul#topnavEvo .sub ul li.stitle a:hover {
		color: #{/literal}{$ColorFontSubMenuHoverEvo}{literal};
		
	}
	ul#topnavEvo .sub ul li a {
		{/literal}{if $navlist_arrowEvo.exist == 1}{literal}
		background: url({/literal}{$navlist_arrowEvo.path}{literal}) no-repeat 4px 10px;
		{/literal}{/if}{literal}
		padding: {/literal}{$VerticalPaddingEvo}{literal}px 5px {/literal}{$VerticalPaddingEvo}{literal}px 15px;
		color: #{/literal}{$ColorFontSubSubMenuEvo}{literal};
		font-size: {/literal}{$FontSizeSubSubMenuEvo}{literal}px;
	}
{/literal}

</style>

j'ai essayé d'intégrer dans ce fichier une condition liée à la taille d'écran en regardant sur le web mais pas moyen. ca ne prends pas.
du coup auriez vous une solution pour soi intégrer cette condition, soit desactiver ce fichier en cas de taille d'écran petite directement en php :

 function hookDisplayHeader($params)
  {
  	$this->user_groups =  ($this->context->customer->isLogged() ? $this->context->customer->getGroups() : array(Configuration::get('PS_UNIDENTIFIED_GROUP')));
		$this->page_name = Dispatcher::getInstance()->getController();
		$smarty_cache_id = 'navmegadrownevo-'.$this->page_name.'-'.(int)$this->context->shop->id.'-'.implode(', ',$this->user_groups).'-'.(int)$this->context->language->id.'-'.(int)Tools::getValue('id_category').'-'.(int)Tools::getValue('id_manufacturer').'-'.(int)Tools::getValue('id_supplier').'-'.(int)Tools::getValue('id_cms').'-'.(int)Tools::getValue('id_product');
		$this->context->smarty->cache_lifetime = 31536000;
		Tools::enableCache();
		if (!$this->isCached('views/templates/front/cssnavmegadrownevo.tpl', $smarty_cache_id))
		{
			$MDParameters = array();
			$MDParameters = $this->getParameters();
			
			$MDParameters[0]['bg_menu'] 			= $this->checkIfImageExist('bg_menu', $MDParameters[0]['extensionMenu']);
			$MDParameters[0]['bg_bout'] 			= $this->checkIfImageExist('bg_bout', $MDParameters[0]['extensionBout']);;
			$MDParameters[0]['navlist_arrow'] = $this->checkIfImageExist('navlist_arrow', $MDParameters[0]['extensionArro']);;
			$MDParameters[0]['sub_bg'] 				= $this->checkIfImageExist('sub_bg', $MDParameters[0]['extensionBack']);
			
			if($MDParameters[0]['FontSizeSubMenu'] != 0) 
			{
				$HeightCalculate = round( ($MDParameters[0]['MenuHeight']/2 + $MDParameters[0]['FontSizeSubMenu']/2 + ($MDParameters[0]['MenuHeight']/$MDParameters[0]['FontSizeSubMenu'])) , 0);
				$PaddingTopCalculate = round( $MDParameters[0]['MenuHeight'] - ($MDParameters[0]['MenuHeight']/2 + $MDParameters[0]['FontSizeSubMenu']/2 + ($MDParameters[0]['MenuHeight']/$MDParameters[0]['FontSizeSubMenu'])), 0 );
			}
			
			else 
			{
				$HeightCalculate = round( ($MDParameters[0]['MenuHeight']/2 + $MDParameters[0]['FontSizeSubMenu']/2) , 0);
				$PaddingTopCalculate = round( $MDParameters[0]['MenuHeight'] - ($MDParameters[0]['MenuHeight']/2), 0 );
			}
			
			$this->context->smarty->assign(array(
				'MenuWidthEvo' => ($MDParameters[0]['MenuWidth'] - $MDParameters[0]['paddingLeft']),
				'MenuHeightEvo' => $MDParameters[0]['MenuHeight'],
				'MinButtonWidthEvo' => $MDParameters[0]['MinButtonWidth'],
				'MaxButtonWidthEvo' => $MDParameters[0]['MaxButtonWidth'],
				'GeneralColorEvo' => $MDParameters[0]['GeneralColor'],
				'FontSizeMenuEvo' => $MDParameters[0]['FontSizeMenu'],
				'FontSizeSubMenuEvo' => $MDParameters[0]['FontSizeSubMenu'],
				'FontSizeSubSubMenuEvo' => $MDParameters[0]['FontSizeSubSubMenu'],
				'ColorFontMenuEvo' => $MDParameters[0]['ColorFontMenu'],
				'ColorFontSubMenuEvo' => $MDParameters[0]['ColorFontSubMenu'],
				'ColorFontSubSubMenuEvo' => $MDParameters[0]['ColorFontSubSubMenu'],
				'ColorFontMenuHoverEvo' => $MDParameters[0]['ColorFontMenuHover'],
				'ColorFontSubMenuHoverEvo' => $MDParameters[0]['ColorFontSubMenuHover'],
				'ColorFontSubSubMenuHoverEvo' => $MDParameters[0]['ColorFontSubSubMenuHover'],
				'widthTD1Evo' => $MDParameters[0]['widthTD1'],
				'widthTD3Evo' => $MDParameters[0]['widthTD3'],
				'bgColorTR1Evo' => $MDParameters[0]['backgroundTR1'],
				'bgColorTD1Evo' => $MDParameters[0]['backgroundTD1'],
				'bgColorTD2Evo' => $MDParameters[0]['backgroundTD2'],
				'bgColorTD3Evo' => $MDParameters[0]['backgroundTD3'],
				'VerticalPaddingEvo' => $MDParameters[0]['VerticalPadding'],
				'HeightCalculateEvo' => $HeightCalculate, 
				'ColumnWidthEvo' => $MDParameters[0]['columnSize'],
				'PaddingTopCalculateEvo' => $PaddingTopCalculate, 
				'PaddingLeftEvo' => $MDParameters[0]['paddingLeft'], 
				'MarginTopEvo' => $MDParameters[0]['marginTop'], 
				'MarginBottomEvo' => $MDParameters[0]['marginBottom'], 
				'bg_menuEvo' => $MDParameters[0]['bg_menu'],
				'bg_boutEvo' => $MDParameters[0]['bg_bout'],
				'navlist_arrowEvo' => $MDParameters[0]['navlist_arrow'],
				'sub_bgEvo' => $MDParameters[0]['sub_bg'] )
			);				
			
			$this->context->smarty->assign('pathMDEvo', $this->_path);
			$this->context->smarty->assign('menuMDEvo', $this->_menu);
		}
		
		$this->context->controller->addJS(($this->_path).'/views/js/jquery.hoverIntent.minified.js', 'all');
		$this->context->controller->addCSS(($this->_path).'/views/css/navmegadrownEvo.css', 'all');
		$this->context->controller->addJS(($this->_path).'/views/js/navmegadrownEvo.js');
		
		$html = $this->display(__FILE__, 'views/templates/front/cssnavmegadrownevo.tpl', $smarty_cache_id);
		Tools::restoreCacheSettings();
		return $html;
  }
}

j'ai essayé aussi mais je ne suis pas developpeur et mes connaissances sont limitées.
je précise, le but serait d'avoir un menu comme celui ci:
http://www.chevaldetrefle.com/

mais avancé (choix des liens et images dans sous menu) et surtout quand on regarde avec un smartphone ca devient 1 case avec 1+ avec un menu déroulant en dessous)

merci d'avance
Modifié par cockpitinferno (24 Feb 2015 - 12:48)

Pour modifier ton style suivant les écrans, utilise simplement des Media Queries CSS3.
Tu redéfinis pour chaque taille d'écran les styles que tu souhaites changer.
Modifié par Cr2a (26 Feb 2015 - 14:44)

comme je l'ai indiqué dans mon post j'ai déjà essayé.
notamment des trucs comme ca:
@media screen and (min-width: 200px) and (max-width: 640px) {
.bloc {
display:block;
clear:both;
}
}

le souci c'est que si je le place dans le css direct ca marche pas c'est le fichier tpl qui prends le dessus et si je le place dans le fichier tpl ca marche pas non plus car a mon avis c'est pas la bonne syntaxe. c'est pour ca que je poste ici.

si c'était si simple je m'en serait sortie toute seule

bon de toute facon l'auteur du module qui pour le moment n'a pas encore pu le mettre à jour ma dit qu'il y a plein d'autres trucs à modifier. ca va donc être hors de mes compétences alors c pas grave. laissez tomber.
Modifié par cockpitinferno (27 Feb 2015 - 09:04)