Contrib.social

Making secondary menu look like main menu

Open on Drupal.org →
Created on 19 September 2020, almost 4 years ago
Updated 28 July 2023, 11 months ago

Hi,
I want to have a secondary menu right below the main menu. With the help of the following link I think managed to move the secondary menu to the right location. (link: https://www.drupal.org/node/1032248 → )

I'm struggling now with editing it with CSS.

I want my secondary menu to look exactly like my main menu. Can you help me figuring out which code I need to put in?

Thanks in advance! Juli

This is my secondary menu css code (I only changed text-align to left, and now I'm stuck):

/* Secondary menu
-------------------------------------------------------------- */

#subnav {
	font-size: 12px;
}

#subnav li a {
	font-weight:normal;
}

#subnav li a:hover {
	color: #005a8c;
}

#subnav-wrapper {
	text-align:left;
}

#subnav-wrapper ul { 
	display: inline;
}

#subnav-wrapper ul li {  
	display: inline; 
	list-style: none;  
	background-image: none;
	padding-left: 5px;
}

#subnav-wrapper ul li,#subnav-wrapper ul li a { 
	font-size: 12px; 
	line-height: 13px; 
}

#secondary-menu ul.menu li {
	display: inline;
	list-style-type: none;
	padding-right:1em;
	padding-left:5px;
}

#secondary-menu ul.menu {
	padding:0;
	text-align:left;
	margin: 0.5em 0 1em;
}

This is my main menu css code (It should be Danland's default code)

/* Primary menu + Superfish
-------------------------------------------------------------- */

#menu {
	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;
}

#nav {
	height:34px; 
	float:left;
}

#nav .contextual-links-region {
	float: left;
	z-index:6;
}

#nav h2 {
	height: 0;
	overflow: hidden;
	position: absolute;
}

#nav .menu, #nav .menu * {
	margin:0;
	padding:0;
	list-style:none;
}

#nav .menu {
	line-height:1.0;
}

#nav .menu ul {
	position:absolute;
	top:-999em;
	width:12em;
}

#nav .menu ul li {
	width:100%;
}

#nav .menu li:hover {
	visibility:inherit;
}

#nav .menu li {
	float:left;
	position:relative;
}

#nav .menu a {
	display:block;
	position:relative;
}

#nav .menu li:hover ul,
#nav .menu li.sfHover ul {
	left:0;
	top:34px;
	z-index:99;
}

#nav ul.menu li:hover li ul,
#nav ul.menu li.sfHover li ul {
	top:-999em;
}

#nav ul.menu li li:hover ul,
#nav ul.menu li li.sfHover ul {
	left:12em;
	top:0;
}

#nav ul.menu li li:hover li ul,
#nav ul.menu li li.sfHover li ul {
	top:-999em;
}

#nav ul.menu li li li:hover ul,
#nav ul.menu li li li.sfHover ul {
	left:12em;
	top:0;
}

#nav .menu {
	float:left;
	margin-bottom:1em;
}

#nav .menu a {
	padding:.75em 1em;
	text-decoration:none;
}

#nav .menu a, #nav .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;
}

#nav .menu li {
	border-right: 1px solid #345c8c;
}

#nav .menu li:last-child {
	border-right:none;
}

#nav .menu li li {
	background: #3b6999;
	border-right:none;
}

#nav .menu li li li {
	background: #3b6999;
	top: 0px;
}

#nav .menu li:hover, #nav .menu li.sfHover,
#nav .menu a:focus, #nav .menu a:hover, #nav .menu a:active {
	outline:0;
}

#nav .menu li:hover, 
#nav .menu li.sfHover,
#nav .menu a:focus, 
#nav .menu a:hover, 
#nav .menu a:active {
	z-index:10;
}

#nav .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 */
}

#nav .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; 
}

#nav .menu li  li:first-child a:hover {
	background: #3b6999;
}

#nav .menu li li a:hover {
	background: #3b6999;
}

#nav .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 */
}

#nav .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; 
}

#nav .menu li li:first-child a.is-active {
	background: #3b6999;
	border-radius: 0px;
}

#nav .menu li li a.is-active {
	background: #3b6999;
	border-radius: 0px;
}

#nav .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 */
}

#nav .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; 
}

#nav .menu li li.active-trail:first-child {
	background: #3b6999;
	border-radius: 0px;
}

#nav .menu li.active-trail li {
	background: #3b6999;
	border-radius: 0px;
}

#nav .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 */
}

#nav .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; 
}

#nav .menu li li.active-trail:first-child a.is-active {
	background: #3b6999;
	border-radius: 0px;
}

#nav .menu li.active-trail li a.is-active {
	background: #3b6999;
	border-radius: 0px;
}

#nav .menu li.active-trail li {
	background: #3b6999;
}

#nav .menu li li:hover {
	background: #3b6999;
}

#nav .menu li li li:hover {
	background: #3b6999;
}

#nav .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 */
}

/*** arrows (for all except IE7) **/
.sf-arrows .sf-with-ul {
	padding-right: 2.5em;
	*padding-right: 1em; /* no CSS arrows for IE7 (lack pseudo-elements) */
}
/* styling for both css and generated arrows */
.sf-arrows .sf-with-ul:after {
	content: '';
	position: absolute;
	top: 50%;
	right: 1em;
	margin-top: -3px;
	height: 0;
	width: 0;
	/* order of following 3 rules important for fallbacks to work */
	border: 5px solid transparent;
	border-top-color: #dFeEFF; /* edit this to suit design (no rgba in IE8) */
	border-top-color: rgba(255,255,255,.5);
}
.sf-arrows > li > .sf-with-ul:focus:after,
.sf-arrows > li:hover > .sf-with-ul:after,
.sf-arrows > .sfHover > .sf-with-ul:after {
	border-top-color: white; /* IE8 fallback colour */
}
/* styling for right-facing arrows */
.sf-arrows ul .sf-with-ul:after {
	margin-top: -5px;
	margin-right: -3px;
	border-color: transparent;
	border-left-color: #dFeEFF; /* edit this to suit design (no rgba in IE8) */
	border-left-color: rgba(255,255,255,.5);
}
.sf-arrows ul li > .sf-with-ul:focus:after,
.sf-arrows ul li:hover > .sf-with-ul:after,
.sf-arrows ul .sfHover > .sf-with-ul:after {
	border-left-color: white;
}
💬 Support request
Status

Needs review

Version

1.0

Component

Code

Created by

jergen

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • Comment 11 months ago →
    🇮🇳India Dheeraj Jhamtani

    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.

contrib.social Blog FAQ Discussions
Production build 0.69.0 2024