- 🇮🇳India Dheeraj Jhamtani Jaipur, Rajasthan
Hi @apaderno, For creating a menu line primary menu override the menu template which you want to create like primary menu and add two divs before on this template at the start first is with menu2 id and other is nav2 id and close it at the end of the template than add this css to your style.css.
#menu2 { min-height: 34px; background: #14345c; /* For browsers that do not support gradients */ background: -webkit-linear-gradient(#14345c, #285c91); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(#14345c, #285c91); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(#14345c, #285c91); /* For Firefox 3.6 to 15 */ background: linear-gradient(#14345c, #285c91); /* Standard syntax */ width: 952px; margin: 0 auto; -webkit-box-shadow: 1px 2px 3px -1px rgba(0, 0, 0, 0.75); -moz-box-shadow: 1px 2px 3px -1px rgba(0, 0, 0, 0.75); box-shadow: 1px 2px 3px -1px rgba(0, 0, 0, 0.75); border-radius: 3px; } #nav2 { min-height: 34px; float: left; } #nav2 .contextual-links-region { float: left; z-index: 6; } #nav2 h2 { height: 0; overflow: hidden; position: absolute; } #nav2 .menu, #nav2 .menu * { margin: 0; padding: 0; list-style: none; } #nav2 .menu { line-height: 1.0; } #nav2 .menu ul { position: absolute; top: -999em; width: 12em; } #nav2 .menu ul li { width: 100%; } #nav2 .menu li:hover { visibility: inherit; } #nav2 .menu li { float: left; position: relative; } #nav2 .menu a { display: block; position: relative; } #nav2 .menu li:hover ul, #nav2 .menu li.sfHover ul { left: 0; top: 34px; z-index: 99; } #nav2 ul.menu li:hover li ul, #nav2 ul.menu li.sfHover li ul { top: -999em; } #nav2 ul.menu li li:hover ul, #nav2 ul.menu li li.sfHover ul { left: 12em; top: 0; } #nav2 ul.menu li li:hover li ul, #nav2 ul.menu li li.sfHover li ul { top: -999em; } #nav2 ul.menu li li li:hover ul, #nav2 ul.menu li li li.sfHover ul { left: 12em; top: 0; } #nav2 .menu { float: left; } #nav2 .menu a { padding: .75em 1em; text-decoration: none; } #nav2 .menu a, #nav2 .menu a:visited { color: #fff; text-decoration: none; font-size: 12px; font-weight: bold; text-transform: uppercase; padding-right: 30px; padding-left: 30px; padding-top: 12px; } #nav2 .menu li { border-right: 1px solid #345c8c; } #nav2 .menu li:last-child { border-right: none; } #nav2 .menu li li { background: #3b6999; border-right: none; } #nav2 .menu li li li { background: #3b6999; top: 0px; } #nav2 .menu li:hover, #nav2 .menu li.sfHover, #nav2 .menu a:focus, #nav2 .menu a:hover, #nav2 .menu a:active { outline: 0; } #nav2 .menu li:hover, #nav2 .menu li.sfHover, #nav2 .menu a:focus, #nav2 .menu a:hover, #nav2 .menu a:active { z-index: 10; } #nav2 .menu li a:hover { background: #142f50; /* For browsers that do not support gradients */ background: -webkit-linear-gradient(#142f50, #26507d); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(#142f50, #26507d); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(#142f50, #26507d); /* For Firefox 3.6 to 15 */ background: linear-gradient(#142f50, #26507d); /* Standard syntax */ } #nav2 .menu li:first-child a:hover { background: #142f50; /* For browsers that do not support gradients */ background: -webkit-linear-gradient(#142f50, #26507d); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(#142f50, #26507d); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(#142f50, #26507d); /* For Firefox 3.6 to 15 */ background: linear-gradient(#142f50, #26507d); /* Standard syntax */ border-top-left-radius: 3px; border-bottom-left-radius: 3px; } #nav2 .menu li li:first-child a:hover { background: #3b6999; } #nav2 .menu li li a:hover { background: #3b6999; } #nav2 .menu li a.is-active { background: #142f50; /* For browsers that do not support gradients */ background: -webkit-linear-gradient(#142f50, #26507d); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(#142f50, #26507d); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(#142f50, #26507d); /* For Firefox 3.6 to 15 */ background: linear-gradient(#142f50, #26507d); /* Standard syntax */ } #nav2 .menu li:first-child a.is-active { background: #142f50; /* For browsers that do not support gradients */ background: -webkit-linear-gradient(#142f50, #26507d); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(#142f50, #26507d); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(#142f50, #26507d); /* For Firefox 3.6 to 15 */ background: linear-gradient(#142f50, #26507d); /* Standard syntax */ border-top-left-radius: 3px; border-bottom-left-radius: 3px; } #nav2 .menu li li:first-child a.is-active { background: #3b6999; border-radius: 0px; } #nav2 .menu li li a.is-active { background: #3b6999; border-radius: 0px; } #nav2 .menu li.active-trail { background: #142f50; /* For browsers that do not support gradients */ background: -webkit-linear-gradient(#142f50, #26507d); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(#142f50, #26507d); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(#142f50, #26507d); /* For Firefox 3.6 to 15 */ background: linear-gradient(#142f50, #26507d); /* Standard syntax */ } #nav2 .menu li.active-trail:first-child { background: #142f50; /* For browsers that do not support gradients */ background: -webkit-linear-gradient(#142f50, #26507d); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(#142f50, #26507d); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(#142f50, #26507d); /* For Firefox 3.6 to 15 */ background: linear-gradient(#142f50, #26507d); /* Standard syntax */ border-top-left-radius: 3px; border-bottom-left-radius: 3px; } #nav2 .menu li li.active-trail:first-child { background: #3b6999; border-radius: 0px; } #nav2 .menu li.active-trail li { background: #3b6999; border-radius: 0px; } #nav2 .menu li.active-trail a.is-active { background: #142f50; /* For browsers that do not support gradients */ background: -webkit-linear-gradient(#142f50, #26507d); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(#142f50, #26507d); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(#142f50, #26507d); /* For Firefox 3.6 to 15 */ background: linear-gradient(#142f50, #26507d); /* Standard syntax */ } #nav2 .menu li.active-trail:first-child a.is-active { background: #142f50; /* For browsers that do not support gradients */ background: -webkit-linear-gradient(#142f50, #26507d); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(#142f50, #26507d); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(#142f50, #26507d); /* For Firefox 3.6 to 15 */ background: linear-gradient(#142f50, #26507d); /* Standard syntax */ border-top-left-radius: 3px; border-bottom-left-radius: 3px; } #nav2 .menu li li.active-trail:first-child a.is-active { background: #3b6999; border-radius: 0px; } #nav2 .menu li.active-trail li a.is-active { background: #3b6999; border-radius: 0px; } #nav2 .menu li.active-trail li { background: #3b6999; } #nav2 .menu li li:hover { background: #3b6999; } #nav2 .menu li li li:hover { background: #3b6999; } #nav2 .menu ul { box-shadow: 2px 2px 6px rgba(0, 0, 0, .2); min-width: 12em; /* allow long menu items to determine submenu width */ *width: 12em; /* no auto sub width for IE7, see white-space comment below */ }
it will create menu like primary menu.