1 reply [Last post]
uamalik
uamalik's picture
Offline
newbie
Last seen: 6 years 43 weeks ago
Timezone: GMT-5
Joined: 2013-01-09
Posts: 2
Points: 3

Hey guys i made a nav menu on 2012 wordpress theme using the following tutorial from awfulmedia http://awfulmedia.com/?p=948

i added a drop down menu and i added a small arrow icon on the menu items that have a submenu so that visitiors can know that there is a submenu on that specific nav item. i have an item that does not have a submenu also displaying that arrow. THe about us link has no drop down so it should not display the arrow in this case. I had 3 items previously, none of them indented. and then i added a new custom link and wanted it to be a submenu of the "order guidelines" link. and i made a new custom link called blog and indented it but nothign happened (no submenu appeared under order guidelines). So then i indented order guidelines and it worked, the blog item showed as a submenu of order guidelines. But now for some reason about us link which is the link right before order guideleinss is showing the arrow.

Also the Order guidelines link is now showing up as the first link..

My website is www.chai-kabob.com

uamalik
uamalik's picture
Offline
newbie
Last seen: 6 years 43 weeks ago
Timezone: GMT-5
Joined: 2013-01-09
Posts: 2
Points: 3

here is my child theme nav menu css of 2012 wordpress theme

@media screen and (min-width: 600px) {
    	.site {
        	max-width: 1140px;
        	max-width: 81.42857143rem;
    	}
	.site-info a {
		text-decoration: none;
	}
	#colophon a:hover {
		color: #E6D22E;
	}
	.nav-bar {
		background: #E6D22E;
		box-shadow: 2px 2px 0 #b5b5b5;
		clear: left;
	}
	.menu ul, .menu li {
		display: inline;
	}
	.menu a {
		padding: 0 20px; 
		text-decoration: none; 
		line-height: 50px;
		display: inline-block;
		color: #fff;
	}
	.menu a:hover {
		background: #939598;
	}
	.menu ul ul a {
		width: 135px;
		line-height: 40px;
		padding: 0 20px;
		display: block;
	}
	.menu ul li {
		position: relative;
		float: left;
	}
	.menu ul ul {
		position: absolute;
		top: -999999px;
		left: 0;
		opacity: 0;
		background: #E6D22E;
		text-align: left;
		box-shadow: 2px 2px 0 #b5b5b5;
	}
	.menu ul li:hover > ul {
		position: absolute;
		top: 100%;
		opacity: 1;
	}
	#show-nav {
		display: none;
		background: #E6D22E;
	}
	#close-nav {
		display: none;
		background: #E6D22E;
		text-align: right;
		box-shadow: 2px 2px 0 #b5b5b5;
	}
	.menu li > a:after {
    		color: #888;
    		content: ' ▾';
	}
 
	.menu li > a:hover:after {
  	  	color: #444;
    		content: ' ▾';
	}
 
	.menu li > a:only-child:after {
    		content: '';
	}
}
footer[role="contentinfo"] {
	max-width: 1140px;
	max-width: 81.42857143rem;
}
 
/* ------------------------------------------ Navigation */
@media only screen and (max-width: 600px) {
	.menu ul ul {
		position: relative;
		top: 0;
	}
	.menu ul li:hover > ul {
		position: relative;
	}
	.menu ul ul a {
		padding: 0 20px 0 40px;
		width: auto;
		line-height: 50px;
	}
	.menu ul li {
		float: none;
	}
	.menu {
		display: none;
	}
	#show-nav {
		display: block;
		box-shadow: 2px 2px 0 #b5b5b5;
	}
	#show-nav a {
		text-decoration: none;
		color: black;
		padding: 10px 20px;
		background-color: #e6d22e;
		outline-style: none;
	}
	.menu a {
		text-decoration: none;
		color: black;
		padding: 10px 20px;
		outline-style: none;
		background-color: #e6d22e;
		display: block;
	}
	.menu {
		text-align: center;
	}
	.menu li {
		margin-top: 5px;
		box-shadow: 2px 2px 0 #b5b5b5;
	}
	#close-nav {
		box-shadow: 2px 2px 0 #b5b5b5;
	}
}