Thursday, 03 December 2015 19:32

Menu

Written by

Menu

/* Make Menu all gold */
#jsn-menu {
	color: #13548E;    
	background-color: #D1B87E;
}

 

/* make unselected links blue */
div.jsn-modulecontainer ul.menu-mainmenu li > a {
    color: #13548E;
}

 

/* remove <li> border */
div.jsn-modulecontainer ul.menu-mainmenu > li, div.jsn-modulecontainer ul.menu-mainmenu > li > a {
    border-right: none;
}

 

/* removes black line below menu */
#jsn-content-top {
    padding-top: 3px;
}

 

/* blue links for menu module */
div.jsn-modulecontainer ul.menu-sidemenu > li > a {
    color: #13548E;
	font-weight: bold;
}

 

/* Main Menu - make menu items smaller */
div.jsn-modulecontainer ul.menu-mainmenu > li > a {	
	padding: 10px 20px;
}

 

/* Main Menu - Font Size */
div.jsn-modulecontainer ul.menu-mainmenu > li > a {
    font-size: 14px;
}

This is sometimes set in the template.css for some reason

/* Menu Items red - but keep active white */
body #jsn-menu ul.menu-mainmenu a {
	color: #8E2E42;
}
body #jsn-menu ul.menu-mainmenu > li.active > a {
    color: #fff;
}

 

/* reducemenu item width */
div.jsn-modulecontainer ul.menu-mainmenu > li > a {
    padding: 4px 10px;
}

 

/* Make Main Menu Grey */
#jsn-menu {
    background-color: #EFEFEF;  /*#EFEFEF  this is very common*/
    box-shadow: none;
}

 

/* Main Menu - change font size and color - untested */
div.jsn-modulecontainer ul.menu-mainmenu > li > a span.jsn-menutitle {
	font-size: 12px;
	color: #ADADAD;
}

 

/* Main Menu - change font weight - untested */
#jsn-menu ul.menu-mainmenu > li > a span.jsn-menutitle {	
	font-weight: 700;
}

 

/* add border to the top of menu */
#jsn-menu {
    border-top: 1px solid #dcdcdc;
}

 

/* Make menu deeper */
div.jsn-modulecontainer ul.menu-mainmenu > li {
	padding: 40px 0;
}

 

/* make sticky menu deeper */
#jsn-header.jsn-menu-sticky ul.menu-mainmenu > li {
	padding: 40px 0px;
}

 

/** Footer menu fix **/

/* Remove Cross */
.jsn-menu-mobile-control{display: none !important;}

/* remove Line Separators */
ul.menu-divmenu li {border-right: 1px none;}

 

 

Worked Menu Example

This creates a Black Menu, White Font and the sub-menu items have a grey background.

/* Makes Black Background and white font */
#jsn-content, #jsn-maincontent, #jsn-page, #jsn-header, #jsn-footer {
	background-color: black;		
	color: white;
}

/* make menu font gold */
#jsn-menu a > span  {
	font-family: "LTKaliberItalic", Times, serif;
	color: #B78B1A;
	font-size:150%;
}

/* mobile menu gold */
#jsn-menu .jsn-modulecontent > .jsn-menu-toggle, #jsn-menu .jsn-modulecontainer[class*="display-"] .jsn-modulecontainer_inner h3.jsn-moduletitle {
	font-family: "LTKaliberItalic", Times, serif;
	color: #B78B1A;
	font-size:150%;
}


/* mainmenu make sub levels have grey background */
/* ----- 1st LEVEL ----- */
div.jsn-modulecontainer ul.menu-mainmenu ul {
	background-color: #333333;
}
/* ----- HOVER STATE ----- */
div.jsn-modulecontainer ul.menu-mainmenu ul li:hover > a,
div.jsn-modulecontainer ul.menu-mainmenu ul li.active > a {
	background-color: #333333;
	/*color: #627989;*/
}
/* ----- ACTIVE STATE ----- */
div.jsn-modulecontainer ul.menu-mainmenu li.active > a {
	color: #627989;
}

 

Read 1305 times Last modified on Friday, 27 January 2017 12:12