WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Define separate menu and submenu items (4 posts)

  1. bryanbatcher
    Member
    Posted 2 months ago #

    http://www.youngleek.com

    I'm editing the stylesheet for the theme I'm using. I'm trying to figure out how to make the top menu and submenu items two separate items so I can change the font size of the submenu items without changing the size of the top menu items. Is there a way to define a new submenu item that I can customize?

    ******************************************************************
    NAVIGATION STYLES
    (Main Navigation)
    ******************************************************************/
    nav[role=navigation] {
    	position:relative;
    	width:100%;
    	margin:0px;
    	background:none;
    	background-image:url(library/images/bg-nav.png);
    	padding:0;
    }
    
    nav[role=navigation] #searchform {
    	position:absolute;
    	top:10px;
    	right:20px;
    }
    
    nav[role=navigation] #searchform label, nav[role=navigation] #searchform #searchsubmit {
    	display:none;
    }
    
    nav[role=navigation] #searchform #s {
    	background:#dedede;
    	width: 150px;
    	padding:5px;
    	font-family:Georgia, "Times New Roman", Times, serif;
    	font-size:12px;
    	border:1px solid #fff;
    	border-radius:3px;
    	box-shadow:0 0 5px #aaa inset;
    }
    
    	nav[role=navigation] .menu {}
    	nav[role=navigation] .menu ul {
    		margin-right:175px;
    	}
    		nav[role=navigation] .menu ul li {}
    			nav[role=navigation] .menu ul li a, nav[role=navigation] .menu #menu-icon {
    				text-transform:lowercase;
    				font-family: 'IM Fell English SC', serif;
    				font-size:28px;
    				line-height:43px;
    				padding: 0 0.8em;
    				text-shadow: 1px 1px 2px #043156;
    				color:#e8e4d9;
    			}
    				nav[role=navigation] .menu ul li a:hover {
    					background:none;
    					color: #fff;
    				}
    
    				nav[role=navigation] .menu #menu-icon {
    					width:100px;
    					cursor:pointer;
    					display:none;
    				}
    
    				nav[role=navigation] .menu ul li:first-child a {
    				}
    
    		nav[role=navigation] .menu ul li.current-menu-item a,
    		.nav ul li.current_page_item a,
    		nav[role=navigation] .menu ul li.current_page_item a { color:#fff; }
    
    		nav[role=navigation] .menu ul li ul.sub-menu,
    		nav[role=navigation] .menu ul li ul.children {
    			background:#fafafa;
    			box-shadow:1px 1px 3px #aaa;.
    
    		}
    
    		nav[role=navigation] .menu ul li ul.sub-menu li,
    		nav[role=navigation] .menu ul li ul.children li {
    			border-bottom:1px solid #f0f0f0;
    			width:200px;
    		}
    
    		nav[role=navigation] .menu ul li ul.sub-menu li:first-child,
    		nav[role=navigation] .menu ul li ul.children li:first-child {
    
    		}
    			nav[role=navigation] .menu ul li ul li a { color:#555; text-shadow:0px 0px; }
    				nav[role=navigation] .menu ul li ul li a:hover { background:#f5f5f5; color:#555; }
    			nav[role=navigation] .menu ul li ul li:last-child a {}
    			nav[role=navigation] .menu ul li:hover ul {}
    				nav[role=navigation] .menu ul li ul li ul.sub-menu,
    				nav[role=navigation] .menu ul li ul li ul.children {
    					margin-top: -43px;
    				}
    					nav[role=navigation] .menu ul li ul li:hover ul.sub-menu,
    					nav[role=navigation] .menu ul li ul li:hover ul.children {
    
    					}
  2. bryanbatcher
    Member
    Posted 2 months ago #

    Are we allowed to bump our posts?

  3. mrtom414
    Member
    Posted 2 months ago #

    The submenu has a class of dropdown-menu you can use that class to style just the submenu without affecting your top layer.

    example .dropdown-menu a {font-size:11px;color:blue;}

    would change the font-size to 11px and the color to blue.

    good luck on your site.

  4. bryanbatcher
    Member
    Posted 2 months ago #

    I figured it out! I was actually looking in the right spot, I just couldn't out which nav lines I had to change. Thanks for responding.

Reply

You must log in to post.

About this Topic