Help about Blocktopmenu

[lyo]

Hi everyone, 

 

i'am trying to personalize my top menu, and i need somme goo help. i'am newbie an french ! Sorry if my request is not clear...

 

i'am using prestashop 1.5.5.0 with infant theme by templatemonster.

 

- First, there is two kinds of menu : the "classic one" for big screen and the "small one" (black horizontal menu+) for small screen (max-width:1199px).

Question : I would like to keep the classic menu for all screen size. I tried to cut in the css code all about the small menu, and it seems to work, but it's a bit dirty, there must be a better way

 

- second, i can only add seven links in my menu, when i add one more, it appears, but without the css design. Question : How can i fix it ? Something must be missing ...

 

- last : for the classic menu, there is a button "catégories" wich allow to hide/show the menu. I don't find a way to erase it.

 

Here is some screenshot and the CSS code for the menu. Hope it can helps !

#menu-trigger { display:none;}
#menu-wrap {
	position:relative;
	z-index:2;
	background-color: #6CF;

}
#menu-custom, #menu-custom ul {margin: 0;padding: 0;list-style: none;}
#menu-custom:before,
#menu-custom:after {
	content: "";
	display: table;
	
}
#menu-custom:after {clear: both;}
#menu-custom {zoom:1;}
#menu-custom > li {
	float: left;
	position: relative;
	border-top:6px solid #f9f9f9;	
	padding-right: 15px;
	padding-left: 15px;
	
}

#menu-custom > li.one{
	background-color: #CC6;
	background-repeat: repeat-x;
	background-position: 0 0;

}
#menu-custom > li.two{
	background-color: #3CC;
	background-repeat: repeat-x;
	background-position: 0 0;
}
#menu-custom > li.three{
	background-color: #993;
	background-repeat: repeat-x;
	background-position: 0 0;
}
#menu-custom > li.four{
	background-color: #6C3;
	background-repeat: repeat-x;
	background-position: 0 0;padding-left: 16px;
	padding-right: 16px;
}
#menu-custom > li.five{
	background-color: #F66;
	background-repeat: repeat-x;
	background-position: 0 0;
}
#menu-custom > li.six{
	background-color: #93C;
	background-repeat: repeat-x;
	background-position: 0 0;
}
#menu-custom > li.seven{
	background-color: #3C6;
	background-repeat: repeat-x;
	background-position: 0 0;
}
#menu-custom > li.eight{
	background-color: #C69;
	background-repeat: repeat-x;
	background-position: 0 0;
}



#menu-custom>li:hover{border-top:6px solid #343434;}
#menu-custom li.sfHoverForce > a{ color:#000;}
#menu-custom a {
	float: left;
	font-family: 'Dancing Script', cursive;
	color: #fff;
	text-transform:none;
	font-size:24px;
	font-weight:400;
	text-decoration: none;
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
}
#menu-custom a:hover, #menu-custom > li:hover > a, #menu-custom > li.sfHoverForce > a { color:#000;}
#menu-custom li li:hover > a {color: #343434; text-shadow:0 0 #343434;}
#menu-custom ul {margin: 20px 0 0 0; padding:35px 8px 35px 29px; opacity: 0;visibility: hidden;position: absolute;top:40px;left: 0;z-index: 1;background: #fff; border:1px solid #d5d3d3; -webkit-transition: all .2s ease-in-out;-moz-transition: all .2s ease-in-out;-ms-transition: all .2s ease-in-out;-o-transition: all .2s ease-in-out;transition: all .2s ease-in-out;}
#menu-custom li:hover > ul {opacity: 1;visibility: visible;margin: 0;}
#menu-custom ul ul {top: 0;left:220px;margin: 0 0 0 20px;}
#menu-custom ul li {float: none;display: block;border: 0; position:relative;}
#menu-custom ul a {padding:2px 10px 1px;width:200px;display: block;white-space: nowrap;float: none;text-transform:uppercase; font-size:13px; font-family: 'Fjalla One', sans-serif; font-weight:normal; color:#50cae4; text-shadow:0 0 #50cae4;}
#menu-custom ul a:hover {}
#menu-custom ul ul li:first-child a:after {left: -6px;top: 50%;margin-top: -6px;border-left: 0;border-bottom: 6px solid transparent;border-top: 6px solid transparent;border-right: 6px solid #fff;}
#menu-custom ul li:first-child a:hover:after {border-bottom-color: #d5d3d3;}
#menu-custom ul ul li:first-child a:hover:after {border-right-color: #fff;border-bottom-color: transparent;}
#menu-trigger {display: none;}
#menu-custom {display: block;}
@media only screen and (max-width:1199px) {
#menu-wrap {position: relative;}
#menu-wrap * {-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;}
#menu-trigger {height: 48px;line-height: 48px;cursor: pointer;padding: 0 0 0 20px;color: #fff;font-weight: bold;font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;font-size:23px; background:#000;}
#menu-trigger.menu-custom-icon .menu-icon{background:url(../../../../img/main_sprite.png) no-repeat left -797px #000; }
#menu-trigger .menu-icon{background:url(../../../../img/main_sprite.png) no-repeat left -749px #000;width:26px; height:26px; display:block; position:absolute; top:11px; right:10px;}
#menu-custom {margin: 0; padding: 10px;position: absolute;top: 48px;width: 100%;z-index: 1;background-color: #d5d3d3;display: none;}
#menu-custom:after {content: '';position: absolute;left: 25px;top: -8px;border-left: 8px solid transparent;border-right: 8px solid transparent;border-bottom: 8px solid #d5d3d3;}
#menu-custom ul {position: static;visibility: visible;opacity: 1;margin: 0;background: none;-webkit-transition:none;-moz-transition:none;-ms-transition:none;-o-transition:none;transition:none; padding:0;}
#menu-custom ul.menu-mobile-2{ display:none;}
#menu-custom ul ul {margin: 0 0 0 20px !important;}
#menu-custom li {position: static;display: block;float: none;border: 0;margin: 5px 15px 5px 5px;position:relative;}
#menu-custom ul a {padding:2px 10px 1px;width:200px;display: block;white-space: nowrap;float: none;text-transform:uppercase; font-size:13px; font-family:Arial, Helvetica, sans-serif; font-weight:normal; color:#fff; }
#menu-custom ul li{margin-left: 20px;}
#menu-custom a{display: block;float: none;padding:5px;color: #fff;font-size:18px;}
#menu-custom a:hover{color: #979797;}
#menu-custom ul a{padding:5px;width: auto;}
#menu-custom ul a:hover{background: none;color: #979797;}
#menu-custom ul li:first-child a:after,
#menu-custom ul ul li:first-child a:after {border: 0;}

#menu-custom > li,
#menu-custom > li:hover{border-top:none;}

#menu-custom > li.one{background:none;}
#menu-custom > li.two{ background:none;}
#menu-custom > li.three{background:none;}
#menu-custom > li.four{background:none;}
#menu-custom > li.five{background:none;}
#menu-custom > li.six{background:none;}
#menu-custom > li.seven{background:none;}
#menu-custom > li.eight{background:none;}


.open-mobile-2{width:18px;height:18px;display:block;position:absolute;right:-11px;top:7px;background:url(../../../../img/main_sprite.png) no-repeat left -715px;}
.open-mobile-2:hover{ cursor:pointer;}
.open-mobile-2.mobile-close-2{background:url(../../../../img/main_sprite.png) no-repeat left -846px;}
.open-mobile.mobile-close{background:url(../../../../img/main_sprite.png) no-repeat left -846px;}
#header-inner .row {margin-left:0px;}
#menu-custom {margin-left:0px;}
.no-transition {-webkit-transition: none;-moz-transition: none;-ms-transition: none;-o-transition: none;transition: none;opacity: 1;visibility: visible;display: none;}
#menu-custom li:hover > .no-transition {display: block;}
}

I keep trying to look around, 

thanks for your help !

 

Lyo.